import {ExampleCodeBlock} from '@workday/canvas-kit-docs';

import ContextualHelpDialogFocusRedirect from './examples/ContextualHelp/ContextualHelpDialogFocusRedirect';
import ContextualHelpDialogFocusTrap from './examples/ContextualHelp/ContextualHelpDialogFocusTrap';
import ContextualHelpTooltip from './examples/ContextualHelp/ContextualHelpTooltip';


## Contextual Help

### Tooltip

A Canvas Kit `Tooltip` can be used to provide additional information about why an element is
disabled. We should not, however, put one directly onto a disabled element because disabled elements
do not receive focus (meaning the tooltip content is not accessible to keyboard users). Instead, we
should provide a button next to the disabled element and apply the `Tooltip` to the button.

**Note: We should avoid passing the `type` prop to the `Tooltip`. The default behavior is to assign
an `aria-label` to the button (which is what we want)**

<ExampleCodeBlock code={ContextualHelpTooltip} />

### Contextual Help Popup Without Focus Trap

If one would like to provide a bit more content than a `Tooltip` will allow (such as buttons or
links) a popup should be used. In this example, a `Dialog` is used in conjunction with the
`useFocusRedirect` hook to display some text and a link. It will not trap focus; instead, it will
close and focus the next element if the user tabs out or clicks away. A `Tooltip` is still used on
the `Dialog.Target` component so that it remains accessible for screen readers.

`Dialog` inserts an invisible `<div>` element right after the button with an `aria-owns` attribute
pointing to the `Dialog.Card`. This allows screen readers to read the popup contents in a logical
order with the target. In other words, the screen reader will announce the `Dialog` right after the
open button instead of out of order.

Additionally, we apply `aria-describedby` to our `Dialog.Target` to associate it with the
`FormField.Label`.

<ExampleCodeBlock code={ContextualHelpDialogFocusRedirect} />

### Contextual Help Dialog With Focus Trap

The `useFocusTrap` hook can be used in contextual help where trapping focus within the `Dialog` is
the goal. In this case, focus will remain in the `Dialog` until it is closed. This example is
otherwise identical to the one above.

<ExampleCodeBlock code={ContextualHelpDialogFocusTrap} />