141Build a fully accessible component library including modal, dropdown, combobox, and keyboard interactions

Build three React components that follow the WAI-ARIA Authoring Practices, so they work with a keyboard and screen readers, not just a mouse.

<Dialog open onClose title>: rendered into document.body; role="dialog", aria-modal="true", labelled by its title. On open, focus the first focusable element inside; Tab and Shift+Tab cycle inside; Escape calls onClose; on close, focus returns to the element that opened it.

<MenuButton label items>, where items are { label, onSelect, disabled }:

• a <button aria-haspopup="menu" aria-expanded aria-controls>; the menu is role="menu" with role="menuitem" items (aria-disabled for disabled ones);
• Enter, Space, ArrowDown or a click open the menu and focus the first enabled item; ArrowUp opens it on the last;
• inside the menu: ArrowDown/ArrowUp move (wrapping, skipping disabled), Home/End, typing a letter jumps to the next item starting with it, Enter/Space activates (calls onSelect, closes, focuses the button), Escape closes and focuses the button, Tab closes;
• a pointer down outside closes it.

<Combobox label options onChange>: an <input role="combobox" aria-autocomplete="list" aria-expanded aria-controls aria-activedescendant> filtering options (strings) case-insensitively into a role="listbox" of role="option" items with aria-selected; ArrowDown/ArrowUp move the active option (opening the list if needed), Enter picks it (sets the input, calls onChange, closes), Escape closes; options can also be picked with the mouse.