Blazor Button Example - Keyboard Navigation

This sample documents keyboard interactions for Button components, demonstrating focus navigation and activation patterns that support efficient, accessible control without a mouse. It describes behaviors for checkboxes, toggle switches, radio buttons, button groups (single and multiple selection), dropdown menus, and split buttons.

Use the examples to validate keyboard behavior and ensure ARIA attributes and focus handling are consistent with application accessibility requirements.

Focus Navigation:

• Alt + J — Focuses the first component of the demo

Checkbox:

• Space — Toggles the checkbox state when focused

Toggle Switch Button:

• Space — Toggles the switch state when focused

Radio Button:

• Arrow Keys — Activates the next or previous radio button in the group

Button Group:

Single Selection:

• Tab — Focuses the active button
• Arrow Keys — Activates the next or previous button

Multiple Selection:

• Tab — Focuses the next button
• Space — Activates the focused button

Dropdown Menu & Split Button:

• Esc — Closes the opened popup
• Enter — Opens the popup or activates the highlighted item
• Space — Opens the popup
• Up Arrow — Navigates to the previous action item
• Down Arrow — Navigates to the next action item
• Alt + Up Arrow — Closes the popup
• Alt + Down Arrow — Opens the popup

Implementation guidance: apply explicit ARIA labels to every interactive control, implement logical focus order, and manage aria-expanded on popup controls. Provide visible focus indicators and sufficient hit targets so keyboard users can operate reliably.

Test recommendations: validate behavior using keyboard-only navigation and popular screen readers (NVDA, VoiceOver, JAWS), across major browsers and mobile assistive technologies. Confirm that shortcut keys do not conflict with browser or system shortcuts and document any custom accelerators for end users.

Include unit or integration tests to exercise keyboard interactions where feasible, and incorporate accessibility checks into CI pipelines.