Drawer

General

• Ensure sufficient colour contrast for all text and controls
• Provide clear, descriptive titles for all drawers
• Make all interactive elements keyboard and screen reader accessible
• Trap focus within the drawer while it is open
• Return focus appropriately when the drawer closes
• Ensure the drawer's purpose and content are clearly announced to screen readers

React Native

Component structure

Use the Drawer component with appropriate accessibility properties based on the Gluestack implementation.

Accessibility properties:

• Drawer container: Use accessibilityViewIsModal={true} to indicate content outside the drawer is inert
• Title: Use accessibilityRole="header" for the drawer title
• Close button: Provide clear accessibilityLabel (e.g., "Close drawer", "Close filters")
• Content: Ensure all interactive elements have appropriate accessibility labels
• Action buttons: Use accessibilityRole="button" with descriptive labels and hints

Focus management:

• When the drawer opens, move focus to an appropriate element (typically the close button or first interactive element)
• Manage focus order through component hierarchy
• Ensure focus is trapped within the drawer
• Return focus to the trigger element when the drawer closes

Touch targets:

Ensure all interactive elements meet minimum 44px × 44px touch target requirements, particularly:

• Close button in header
• Action buttons in footer
• Any controls within drawer content

Screen reader announcements

• When a drawer opens, screen readers should announce the drawer title and purpose
• Example announcement: "Filters drawer. Narrow your search results by category, price, and availability."
• Changes within the drawer content should be announced appropriately
• Use accessibilityLiveRegion for dynamic content updates if needed

Keyboard navigation

For React Native web or platforms with keyboard support:

• Tab moves focus through drawer elements
• Shift + Tab moves focus backwards through drawer elements
• Escape closes the drawer
• Enter or Space activates focused buttons

Scrolling:

• Ensure drawer content is scrollable when needed
• Provide appropriate accessibility announcements for scrollable regions
• Consider scroll position when drawer reopens
• Use accessibilityRole="scrollview" or an appropriate role for scrollable content

Backdrop behaviour

• The backdrop should not be focusable
• Tapping the backdrop should close the drawer
• Consider whether backdrop dismissal is appropriate for the drawer's purpose (disable for critical forms or tasks)

Swipe gestures (touch devices):

• If implementing swipe-to-dismiss on bottom drawers, ensure it doesn't interfere with scrolling
• Provide alternative dismissal methods for users who cannot perform swipe gestures
• Consider accessibilityHint to inform users of the swipe capability

Responsive considerations:

• When orientation changes (bottom to right), ensure accessibility properties remain appropriate
• Maintain focus management regardless of orientation
• Ensure keyboard navigation works consistently across viewport sizes
• Test with screen readers on both mobile and larger viewports