Skip to content

Commit b4f0c58

Browse files
michael-n-coopermcking65
michael-n-cooper
and
mcking65
committedJul 19, 2020
Generated by TRAVIS-CI eddfdee
Navigation Menubar Example: Improve high contrast support and refactor javascript (pull #1359) closes issue #1357 by making the following changes: * Updated javascript to use a single object. * Updated CSS and JS to improve high contrast support. Co-authored-by: Matt King <a11yThinker@gmail.com>
1 parent 649a4be commit b4f0c58

27 files changed

+969
-1091
lines changed
 

‎examples/disclosure/disclosure-navigation.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ <h1>Example Disclosure for Navigation Menus</h1>
3838
<ul>
3939
<li><a href="disclosure-faq.html">Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a></li>
4040
<li><a href="disclosure-img-long-description.html">Example Disclosure (Show/Hide) for an Image Description</a></li>
41-
<li><a href="../menubar/menubar-1/menubar-1.html">Navigation Menubar Example</a></li>
41+
<li><a href="../menubar/menubar-navigation.html">Navigation Menubar Example</a></li>
4242
</ul>
4343
<h2>Example Usage Options</h2>
4444
<p>
@@ -47,9 +47,9 @@ <h2>Example Usage Options</h2>
4747
</p>
4848
<label for="arrow-behavior-switch">
4949
<input type="checkbox" id="arrow-behavior-switch" checked>
50-
Include optional support for arrow keys, <kbd>Home</kbd>, and <kbd>End</kbd>
50+
Include optional support for arrow keys, <kbd>Home</kbd>, and <kbd>End</kbd>
5151
</label>
52-
52+
5353
<section>
5454
<h2 id="ex_label">Example</h2>
5555
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of" ></div>

‎examples/menubar/css/menubar-navigation.css

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
.menubar-navigation {
2+
margin: 0;
3+
margin-top: 0.5em;
4+
margin-bottom: 0.5em;
5+
padding: 7px;
6+
font-size: 110%;
7+
list-style: none;
8+
background-color: #eee;
9+
border: #eee solid 1px;
10+
border-radius: 5px;
11+
}
12+
13+
.menubar-navigation li {
14+
margin: 0;
15+
padding: 0;
16+
border: 0 solid black;
17+
list-style: none;
18+
}
19+
20+
.menubar-navigation > li {
21+
display: inline-block;
22+
position: relative;
23+
}
24+
25+
.menubar-navigation > li li {
26+
display: block;
27+
}
28+
29+
.menubar-navigation [role="menu"] [role="menuitem"],
30+
.menubar-navigation [role="menu"] [role="separator"] {
31+
display: block;
32+
width: 12em;
33+
margin: 0;
34+
}
35+
36+
.menubar-navigation [role="menuitem"],
37+
.menubar-navigation [role="separator"] {
38+
padding: 6px;
39+
background-color: #eee;
40+
border: 0px solid #eee;
41+
color: black;
42+
border-radius: 5px;
43+
}
44+
45+
.menubar-navigation [role="menuitem"] svg {
46+
fill: currentColor;
47+
stroke: currentColor;
48+
}
49+
50+
.menubar-navigation [role="menuitem"] svg.down {
51+
padding-left: 0.125em;
52+
}
53+
54+
.menubar-navigation [role="menuitem"] svg.right {
55+
position: absolute;
56+
padding-top: 0.35em;
57+
right: 0.75em;
58+
}
59+
60+
.menubar-navigation [role="menuitem"][aria-expanded="true"] svg.down {
61+
transform: rotate(180deg);
62+
}
63+
64+
.menubar-navigation [role="menuitem"][aria-expanded="true"] svg.right {
65+
transform: rotate(90deg) translate(5px, -5px);
66+
}
67+
68+
.menubar-navigation > li > [role="menuitem"] {
69+
display: inline-block;
70+
}
71+
72+
.menubar-navigation [role="menu"] {
73+
display: none;
74+
position: absolute;
75+
margin: 0;
76+
padding: 0;
77+
}
78+
79+
.menubar-navigation [role="group"] {
80+
margin: 0;
81+
padding: 0;
82+
}
83+
84+
.menubar-navigation [role="menu"] {
85+
display: none;
86+
}
87+
88+
.menubar-navigation [role="separator"] {
89+
padding-top: 3px;
90+
background-image: url('../images/separator.svg');
91+
background-position: center;
92+
background-repeat: repeat-x;
93+
}
94+
95+
/* focus styling */
96+
97+
.menubar-navigation.focus {
98+
padding: 6px;
99+
border: #034575 solid 2px;
100+
}
101+
102+
.menubar-navigation [role="menu"] {
103+
padding: 7px 4px;
104+
border: 2px solid #034575;
105+
border-radius: 5px;
106+
background-color: #eee;
107+
}
108+
109+
.menubar-navigation [role="menuitem"][aria-expanded="true"],
110+
.menubar-navigation [role="menuitem"]:focus,
111+
.menubar-navigation [role="menuitem"]:hover {
112+
background: #034575;
113+
color: #fff;
114+
outline: none;
115+
}
116+
117+
.menubar-navigation [role="menuitem"]:focus,
118+
.menubar-navigation [role="menuitem"]:hover {
119+
padding: 2px;
120+
border: 4px solid #034575;
121+
}

‎examples/menubar/images/down-arrow-focus.svg

+3-3
Loading

‎examples/menubar/images/down-arrow.svg

+3-3
Loading

‎examples/menubar/images/separator.svg

+4-4
Loading

‎examples/menubar/images/up-arrow.svg

+4
Loading

‎examples/menubar/js/menubar-navigation.js

+619
Large diffs are not rendered by default.

‎examples/menubar/mb-about.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Menubar Example Landing Page: About</title>
5+
<link href="../../css/core.css" rel="stylesheet">
6+
7+
</head>
8+
9+
<body>
10+
<header>
11+
<h1>Menubar Example Landing Page</h1>
12+
</header>
13+
<main>
14+
<h1 id="about">About</h1>
15+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
16+
17+
<h2 id="overview">Overview</h2>
18+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
19+
20+
<h2 id="admin">Administration</h2>
21+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
22+
23+
<h2 id="facts">Facts</h2>
24+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
25+
26+
<h2 id="tours">Campus Tours</h2>
27+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
28+
29+
</main>
30+
</body>
31+
32+
</html>

‎examples/menubar/mb-academics.html

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Menubar Example Landing Page: Academics</title>
5+
<link href="../../css/core.css" rel="stylesheet">
6+
7+
</head>
8+
9+
<body>
10+
<header>
11+
<h1>Menubar Example Landing Page</h1>
12+
</header>
13+
14+
<main>
15+
<h1 id="academics">Academics</h1>
16+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
17+
18+
<h2 id="colleges">Colleges &amp; Schools</h2>
19+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
20+
21+
22+
<h2 id="programs">Programs of Study</h2>
23+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
24+
25+
26+
<h2 id="honors">Honors Programs</h2>
27+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
28+
29+
30+
<h2 id="online">Online Courses</h2>
31+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
32+
33+
34+
<h2 id="explorer">Course Explorer</h2>
35+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
36+
37+
38+
<h2 id="register">Register for Class</h2>
39+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
40+
41+
42+
<h2 id="academic">Academic Calendar</h2>
43+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
44+
45+
46+
<h2 id="transcripts">Transcripts</h2>
47+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
48+
49+
</main>
50+
</body>
51+
52+
</html>

‎examples/menubar/mb-admissions.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Menubar Example Landing Page: Admissions</title>
5+
<link href="../../css/core.css" rel="stylesheet">
6+
7+
</head>
8+
9+
<body>
10+
<header>
11+
<h1>Menubar Example Landing Page</h1>
12+
</header>
13+
<main>
14+
<h1 id="admissions">Admissions</h1>
15+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
16+
17+
<h2 id="apply">Apply</h2>
18+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
19+
20+
<h2 id="tuition">Tuition</h2>
21+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
22+
23+
<h2 id="signup">Sign Up</h2>
24+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
25+
26+
<h2 id="visit">Visit</h2>
27+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
28+
29+
<h2 id="photo">Photo Tour</h2>
30+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
31+
32+
<h2 id="connect">Connect</h2>
33+
<p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
34+
35+
36+
</main>
37+
</body>
38+
39+
</html>

‎examples/menubar/menubar-1/css/menubarLinks.css

-69
This file was deleted.

‎examples/menubar/menubar-1/images/down-arrow-brown.png

-1.33 KB
Binary file not shown.

‎examples/menubar/menubar-1/images/down-arrow-gray.png

-1.29 KB
Binary file not shown.

‎examples/menubar/menubar-1/images/right-arrow-brown.png

-1.37 KB
Binary file not shown.

‎examples/menubar/menubar-1/images/right-arrow-gray.png

-1.33 KB
Binary file not shown.

‎examples/menubar/menubar-1/images/separator.paint

-3.96 KB
Binary file not shown.

‎examples/menubar/menubar-1/images/separator.png

-1.11 KB
Binary file not shown.

‎examples/menubar/menubar-1/js/MenubarItemLinks.js

-162
This file was deleted.

‎examples/menubar/menubar-1/js/MenubarLinks.js

-183
This file was deleted.

‎examples/menubar/menubar-1/js/PopupMenuItemLinks.js

-212
This file was deleted.

‎examples/menubar/menubar-1/js/PopupMenuLinks.js

-264
This file was deleted.

‎examples/menubar/menubar-1/mb-about.html

-32
This file was deleted.

‎examples/menubar/menubar-1/mb-academics.html

-52
This file was deleted.

‎examples/menubar/menubar-1/mb-admissions.html

-39
This file was deleted.

‎examples/menubar/menubar-editor.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ <h1>Editor Menubar Example</h1>
4646
</p>
4747
<p>Similar examples include: </p>
4848
<ul>
49-
<li><a href="../menubar-1/menubar-1.html">Navigation Menubar Example</a>: A menubar that presents site navigation menus.</li>
49+
<li><a href="menubar-navigation.html">Navigation Menubar Example</a>: A menubar that presents site navigation menus.</li>
5050
</ul>
5151

5252
<section id="code-ex-1">

‎examples/menubar/menubar-1/menubar-1.html ‎examples/menubar/menubar-navigation.html

+81-57
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,59 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
5-
<title>Navigation Menubar Example | WAI-ARIA Authoring Practices 1.2</title>
4+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
5+
<title>Navigation Menubar Example | WAI-ARIA Authoring Practices 1.2</title>
66

7-
<!-- Core js and css shared by all examples; do not modify when using this template. -->
8-
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
9-
<link rel="stylesheet" href="../../css/core.css">
10-
<script src="../../js/examples.js"></script>
11-
<script src="../../js/highlight.pack.js"></script>
12-
<script src="../../js/app.js"></script>
7+
<!-- Core js and css shared by all examples; do not modify when using this template. -->
8+
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
9+
<link rel="stylesheet" href="../css/core.css">
10+
<script src="../js/examples.js"></script>
11+
<script src="../js/highlight.pack.js"></script>
12+
<script src="../js/app.js"></script>
1313

14-
<!-- CSS and JS specific to this example -->
15-
<script src="js/MenubarLinks.js" type="text/javascript"></script>
16-
<script src="js/MenubarItemLinks.js" type="text/javascript"></script>
17-
<script src="js/PopupMenuLinks.js" type="text/javascript"></script>
18-
<script src="js/PopupMenuItemLinks.js" type="text/javascript"></script>
19-
<link href="css/menubarLinks.css" rel="stylesheet">
20-
</head>
14+
<!-- CSS and JS specific to this example -->
15+
<link href="css/menubar-navigation.css" rel="stylesheet">
16+
<script src="js/menubar-navigation.js" type="text/javascript"></script>
2117

18+
<!-- Pre-load images used in the example -->
19+
<link rel="preload" as="image" href="images/separator.svg">
20+
</head>
2221
<body>
2322
<nav aria-label="Related Links" class="feedback">
2423
<ul>
25-
<li><a href="../../../#browser_and_AT_support">Browser and Assistive Technology Support</a></li>
24+
<li><a href="../../#browser_and_AT_support">Browser and Assistive Technology Support</a></li>
2625
<li><a href="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li>
2726
<li><a href="https://github.com/w3c/aria-practices/projects/5">Related Issues</a></li>
28-
<li><a href="../../../#menu">Design Pattern</a></li>
27+
<li><a href="../../#menu">Design Pattern</a></li>
2928
</ul>
3029
</nav>
3130
<main>
3231
<h1>Navigation Menubar Example</h1>
3332
<p>
3433
The following implementation of the
35-
<a href="../../../#menu">design pattern for menubar</a>
34+
<a href="../../#menu">design pattern for menubar</a>
3635
demonstrates a menubar that provides site navigation menus.
3736
Each item in the menubar represents a section of a web site for a mythical university and opens a submenu containing menu items that link to pages within that section.
3837
</p>
3938
<p>Similar examples include: </p>
4039
<ul>
41-
<li><a href="../menubar-2/menubar-2.html">Editor Menubar Example</a>: Example of a menubar that presents text styling actions similar to an editor application.</li>
42-
<li><a href="../../disclosure/disclosure-navigation.html">Example Disclosure for Navigation Menus</a>: Navigation menus implemented as simple drop down lists of links that are shown and hidden using disclosure buttons.</li>
40+
<li><a href="menubar-editor.html">Editor Menubar Example</a>: Example of a menubar that presents text styling actions similar to an editor application.</li>
41+
<li><a href="../disclosure/disclosure-navigation.html">Example Disclosure for Navigation Menus</a>: Navigation menus implemented as simple drop down lists of links that are shown and hidden using disclosure buttons.</li>
4342
</ul>
44-
43+
4544
<section id="code-ex-1">
4645
<h2 id="ex_label">Example</h2>
4746
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
4847
<div id="ex1">
4948
<nav aria-label="Mythical University">
50-
<ul id="menubar1" role="menubar" aria-label="Mythical University">
49+
<ul class="menubar-navigation" role="menubar" aria-label="Mythical University">
5150
<li role="none">
52-
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">About</a>
51+
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">
52+
About
53+
<svg xmlns="http://www.w3.org/2000/svg" class="down" width="12" height="9" viewBox="0 0 12 9">
54+
<polygon points="1 0, 11 0, 6 8"/>
55+
</svg>
56+
</a>
5357
<ul role="menu" aria-label="About">
5458
<li role="none">
5559
<a role="menuitem" href="mb-about.html#overview">Overview</a>
@@ -58,7 +62,15 @@ <h2 id="ex_label">Example</h2>
5862
<a role="menuitem" href="mb-about.html#admin">Administration</a>
5963
</li>
6064
<li role="none">
61-
<a id="menubar113" role="menuitem" href="#" aria-haspopup="true" aria-expanded="false">Facts</a>
65+
<a role="menuitem"
66+
href="#"
67+
aria-haspopup="true"
68+
aria-expanded="false">
69+
Facts
70+
<svg xmlns="http://www.w3.org/2000/svg" class="right" width="9" height="12" viewBox="0 0 9 12">
71+
<polygon points="0 1, 0 11, 8 6"/>
72+
</svg>
73+
</a>
6274
<ul role="menu" aria-label="Facts">
6375
<li role="none">
6476
<a role="menuitem" href="mb-about.html#facts">History</a>
@@ -72,8 +84,15 @@ <h2 id="ex_label">Example</h2>
7284
</ul>
7385
</li>
7486
<li role="none">
75-
<a role="menuitem" href="#" aria-haspopup="true" aria-expanded="false">Campus
76-
Tours</a>
87+
<a role="menuitem"
88+
href="#"
89+
aria-haspopup="true"
90+
aria-expanded="false">
91+
Campus Tours
92+
<svg xmlns="http://www.w3.org/2000/svg" class="right" width="9" height="12" viewBox="0 0 9 12">
93+
<polygon points="0 1, 0 11, 8 6"/>
94+
</svg>
95+
</a>
7796
<ul role="menu" aria-label="Campus Tours">
7897
<li role="none">
7998
<a role="menuitem" href="mb-about.html#tours">For prospective students</a>
@@ -89,14 +108,27 @@ <h2 id="ex_label">Example</h2>
89108
</ul>
90109
</li>
91110
<li role="none">
92-
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">Admissions</a>
111+
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">
112+
Admissions
113+
<svg xmlns="http://www.w3.org/2000/svg" class="down" width="12" height="9" viewBox="0 0 12 9">
114+
<polygon points="1 0, 11 0, 6 8"/>
115+
</svg>
116+
</a>
93117
<ul role="menu" aria-label="Admissions">
94118
<li role="none">
95119
<a role="menuitem" href="mb-admissions.html#apply">Apply</a>
96120
</li>
97121
<li role="none">
98-
<a role="menuitem" href="#" aria-haspopup="true" aria-expanded="false">Tuition</a>
99-
<ul role="menu" aria-label="Tuition Information">
122+
<a role="menuitem"
123+
href="#"
124+
aria-haspopup="true"
125+
aria-expanded="false">
126+
Tuition
127+
<svg xmlns="http://www.w3.org/2000/svg" class="right" width="9" height="12" viewBox="0 0 9 12">
128+
<polygon points="0 1, 0 11, 8 6"/>
129+
</svg>
130+
</a>
131+
<ul role="menu" aria-label="Tuition">
100132
<li role="none">
101133
<a role="menuitem" href="mb-admissions.html#tuition">Undergraduate</a>
102134
</li>
@@ -124,7 +156,12 @@ <h2 id="ex_label">Example</h2>
124156
</ul>
125157
</li>
126158
<li role="none">
127-
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">Academics</a>
159+
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">
160+
Academics
161+
<svg xmlns="http://www.w3.org/2000/svg" class="down" width="12" height="9" viewBox="0 0 12 9">
162+
<polygon points="1 0, 11 0, 6 8"/>
163+
</svg>
164+
</a>
128165
<ul role="menu" aria-label="Academics">
129166
<li role="none">
130167
<a role="menuitem" href="mb-academics.html#colleges">Colleges &amp; Schools</a>
@@ -155,21 +192,21 @@ <h2 id="ex_label">Example</h2>
155192
</li>
156193
</ul>
157194
</nav>
158-
159-
<script type="text/javascript">
160-
var menubar = new Menubar(document.getElementById('menubar1'));
161-
menubar.init();
162-
</script>
163-
164195
</div>
165196
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
166197
</section>
167198

168199
<section>
169200
<h2>Accessibility Features</h2>
170201
<ol>
202+
<li>To help communicate that the arrow keys are available for directional navigation within the menubar and its submenus, a border is added to the menubar container when focus is within the menubar.</li>
203+
<li>To support operating system high contrast settings:
204+
<ul>
205+
<li>Focus is highlighted by adding and removing a border around the menu item with focus.</li>
206+
<li>The arrow icons indicating the current state of expandable menus use in-line SVG images with the CSS <code>currentColor</code> value for the <code>fill</code> and <code>stroke</code> properties of the <code>polygon</code> element.</li>
207+
</ul>
208+
</li>
171209
<li>Since the menubar presents a site navigation system, it is wrapped in a navigation region implemented with a <code>nav</code> element that has an <code>aria-label</code> that matches the label on the menubar.</li>
172-
<li>The down arrow and right arrow icons are made compatible with high contrast mode and hidden from screen readers by using the CSS <code>content</code> property to render images.</li>
173210
</ol>
174211
</section>
175212

@@ -249,7 +286,8 @@ <h3 id="kbd1_label">Menubar</h3>
249286
</tr>
250287
</tbody>
251288
</table>
252-
<h3 id="kbd2_label">Submenu</h3>
289+
290+
<h3 id="kbd2_label">Submenu</h3>
253291
<table aria-labelledby="kbd2_label kbd_label" class="def">
254292
<thead>
255293
<tr>
@@ -264,8 +302,8 @@ <h3 id="kbd2_label">Submenu</h3>
264302
</th>
265303
<td>
266304
<ul>
267-
<li>Activates menu item, causing the link to be activated.</li>
268-
<li>NOTE: the links go to dummy pages; use the browser go-back function to return to this menubar example page.</li>
305+
<li>If the item is a parent menu item, opens submenu and moves focus to first item in the submenu.</li>
306+
<li>Otherwise, activates menu item, which navigates to a dummy page. NOTE: use browser go-back function to return to this page.</li>
269307
</ul>
270308
</td>
271309
</tr>
@@ -617,22 +655,8 @@ <h3 id="rps2_label">Submenu</h3>
617655
<section>
618656
<h2>Javascript and CSS Source Code</h2>
619657
<ul>
620-
<li>
621-
CSS:
622-
<a href="css/menubarLinks.css" type="tex/css">menubarLinks.css</a>
623-
</li>
624-
<li>
625-
Javascript: <a href="js/MenubarItemLinks.js" type="text/javascript">MenubarItemLinks.js</a>
626-
</li>
627-
<li>
628-
Javascript: <a href="js/MenubarLinks.js" type="text/javascript">MenubarLinks.js</a>
629-
</li>
630-
<li>
631-
Javascript: <a href="js/PopupMenuItemLinks.js" type="text/javascript">PopupMenuItemLinks.js</a>
632-
</li>
633-
<li>
634-
Javascript: <a href="js/PopupMenuLinks.js" type="text/javascript">PopupMenuLinks.js</a>
635-
</li>
658+
<li>CSS: <a href="css/menubar-navigation.css" type="tex/css">menubar-navigation.css</a></li>
659+
<li>Javascript: <a href="js/menubar-navigation.js" type="text/javascript">menubar-navigation.js</a></li>
636660
</ul>
637661
</section>
638662

@@ -652,7 +676,7 @@ <h2 id="sc_label">HTML Source Code</h2>
652676
</section>
653677
</main>
654678
<nav>
655-
<a href="../../../#menu">Menu or Menubar Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
679+
<a href="../../#menu">Menu or Menubar Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
656680
</nav>
657681
</body>
658682
</html>

‎index.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -150,16 +150,16 @@
150150
"aliasOf": "WAI-ARIA-1.1"
151151
}
152152
},
153-
"publishDate": "2020-07-17",
154-
"publishISODate": "2020-07-17T00:00:00.000Z",
155-
"generatedSubtitle": "Editor's Draft 17 July 2020"
153+
"publishDate": "2020-07-19",
154+
"publishISODate": "2020-07-19T00:00:00.000Z",
155+
"generatedSubtitle": "Editor's Draft 19 July 2020"
156156
}</script><link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED"></head>
157157
<body class="h-entry informative"><div class="head">
158158
<a class="logo" href="https://www.w3.org/"><img alt="W3C" width="72" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C"></a> <h1 id="title" class="title">WAI-ARIA Authoring Practices 1.2</h1>
159159

160160
<h2>
161161
W3C Editor's Draft
162-
<time class="dt-published" datetime="2020-07-17">17 July 2020</time>
162+
<time class="dt-published" datetime="2020-07-19">19 July 2020</time>
163163
</h2>
164164
<dl>
165165
<dt>This version:</dt><dd>
@@ -2181,8 +2181,8 @@ <h3 id="x3-15-menu-or-menu-bar"><bdi class="secno">3.15 </bdi>Menu or Menu bar<a
21812181
<section class="notoc">
21822182
<h4 id="examples-7">Examples<a class="self-link" aria-label="§" href="#examples-7"></a></h4>
21832183
<ul>
2184-
<li><a href="examples/menubar/menubar-1/menubar-1.html">Navigation Menubar Example</a>: Demonstrates a menubar that provides site navigation.</li>
2185-
<li><a href="examples/menubar/menubar-2/menubar-2.html">Editor Menubar Example</a>: Demonstrates menu radios and menu checkboxes in submenus of a menubar that provides text formatting commands for a text field.</li>
2184+
<li><a href="examples/menubar/menubar-navigation.html">Navigation Menubar Example</a>: Demonstrates a menubar that provides site navigation.</li>
2185+
<li><a href="examples/menubar/menubar-editor.html">Editor Menubar Example</a>: Demonstrates menu radios and menu checkboxes in submenus of a menubar that provides text formatting commands for a text field.</li>
21862186
</ul>
21872187
</section>
21882188

@@ -7292,7 +7292,7 @@ <h3 id="c-4-enabling-funders"><bdi class="secno">C.4 </bdi>Enabling funders<a cl
72927292

72937293

72947294
</section>
7295-
<script type="text/javascript">(function(){window['__CF$cv$params']={r:'5b400300c982efc0',m:'b16f96484c2bad11eb2e3bb0c3c5842e4636e211-1594947476-1800-AdH5vUYhTybnYiVBzTRvpARoXSPzaqGR4QPrS5xkwYGc73Wi3q60RtlytnatHa7rfOYMqo1vUbuHMK2FTD++SHv5k463J+Vs2t1uMsJaIAoytRLrF/XBtQoU+nlMJ50De0TISSg2DlCIl96I+iOFkTlfWTCvXMcJdT1tFoC+JJxU0l2OjcT2vkean2jtXTA+NmfXxN6/+DnW1ltV/JQNKz0=',s:[0xf57fab088f,0x3fa181f311],}})();</script>
7295+
<script type="text/javascript">(function(){window['__CF$cv$params']={r:'5b50725a5ffee84d',m:'bfb151c2359ffc9cb32f062d73b821656785965e-1595119810-1800-AVAvecEM4WKAyEHPX7VOymyj38V3OV9ybs5EFuGLsLbBraA2hlUeecS3fwvtwqlqYbYa7+EVV5gFMSe8mORHBraBzaSwfDHZL/wB1rC5mA4EIlJiw/jQoKSszRBqEZqL/7dJ51wQMWllZqiRMn/xC6KlK7S1hkjnqc87S1dxnRf5LxnVG7YxCrgwFzXnKNZoCLny3iN4z2F65mOnIXfWB0o=',s:[0xecd6dae547,0xd1eba98f50],}})();</script>
72967296

72977297
<section id="references" class="appendix"><h2 id="d-references"><bdi class="secno">D. </bdi>References<a class="self-link" aria-label="§" href="#references"></a></h2><section id="informative-references">
72987298
<h3 id="d-1-informative-references"><bdi class="secno">D.1 </bdi>

0 commit comments

Comments
 (0)
Please sign in to comment.