Keyboard Navigation
Complete guide to keyboard accessibility in Noor UI. All components are fully operable via keyboard without requiring a mouse.
Standard Keyboard Shortcuts
Tab
All componentsMove focus forward
Shift + Tab
All componentsMove focus backward
Enter / Space
Buttons, checkboxesActivate button or control
Escape
Dialogs, dropdownsClose dialog or menu
Arrow Keys
Tabs, menus, radio groupsNavigate within component
Home / End
Lists, menusJump to first/last item
Focus Management
Proper focus management ensures users can navigate efficiently:
Focus Trapping
Dialogs and modals automatically trap focus inside them until closed, preventing keyboard users from accidentally tabbing outside the modal.
Focus Indicators
All interactive elements show clear focus indicators:
Custom Keyboard Shortcuts
Implement custom shortcuts for power users:
Best Practices
- • Document all keyboard shortcuts in your app
- • Provide a shortcut help dialog (often Shift + ?)
- • Use platform conventions (Cmd on Mac, Ctrl on Windows/Linux)
- • Avoid conflicting with browser shortcuts
- • Allow users to customize shortcuts if possible
Roving Tabindex
Complex components use roving tabindex for efficient navigation:
Component-Specific Shortcuts
Dialog
- • Escape - Close dialog
- • Focus trapped within dialog when open
- • Auto-focus first focusable element on open
Tabs
- • ← → - Navigate between tabs
- • Home End - Jump to first/last tab
- • Automatically activates on arrow key press
Select / Dropdown
- • ↑ ↓ - Navigate options
- • Enter - Select option
- • Escape - Close without selecting
- • Type to search options