forked from clsm-media/react-aria-menubutton
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
94 lines (89 loc) · 3.54 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@wesgro/react-aria-menubutton-ts demo</title>
<meta name="description" content="A demo of react-aria-menubutton">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="demo/baseStyle.css">
<link rel="stylesheet" href="demo/menuStyle.css">
</head>
<body>
<h1 tabindex="0">react-aria-menubutton demo</h1>
<div id="demo-one"></div>
<h2 tabindex="0">Some interactions you should try</h2>
<ul>
<li>
Click the trigger to toggle the menu.
</li>
<li>
With focus on the trigger, press Enter or Space to toggle the menu.
</li>
<li>
With the menu closed and focus on the trigger, press ArrowDown to open the menu and move focus to the first menu item.
</li>
<li>
With the menu opened, press ArrowDown or ArrowUp to cycle focus through the menu items.
</li>
<li>
With the menu opened, press letter keys to navigate to items that start with whatever you type.
</li>
<li>
With the menu opened, click a menu item to fire the handler.
</li>
<li>
With the menu opened, use the keyboard to move focus to a menu item and press Enter or Space to fire the handler.
</li>
<li>
With the menu opened and focus on either the trigger or a menu item, move focus outside of the menu — by clicking outside of it or pressing Tab — to close the menu.
</li>
<li>
With the menu opened, press Escape to close the menu and return focus to the trigger.
</li>
</ul>
<p>
All of these keyboard interactions follow the
<a href="http://www.w3.org/TR/wai-aria-practices/#menubutton">WAI-ARIA Design Pattern for
Menu Button</a>.
</p>
<h2>Possibilities for Fanciness</h2>
<p>
The provided components — the Button, the Menu, and the MenuItem — are just "smart" components to wrap whatever "dumb" components you want to be a part of the Menu Button pattern you're building — i.e. they just <em>wrap <strong>your</strong> components</em> to provide the keyboard functionality described above and some ARIA attributes.
</p>
<p>
This means that <strong>you can use any React element within the Button, Menu, or MenuItems</strong>.
Which means that <em>nothing can stop you</em>.
</p>
<p>
To demonstrate, here's a fancier but equally ARIA-compliant and keyboard-friendly menu button:
</p>
<div id="demo-fancy"></div>
<p>
Notice a few features:
</p>
<ul>
<li>
Complex markup within the button
</li>
<li>
Complex markup within the menu items
</li>
<li>
Navigating the menu with letters keys still makes sense
</li>
<li>
Open-close animation (using <a href="https://facebook.github.io/react/docs/animation.html">React's CSSTransitionGroup</a>)
</li>
</ul>
<h2>Great, now what do I do?</h2>
<p>
<a href="https://github.com/wesgro/react-aria-menubutton-ts">Go back to the repo</a>
</p>
<p style='text-align: right;'>
<small>Icons in fancy demo from <a href="http://tympanus.net/codrops/2014/10/27/freebie-ballicons-2-vol-2/">Ballicons by PixelBuddha</a>.</small>
</p>
<script type="module" src="/demo/js/index.jsx"></script>
</body>
</html>