skills.rest
arayaroma
arayaromaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

a11y-keyboard-nav

Implements keyboard navigation handlers for custom React widgets like dropdowns and comboboxes.

Updated Jul 27, 2026
Search Tags:#accessibility#a11y#keyboard navigation#react#focus management#combobox#aria
One-click install
npx skills add https://github.com/arayaroma/ether --skill a11y-keyboard-nav-arayaroma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: a11y-keyboard-nav
Source: https://github.com/arayaroma/ether/tree/main/skills/a11y-keyboard-nav
Command: npx skills add https://github.com/arayaroma/ether --skill a11y-keyboard-nav-arayaroma

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Custom interactive widgets built with divs and click handlers are unusable without a mouse, locking out keyboard and assistive-technology users. This Skill provides the keyboard interaction patterns (arrow keys, Enter/Space, Escape) and rules needed to make custom React widgets fully operable from the keyboard. ## Core Features & Use Cases - Custom Dropdown/Combobox Pattern: A complete React reference implementation with roving focus via ArrowUp/ArrowDown, selection via Enter/Space, and dismissal via Escape, wired to the correct combobox/listbox ARIA roles. - Keyboard Operability Rules: Enforces tabIndex={0} plus onKeyDown on any element with onClick and a non-native role, and bans positive tabIndex values that break tab order. - Use Case: You are building a filterable combobox in React that a native <select> cannot handle. Use this Skill to add arrow-key navigation, Escape-to-close, and the correct ARIA attributes so keyboard users can operate it. ## Quick Start Add keyboard navigation with arrow keys, Enter, and Escape to my custom React dropdown component.

Frequently Asked Questions about a11y-keyboard-nav

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add keyboard navigation to a custom React dropdown?▼

Add tabIndex={0} and an onKeyDown handler to the widget root. Handle ArrowUp/ArrowDown to move an active index, Enter/Space to select or toggle, and Escape to close, pairing the handlers with role="combobox" and role="listbox".

How to handle arrow keys in a React combobox component?▼

Track an activeIndex in state and update it in onKeyDown: ArrowDown increments it clamped to the last option, ArrowUp decrements it clamped to zero. Call preventDefault so the page does not scroll while navigating options.

When should I build a custom widget instead of using native HTML elements?▼

Prefer native <button>, <a>, <select>, or <details> whenever possible because they include keyboard support for free. Build a custom role only when the behavior genuinely requires it, such as a combobox with filtering or a multi-option listbox.

Why is positive tabIndex considered bad for accessibility?▼

A positive tabIndex reorders the tab sequence independently of the visual layout, which becomes unmaintainable as the page grows. Use only 0 for natural tab order or -1 for programmatic focus.

What keyboard keys must a clickable div support for accessibility?▼

Any element with onClick and a non-native role needs tabIndex={0} to be focusable and an onKeyDown handling at least Enter and Space to be activatable. A click handler alone only works for mouse and touch users.

Related Skills

Explore More Software Engineering Skills→
HDeiblerHDeibler
6

accessibility-robust

Audit UI markup for semantic HTML and correct ARIA usage.

Community
Intermediate
ChoreShoreChoreShore

aria-patterns

Apply ARIA roles, states, and properties to interactive components.

Official
Advanced
bobmatnycbobmatnyc
68

shadcn-ui

Add accessible React UI components styled with Tailwind CSS.

Community
Intermediate
cloudflarecloudflare
2.6k

workers-best-practices

Reviews Cloudflare Workers code for security vulnerabilities and anti-patterns.

Official
Advanced