Does it handle focus trapping for modals?

Yes, it includes patterns for using FocusScope to handle trapping, auto-focusing, and focus restoration when overlays are opened and closed.

How does this help with WCAG compliance?

It automates complex ARIA roles, keyboard navigation (like arrow key support), and screen reader announcements that are difficult to implement manually.

Does this skill support React 19?

Yes, these patterns are specifically designed and optimized for React 19 and modern hook-based architectures.

Can I use my own CSS or Tailwind with these patterns?

Absolutely. React Aria hooks provide the accessibility logic and ARIA attributes, leaving the styling and DOM structure entirely under your control.

React Aria Accessibility Patterns

Name: React Aria Accessibility Patterns
Author: yonatangross

byyonatangross

•

디자인 도구

Implements WCAG-compliant, high-performance interactive UI components using Adobe’s React Aria hooks and React 19 patterns.

This skill empowers developers to build fully accessible React applications by leveraging Adobe's React Aria library. It provides production-ready implementation patterns for complex UI elements like modal dialogs, comboboxes, and custom buttons, ensuring they meet strict WCAG standards. By utilizing hooks-based patterns, it offers maximum control over styling while handling the intricacies of keyboard navigation, screen reader support, and focus management automatically, making it ideal for high-quality design systems.

주요 기능

0169 GitHub stars

02Autocomplete and combobox components with filtering and selection logic

03Hook-based architecture optimized for React 19 and react-stately

04Modal dialog patterns with advanced focus trapping and restoration

05Roving tabindex and ARIA role management for menu systems

06Accessible button and toggle implementations with integrated focus rings

사용 사례

01Building a custom design system that requires full accessibility compliance

02Creating searchable dropdowns and autocomplete inputs that work for screen readers

03Implementing complex overlays and drawers with proper keyboard focus management

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit react-aria-patterns

For use in Claude.ai and ChatGPT

Download Skill