feat(Sheet): allow closing the sheet with the keyboard or a screen reader #1293
Conversation
|
Size stats
|
|
Accessibility report ℹ️ You can run this locally by executing |
|
Deploy preview for mistica-web ready! ✅ Preview Built with commit 4a15139. |
| <Placeholder /> | ||
| </Box> | ||
| </ResponsiveLayout> | ||
| {({modalTitleId}) => ( |
There was a problem hiding this comment.
This fixes the issue with the wrong paddings in the sheet's story: https://jira.tid.es/browse/WEB-2101
| /> | ||
|
|
||
| {({ modalTitleId }) => ( | ||
| <SheetBody modalTitleId={modalTitleId}> |
There was a problem hiding this comment.
Fixing wrong usages in snippets too, they should be using SheetBody instead of ResponsiveLayout
| * We put a button behind the top dragging area so that the sheet can | ||
| * be closed while navigating with the keyboard or with a screen reader. | ||
| */} | ||
| <div className={styles.handleContainer}> |
There was a problem hiding this comment.
Adding a focusable button "hidden" from the pointer devices (not accessible through clicking on it). This button is only accessible through keyboard/screen readers and when pressing it, it closes the sheet
There was a problem hiding this comment.
Unrelated. Yayo asked me to update the buton's size in the callout
Issue: Link
Note
In this PR I'm also fixing a wrong usage in the Sheet's story. It was using a ResponsiveLayout instead of SheetBody, and therefore causing issues with horizontal padding in large devices (https://jira.tid.es/browse/WEB-2101)