Accessible Modal Sheet with Guaranteed Close Control
The app uses bottom sheet modals extensively for activity registration, proxy registration, and confirmation dialogs. For users with motor disabilities who use switch access or have difficulty with precision tapping, a dismiss gesture or tap-outside-to-close pattern is inaccessible. Every modal must include a dedicated close or cancel button in a fixed, predictable location (top-right or top-left of the sheet). When a modal opens, the screen reader focus must move to the modal title or close button, and background content must be marked as hidden from the accessibility tree to prevent confusion.
User Story
Acceptance Criteria
- Given a bottom sheet modal opens, when the sheet finishes animating, then a close or cancel button is visible in the top area of the sheet with a minimum touch target of 44×44pt
- Given I am using VoiceOver and a modal opens, when the sheet renders, then screen reader focus automatically moves to the modal's title or first focusable element
- Given a modal is open and I activate the close button via switch access or VoiceOver double-tap, when the button is activated, then the modal is dismissed and focus returns to the element that triggered the modal
- Given a modal is open, when VoiceOver is active, then the background content is announced as 'dimmed' or excluded from the accessibility tree so focus cannot escape the modal
- Given I tap outside the modal boundary accidentally, when the tap is registered, then a confirmation prompt appears before dismissal if the modal contains unsaved form data
Business Value
Modal dismissal is a critical interaction pattern used throughout the activity registration flow, which is the single highest-priority feature across all three organizations. If peer mentors with motor disabilities cannot reliably dismiss modals, they become trapped in screens and cannot complete registrations. This directly causes the underreporting problem that the app is designed to solve. Accessible modal management is required for WCAG 2.2 AA compliance and is essential for the Blindeforbundet user base.