Skip to content

Commit

Permalink
[docs] Update Drawer accessibility section (#3087)
Browse files Browse the repository at this point in the history
Describe new aria-* attribute support from #3027
  • Loading branch information
noahsb committed Nov 30, 2022
1 parent 7e40ca9 commit be10982
Showing 1 changed file with 2 additions and 15 deletions.
17 changes: 2 additions & 15 deletions docs/src/docs/core/Drawer.mdx
Expand Up @@ -64,21 +64,8 @@ By default:
- When drawer is opened focus is trapped inside and document.body scroll is locked in current position
- When user clicks on overlay or presses escape drawer is closed
- Drawer transitions use disabled when user prefers to reduce motion
- Drawer body has `aria-modal` and `role="dialog"` attributes

Add [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby), [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby)
and `closeButtonLabel` props for better screen readers support:

```tsx
<Drawer
aria-labelledby="drawer-title"
aria-describedby="drawer-body"
closeButtonLabel="Close drawer"
>
<h1 id="drawer-title">Title</h1>
<div id="drawer-body">Body</div>
</Drawer>
```
- Drawer wrapper has `aria-modal="true"` and `role="dialog"` attributes
- Drawer wrapper has `aria-labelledby` and `aria-describedby` pointing to drawer title and body

## Initial focus

Expand Down

0 comments on commit be10982

Please sign in to comment.