Bottom sheet

A mobile overlay component that presents contextual content or short flows. It is used to focus the user's attention and should be used sparingly and with caution as they are disruptive interface elements.

WCAG Score - TBD

Provided by the component

The component is announced as a modal to assistive technologies. This prevents confusion and accidental navigation outside the sheet and ensures that:

Screen readers identify it as a temporary interaction layer

Background content is hidden from accessibility navigation

Users understand they are in a focused interaction context

Focus containment

When the Bottom Sheet opens:

Focus is moved into the sheet context

Screen readers navigate only within the sheet

Background elements are not reachable

When the sheet closes:

Focus returns to the triggering element (native behavior)

This ensures logical navigation flow and prevents users from “getting lost.”

Multiple dismissal methods

The component always provides:

Close button (visible and accessible)

Backdrop tap

Swipe down gesture

Android hardware back (on Android devices)

This ensures dismissal is never dependent on gesture-only interaction, supporting: Motor accessibility, Cognitive clarity and Predictable behavior.

Structured layout

The component enforces:

Clear separation between header, content, and footer

A fixed close action

Scroll containment inside content

This improves: Screen reader navigation order, Logical grouping of information and Predictability of actions.

Scroll handling

When content exceeds maximum height:

Scroll is contained within the content area

Header and footer remain fixed

Implementation considerations

Developers must do the following in the implementation to be considered fully accessible:

Avoid overloading content

Overly dense or complex layouts increase cognitive load. Avoid:

Large blocks of unstructured text

Too many competing actions

Deep nested components

Keep the sheet focused on a single clear objective.

Ensure logical content order

Content should follow a logical reading order:

Context

Controls

Supporting information

Actions

Avoid gesture-only logic

Never release an experience where the expected way to close the sheet is “just swipe”. Even though swipe is supported, some users cannot perform gesture-based interactions

Test with assistive technologies

Before shipping:

Validate behavior with VoiceOver (iOS)

Validate behavior with TalkBack (Android)

Ensure dismissal works consistently

Ensure focus does not escape the sheet