Modal Close Button
Component Detail
Description
A clearly labelled close IconButton injected into every ModalBottomSheet, AlertDialog, and full-screen overlay. Ensures users can dismiss modals via explicit tap in addition to any swipe gesture, satisfying WCAG 2.2 criterion 2.5.4 and workshop requirements for motor-impaired users.
modal-close-button
Summaries
The Modal Close Button ensures every modal surface in the application can be dismissed with a single explicit tap, regardless of a user's motor ability or interaction preference. This directly satisfies WCAG 2.2 criterion 2.5.4, reducing the organization's risk of accessibility non-compliance claims and supporting app store approval requirements for accessibility. Shared across all modal dialogs, bottom sheets, and full-screen overlays, this reusable control guarantees a consistent and predictable dismissal experience for all users — including those who cannot perform swipe gestures — strengthening user trust, reducing support burden, and demonstrating a clear commitment to inclusive product design.
The Modal Close Button is a low-complexity shared component with no external runtime dependencies, making it straightforward to deliver and integrate early in the project timeline. However, because it will be injected into every modal surface across the application, any behavioral or visual change post-integration triggers regression testing across all affected modal contexts.
Testing must verify minimum touch target size of 44×44 points per WCAG guidelines, semantic label accuracy for screen readers on both platforms, consistent placement across BottomSheet, AlertDialog, and full-screen routes, and correct dismissal behavior in all contexts. Its cross-cutting nature means delays in delivery block all modal UI work downstream.
This component wraps Flutter's IconButton with a minimum touch target enforced via ButtonStyle constraints or a SizedBox wrapper to satisfy the 44×44pt WCAG requirement. buildCloseButton(onPressed, label) composes the widget with a semanticsLabel passed to a Semantics widget with button role, enabling VoiceOver and TalkBack to announce the dismiss action. The announceClose(context) method triggers a SemanticsService.announce call for explicit dismissal feedback. applySemantics(semanticsLabel) allows context-specific label overrides for modals with distinct content contexts.
The component carries no runtime dependencies and is injected at the call site of each showModalBottomSheet, showDialog, or Navigator.push for full-screen routes. Consistent placement conventions are enforced by the design system to prevent per-screen divergence.
Responsibilities
- Render a visible, sufficiently large close button with accessible label
- Trigger modal or dialog dismissal on tap without requiring swipe
- Announce dismissal action to screen readers via semantics node
- Maintain consistent placement and styling across all modal surfaces
Interfaces
buildCloseButton(onPressed, label)
announceClose(context)
getMinimumTouchTarget()
applySemantics(semanticsLabel)