-
Notifications
You must be signed in to change notification settings - Fork 152
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: add accessibility docs to Tooltip component
- Loading branch information
Showing
2 changed files
with
111 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 96 additions & 0 deletions
96
docs/src/documentation/03-components/04-overlay/tooltip/03-accessibility.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
--- | ||
title: Accessibility | ||
redirect_from: | ||
- /components/tooltip/accessibility/ | ||
--- | ||
|
||
## Accessibility | ||
|
||
### Tooltip | ||
|
||
The Tooltip component has been designed with accessibility in mind. | ||
|
||
It can be used with keyboard navigation, and it includes the following properties that allow to improve the experience for users of assistive technologies: | ||
|
||
| Name | Type | Description | | ||
| :-------------- | :------- | :---------------------------------------------------------------------------------------- | | ||
| aria-label | `string` | Adds `aria-label` attribute to the rendered tooltip element. Announced by screen readers. | | ||
| aria-labelledby | `string` | Id(s) of elements that announce the component to screen readers. | | ||
|
||
The mentioned props are optional, but highly recommended to use to ensure the best accessibility experience for all users. | ||
|
||
The `aria-label` prop can be used to provide a label for the tooltip that is announced by screen readers, but is not visible on the screen. | ||
|
||
The `aria-labelledby` prop can reference multiple ids, separated by a space. The value of the attribute is not announced by the screen reader, but the content of the referred element(s) is. | ||
|
||
#### Examples | ||
|
||
1. The following code snippet shows how the simple setup of `aria-label`. The value of `aria-label` is prioritized over the content of children components. The content of children component (`Learn more.`) is not read by screen reader. | ||
|
||
```jsx | ||
<Tooltip | ||
content={ | ||
<div> | ||
<p>Lorem ipsum dolor sit amet.</p> | ||
</div> | ||
} | ||
aria-label="More information" | ||
> | ||
<Text>Learn more.</Text> | ||
</Tooltip> | ||
``` | ||
|
||
The screen reader will announce: `More information. Lorem ipsum dolor sit amet.`. | ||
|
||
2. In the following code snippet, the attribute `aria-labelled` is ignored as the value of this attribute is not in any component as a value of `id` attribute. The value of `aria-label` is read by a screen reader. Then the content inside the tooltip is read by the screen reader. | ||
|
||
```jsx | ||
<Tooltip | ||
content={ | ||
<div> | ||
<p>Lorem ipsum dolor sit amet</p> | ||
</div> | ||
} | ||
aria-label="More information" | ||
aria-labelledby="tooltip-labelledby" | ||
> | ||
<Icons.AlertCircle /> | ||
</Tooltip> | ||
``` | ||
|
||
The screen reader will announce: `More information. Lorem ipsum dolor sit amet.`. | ||
|
||
3. Prop `id` in `<Text>` component is filled in with the same value passed to `aria-labelledby`. The content of that component (`Learn more.`) is read by the screen reader. The value of `aria-labelled` is prioritized over the value of `aria-label`, that is not read at all. | ||
|
||
```jsx | ||
<Tooltip | ||
content={ | ||
<div> | ||
<p>Lorem ipsum dolor sit amet</p> | ||
</div> | ||
} | ||
aria-label="More information" | ||
aria-labelledby="tooltip-labelledby" | ||
> | ||
<Icons.AlertCircle /> | ||
</Tooltip> | ||
<Text id="tooltip-labelledby">Learn more.</Text> | ||
``` | ||
|
||
The screen reader will announce: `Learn more. Lorem ipsum dolor sit amet.`. | ||
|
||
4. There is not `aria-label`, nor `aria-labelledby` attribute. The content of children component is read by screen reader. | ||
|
||
```jsx | ||
<Tooltip | ||
content={ | ||
<div> | ||
<p>Lorem ipsum dolor sit amet</p> | ||
</div> | ||
} | ||
> | ||
<Text>Learn more.</Text> | ||
</Tooltip> | ||
``` | ||
|
||
The screen reader will announce: `Learn more. Lorem ipsum dolor sit amet.`. |