You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Feb 14, 2022. It is now read-only.
One of the biggest pain points when building modern web applications is building custom components like select menus, dropdowns, toggles, modals, tabs, radio groups — components that are pretty similar from project to project, but never quite the _same_.
@@ -58,6 +58,22 @@ function MyDropdown() {
58
58
}
59
59
```
60
60
61
+
Here's what you're getting for free in that example, without having to write a single line of code related to it yourself:
62
+
63
+
- The dropdown panel opens on click, spacebar, enter, or when using the arrow keys
64
+
- The dropdown closes when you press escape, or click outside of it
65
+
- You can navigate the items using the up and down arrow keys
66
+
- You can jump the first item using the `Home` key, and the last item using the `End` key
67
+
- Disabled items are automatically skipped when navigating with the keyboard
68
+
- Hovering over an item with your mouse after navigating with the keyboard will switch to mouse position based focusing
69
+
- Items are announced properly to screen readers while navigating them with the keyboard
70
+
- The dropdown button is properly announced to screenreaders as controlling a menu
71
+
- ...and probably tons more that I'm forgetting.
72
+
73
+
All without writing the letters `aria` anywhere in your own code, and without writing a single event listener. And you still have complete control over the design!
74
+
75
+
There are [over 3000 lines of tests for this component](https://github.com/tailwindlabs/headlessui/blob/c7b91dc7315b1f49c1a469f70eb1f6eba6a2e31c/packages/%40headlessui-react/src/components/menu/menu.test.tsx). Pretty nice that you didn't have to do that yourself, right?
76
+
61
77
Here's a fully-styled live demo _(taken from [Tailwind UI](https://tailwindui.com))_ so you can see it in action:
62
78
63
79
<iframe
@@ -69,7 +85,7 @@ Here's a fully-styled live demo _(taken from [Tailwind UI](https://tailwindui.co
0 commit comments