Skip to content
This repository was archived by the owner on Feb 14, 2022. It is now read-only.

Commit f0d46cf

Browse files
committed
Update Headless UI post
1 parent 96f1608 commit f0d46cf

File tree

1 file changed

+18
-2
lines changed
  • src/pages/headless-ui-unstyled-accessible-ui-components

1 file changed

+18
-2
lines changed

src/pages/headless-ui-unstyled-accessible-ui-components/index.mdx

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const meta = {
88
date: '2020-10-06T18:30:00.000Z',
99
authors: [adamwathan],
1010
image,
11-
// discussion: 'https://github.com/tailwindlabs/tailwindcss/discussions/2441',
11+
discussion: 'https://github.com/tailwindlabs/tailwindcss/discussions/2508',
1212
}
1313

1414
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() {
5858
}
5959
```
6060

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+
6177
Here's a fully-styled live demo _(taken from [Tailwind UI](https://tailwindui.com))_ so you can see it in action:
6278

6379
<iframe
@@ -69,7 +85,7 @@ Here's a fully-styled live demo _(taken from [Tailwind UI](https://tailwindui.co
6985
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
7086
></iframe>
7187

72-
Make sure to try it with the keyboard or a screen reader to really appreciate what it's handling for you!
88+
Make sure to try it with the keyboard or a screen reader to really appreciate it!
7389

7490
We just tagged v0.2.0, which currently includes the following components:
7591

0 commit comments

Comments
 (0)