Bottom Sheet

User stories

The following user stories can be used to understand when this component should be used, and how to know when it’s been implemented correctly.

• As a keyboard‑only user, I want focus to be redirected to the bottom sheet when it opens, and back to the control that opened it when closed.
• As a keyboard‑only user, I want focus to be contained within the bottom sheet while it is open.
• As a keyboard‑only user, I want to be able to dismiss the bottom sheet using keyboard controls (e.g. Escape key).
• As a screen reader user, I want the bottom sheet’s role and name to be announced when it opens.
• As a screen reader user, I only want content within the bottom sheet to be readable while it is open.
• As a touch user, I want a clear and labelled close action so I can dismiss the bottom sheet without guessing gestures or hidden controls.

Test steps

Use these steps to check that the Bottom Sheet component has been implemented correctly:

1. Turn on a screen reader.
2. Navigate to the control that opens the bottom sheet and activate it.
3. Verify that focus moves into the bottom sheet.
4. Verify that the bottom sheet’s role (e.g. dialog/sheet) and visible name are announced.
5. Confirm that both focus and reading order are limited to the bottom sheet content; background content should not be reachable.
6. Test keyboard navigation (Tab / Shift+Tab) to ensure focus doesn’t leave the sheet while it’s open.
7. Attempt to dismiss the sheet using Escape and the visible close control.
8. Verify that after closing, focus returns to the element that opened the bottom sheet.

---

Avoiding accessibility barriers

Follow these guidelines to make sure the bottom sheet is accessible to all users:

• Do not rely solely on gestures - always provide a visible, labelled dismiss control.
• Avoid complex forms or long content - bottom sheets are meant for short, contextual interactions.
• Do not use full-bleed imagery - large images can obscure text and reduce clarity.
• Ensure sufficient color contrast - text and interactive elements must meet WCAG AA standards.
• Maintain adequate touch targets - buttons and controls should be at least 44x44px.
• Respect system motion preferences - animations should reduce or simplify if “Reduce motion” is enabled.
• Avoid trapping users in scrollable content - ensure scrollable sections are keyboard and screen reader accessible, and the dismiss action is always reachable.

---