Skip to content

Commit

Permalink
Separate instructions for libraries
Browse files Browse the repository at this point in the history
  • Loading branch information
@thatblindgeye
thatblindgeye committed Jul 6, 2022
1 parent 411fa51 commit f0eb69d
Showing 1 changed file with 23 additions and 24 deletions.
47 changes: 23 additions & 24 deletions packages/v4/src/content/accessibility/tooltip/tooltip.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,23 @@ import { Checkbox, List, ListItem } from '@patternfly/react-core';
To implement an accessible PatternFly **tooltip**:

- Avoid using tooltips on static elements such as a `div` or `span`, except in cases of truncation.
- Pass in `role="tooltip"` (HTML/CSS) to the element acting as the tooltip component.
- Pass in `aria="labelledby"` to the tooltip component (PatternFly React) or the `aria-labelledby` attribute to the trigger (HTML/CSS) when the tooltip should act as the primary label for its trigger:

For the PatternFly React library:

- Pass in `aria="labelledby"` to the tooltip component when the tooltip should act as the primary label for its trigger:
```noLive
// PatternFly React
<Tooltip content="Copy to clipboard" aria="labelledby">
<button>
<CopyIcon />
</button>
</Tooltip>
```

// HTML/CSS
For the HTML/CSS library:

- Pass in `role="tooltip"` to the element acting as the tooltip component.
- Pass in the `aria-labelledby` attribute to the trigger when the tooltip should act as the primary label for its trigger:
```noLive
<div class="pf-c-tooltip pf-m-top" role="tooltip">
<div class="pf-c-tooltip__arrow"></div>
<div class="pf-c-tooltip__content" id="tooltip-label-content">
Expand All @@ -31,16 +37,9 @@ To implement an accessible PatternFly **tooltip**:
<CopyIcon />
</button>
```
- Pass in the `aria-describedby` attribute to the trigger (HTML/CSS) when the tooltip should act as supplementary information (this is the default behavior for PatternFly React when the tooltip wraps the trigger):
```noLive
// PatternFly React
<Tooltip content="Supplementary information within a tooltip">
<button>
Button text label
</button>
</Tooltip>
- Pass in the `aria-describedby` attribute to the trigger when the tooltip should act as supplementary information:

// HTML/CSS
```noLive
<div class="pf-c-tooltip pf-m-top" role="tooltip">
<div class="pf-c-tooltip__arrow"></div>
<div class="pf-c-tooltip__content" id="tooltip-description-content">
Expand All @@ -61,7 +60,7 @@ At a minimumm, a tooltip should meet the following criteria:
<Checkbox id="tooltip-a11y-checkbox-1" label="Unless it is a case of truncation, the tooltip is not placed on a static element." />
</ListItem>
<ListItem>
<Checkbox id="tooltip-a11y-checkbox-2" label={<span>If using the HTML/CSS library, <code class="ws-code">role="tooltip"</code> is passed into the tooltip component.</span>} />
<Checkbox id="tooltip-a11y-checkbox-2" label={<span>The tooltip component has the <code class="ws-code">role="tooltip"</code> attribute.</span>} />
</ListItem>
<ListItem>
<Checkbox id="tooltip-a11y-checkbox-3" label={<span>If the tooltip is meant to act as a primary label, the trigger has the <code class="ws-code">aria-labelledby</code> attribute linked to the tooltip contents.</span>} description="One use-case for this is when a button contains only an icon and no visible text label." />
Expand Down Expand Up @@ -92,10 +91,10 @@ Various React props have been provided for more fine-tuned control over accessib

| Prop | Applied to | Reason |
|---|---|---|
| aria-live | Tooltip | When a value of "polite" is passed in, allows assistive technologies to announce the tooltip contents when it is expected or intended to dynamically update, such as in response to a user action. This should only be passed in when the `children` prop is also used on the tooltip. <br/><br/> `aria-live="polite"` is set by default when using the `reference` prop in order to allow assistive technologies to correctly announce tooltip contents regardless if it will dynamically update or not. |
| aria | Tooltip | When a value of "describedby" (default behavior) or "labelledby" is passed in, allows assistive technologies to announce the tooltip contents when it is triggered. A value of "describedby" sets the trigger's `aria-describedby` attribute and should be used when the tooltip should act as supplementary information. A value of "labelledby" sets the trigger's `aria-labelledby` attribute and should be used when the tooltip should act as a primary label. <br/><br/> When a value of "none" is passed in, prevents `aria-labelledby` and `aria-describedby` from being set on the trigger. Only pass in a value of "none" when either `aria-labelledby` or `aria-describedby` is manually set on the trigger and the `id` prop is manually passed into the tooltip. <br/><br/> This prop should only be passed in when the `children` prop is also used on the tooltip. |
| id | Tooltip | Sets the `id` attribute on the tooltip, which can be passed in as the value to a trigger's `aria-labelledby` or `aria-describedby` attribute. **Required** when either `aria-labelledby` or `aria-describedby` is manually set on the trigger or when the `reference` prop is passed into the tooltip. |
| reference | Tooltip | Links the tooltip to a trigger when the `children` prop cannot be used. When passing in this prop, the `id` prop must also be passed in, and either `aria-labelledby` or `aria-describedby` must be set on the trigger with a value of the tooltip's `id`. |
| `aria-live` | `Tooltip` | When a value of "polite" is passed in, allows assistive technologies to announce the tooltip contents when it is expected or intended to dynamically update, such as in response to a user action. This should only be passed in when the `children` prop is also used on the tooltip. <br/><br/> `aria-live="polite"` is set by default when using the `reference` prop in order to allow assistive technologies to correctly announce tooltip contents regardless if it will dynamically update or not. |
| `aria` | `Tooltip` | When a value of "describedby" (default behavior) or "labelledby" is passed in, allows assistive technologies to announce the tooltip contents when it is triggered. A value of "describedby" sets the trigger's `aria-describedby` attribute and should be used when the tooltip should act as supplementary information. A value of "labelledby" sets the trigger's `aria-labelledby` attribute and should be used when the tooltip should act as a primary label. <br/><br/> When a value of "none" is passed in, prevents `aria-labelledby` and `aria-describedby` from being set on the trigger. Only pass in a value of "none" when either `aria-labelledby` or `aria-describedby` is manually set on the trigger and the `id` prop is manually passed into the tooltip. <br/><br/> This prop should only be passed in when the `children` prop is also used on the tooltip. |
| `id` | `Tooltip` | Sets the `id` attribute on the tooltip, which can be passed in as the value to a trigger's `aria-labelledby` or `aria-describedby` attribute. **Required** when either `aria-labelledby` or `aria-describedby` is manually set on the trigger or when the `reference` prop is passed into the tooltip. |
| `reference` | `Tooltip` | Links the tooltip to a trigger when the `children` prop cannot be used. When passing in this prop, the `id` prop must also be passed in, and either `aria-labelledby` or `aria-describedby` must be set on the trigger with a value of the tooltip's `id`. |

### Aria-live

Expand Down Expand Up @@ -146,11 +145,11 @@ Various HTML attributes and PatternFly classes can be used for more fine-tuned c

| Attribute or class | Applied to | Reason |
|---|---|---|
| aria-live="polite" | .pf-c-tooltip | Allows assistive technologies to announce the tooltip contents when it is expected or intended to dynamically update, such as in response to a user action. |
| id | .pf-c-tooltip | Used to link the tooltip to a trigger by passing in the tooltip's `id` as the value to the trigger's `aria-describedby` or `aria-labelledby` attribute. **Required**. |
| role="tooltip" | .pf-c-tooltip | Adds a tooltip role to the component. **Required**. |
| aria-describedby | element that triggers the tooltip | Allows assistive technologies to announce the tooltip contents when it is triggered. **Required** when the tooltip should act as supplementary information. |
| aria-labelledby | element that triggers the tooltip | Allows assistive technologies to announce the tooltip contents when it is triggered. **Required** when the tooltip should act as the primarly label of the trigger. |
| `aria-live="polite"` | `.pf-c-tooltip` | Allows assistive technologies to announce the tooltip contents when it is expected or intended to dynamically update, such as in response to a user action. |
| `id` | `.pf-c-tooltip` | Used to link the tooltip to a trigger by passing in the tooltip's `id` as the value to the trigger's `aria-describedby` or `aria-labelledby` attribute. **Required**. |
| `role="tooltip"` | `.pf-c-tooltip` | Adds a tooltip role to the component. **Required**. |
| `aria-describedby` | element that triggers the tooltip | Allows assistive technologies to announce the tooltip contents when it is triggered. **Required** when the tooltip should act as supplementary information. |
| `aria-labelledby` | element that triggers the tooltip | Allows assistive technologies to announce the tooltip contents when it is triggered. **Required** when the tooltip should act as the primarly label of the trigger. |

## Additional considerations

Expand All @@ -160,6 +159,6 @@ Consumers must ensure they take any additional considerations when customizing a

## Further reading

To read more about accessibility with tooltips, refer to the resources listed below.
To read more about accessibility with tooltips, refer to the following resources:

- [ARIA Authoring Practices Guide - Tooltip widget](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)

0 comments on commit f0eb69d

Please sign in to comment.