Skip to content

feat: add keyboard navigation support for tablet and web rendering targets #726

Merged
RUKAYAT-CODER merged 1 commit into
rinafcode:mainfrom
Sughter99:feat/keyboard-navigation
Jun 28, 2026
Merged

feat: add keyboard navigation support for tablet and web rendering targets #726
RUKAYAT-CODER merged 1 commit into
rinafcode:mainfrom
Sughter99:feat/keyboard-navigation

Conversation

@Sughter99

Copy link
Copy Markdown
Contributor

Closes #662

What this PR does

Adds keyboard navigation support for web and iPad + Smart Keyboard targets,
satisfying WCAG 2.1 Level AA keyboard accessibility guidelines.

Changes

src/hooks/useKeyboardNavigation.ts (new)

  • useKeyboardNavigation() — global keydown listener for Escape and
    Enter/Space keys, only attaches on web (safe no-op on native)
  • useInteractiveKeyProps() — returns onKeyPress, tabIndex, role props
    for custom interactive components that need keyboard activation

src/components/common/Drawer.tsx (new)

  • Accessible slide-in drawer supporting left, right, and bottom positions
  • Escape key closes the drawer via useKeyboardNavigation
  • Tab/Shift+Tab focus trap via useFocusTrap
  • Focus restored to triggering element on close via useFocusRestore
  • WCAG 2.4.7 Focus Visible: outline on web

src/components/common/PrimaryButton.tsx

  • Added Platform.select for web focus outline (WCAG 2.4.7)
  • Removed unused View import

src/tests/keyboard-navigation.test.ts (new)

  • 8 tests covering:
    • keydown listener attaches/detaches correctly
    • Escape calls onEscape
    • Disabled state prevents handler calls
    • Enter and Space activate interactive elements
    • Other keys do not trigger activation

Acceptance Criteria

  • All interactive elements reachable via Tab (useFocusTrap)
  • Enter/Space activates focused buttons (useInteractiveKeyProps)
  • Escape dismisses focused modal or drawer (useKeyboardNavigation)
  • Focus indicator visible on all focused elements (Platform.select outline)
  • 8 tests passing

WCAG 2.1 AA Coverage

  • 2.1.1 Keyboard — all functionality available via keyboard
  • 2.1.2 No Keyboard Trap — focus trap only active when modal/drawer open
  • 2.4.3 Focus Order — logical DOM order via Tab
  • 2.4.7 Focus Visible — visible outline on focused web elements

@drips-wave

drips-wave Bot commented Jun 28, 2026

Copy link
Copy Markdown

@Sughter99 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@RUKAYAT-CODER

Copy link
Copy Markdown
Contributor

Thank you for contributing to the project.

@RUKAYAT-CODER RUKAYAT-CODER merged commit 6e08662 into rinafcode:main Jun 28, 2026
1 of 14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Enhancement] Add keyboard navigation support for tablet and web rendering targets

2 participants