Skip to content

Commit 97d4bd6

Browse files
IsaDCjscholes
IsaDC
and
jscholes
authored
Create tests for APG design pattern example: Navigation Menu Button (#524)
* Add references.csv * Add timestamped example directory and update references.csv * Add commands.csv * Add tests.csv * Merge master, update APG example * Update references.csv * Remove previous APG example * Update commands.csv and tests.csv * Add setupScripts placeholders * Example: remove unneeded CSS/JS references and update page title * Example: remove 'Related Links' nav and similar example links, as well as 'Accessibility Features', 'Keyboard Support', 'Role, Property, State, and Tabindex Attributes' and source code sections and footer nav * add setupScripts for navigate forwards and backwards links * setupScript: set focus on menu button * setupScript: add set focus on first and last menuitem. * Generate .html source files with scripts automatically * Upad example JS to make setup scripts work Co-authored-by: IsaDC <IsaDC@users.noreply.github.com> Co-authored-by: James Scholes <james@jamesscholes.com>
1 parent 1c6ef2f commit 97d4bd6

16 files changed

+1085
-0
lines changed

‎tests/menu-button-navigation/data/commands.csv‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
testId,task,mode,at,commandA,commandB,commandC,commandD
2+
1,Navigate forwards to a menu button,READING,JAWS,B,F,TAB,DOWN
3+
1,Navigate forwards to a menu button,READING,NVDA,B,F,TAB,DOWN
4+
2,Navigate forwards to a menu button,INTERACTION,JAWS,TAB,,,
5+
2,Navigate forwards to a menu button,INTERACTION,NVDA,TAB,,,
6+
3,Navigate forwards to a menu button,INTERACTION,VOICEOVER_MACOS,TAB,CTRL_OPT_RIGHT,CTRL_OPT_CMD_J,
7+
4,Navigate backwards to a menu button,READING,JAWS,SHIFT_B,SHIFT_F,SHIFT_TAB,UP
8+
4,Navigate backwards to a menu button,READING,NVDA,SHIFT_B,SHIFT_F,SHIFT_TAB,UP
9+
5,Navigate backwards to a menu button,INTERACTION,JAWS,SHIFT_TAB,,,
10+
5,Navigate backwards to a menu button,INTERACTION,NVDA,SHIFT_TAB,,,
11+
6,Navigate backwards to a menu button,INTERACTION,VOICEOVER_MACOS,SHIFT_TAB,CTRL_OPT_LEFT,SHIFT_CTRL_OPT_CMD_J,
12+
7,Read information about a menu button,READING,JAWS,INS_TAB,INS_UP,,
13+
7,Read information about a menu button,READING,NVDA,INS_TAB,INS_UP,,
14+
8,Read information about a menu button,INTERACTION,JAWS,INS_TAB,INS_UP,,
15+
8,Read information about a menu button,INTERACTION,NVDA,INS_TAB,INS_UP,,
16+
9,Read information about a menu button,INTERACTION,VOICEOVER_MACOS,CTRL_OPT_F3,CTRL_OPT_F4,,
17+
10,Open a menu,READING,JAWS,SPACE,ENTER,,
18+
10,Open a menu,READING,NVDA,SPACE,ENTER,,
19+
11,Open a menu,INTERACTION,JAWS,SPACE,ENTER,DOWN,
20+
11,Open a menu,INTERACTION,NVDA,SPACE,ENTER,DOWN,
21+
12,Open a menu,INTERACTION,VOICEOVER_MACOS,CTRL_OPT_SPACE,SPACE,ENTER,DOWN
22+
13,Open a menu to the last item,INTERACTION,JAWS,UP,,,
23+
13,Open a menu to the last item,INTERACTION,NVDA,UP,,,
24+
14,Open a menu to the last item,INTERACTION,VOICEOVER_MACOS,UP,,,
25+
15,Read information about a menu item,INTERACTION,JAWS,INS_TAB,INS_UP,,
26+
15,Read information about a menu item,INTERACTION,NVDA,INS_TAB,INS_UP,,
27+
16,Read information about a menu item,INTERACTION,VOICEOVER_MACOS,CTRL_OPT_F3,CTRL_OPT_F4,,
28+
17,Navigate to the first item in a menu,INTERACTION,JAWS,HOME,DOWN,,
29+
17,Navigate to the first item in a menu,INTERACTION,NVDA,HOME,DOWN,,
30+
18,Navigate to the first item in a menu,INTERACTION,VOICEOVER_MACOS,HOME,DOWN,,
31+
19,Navigate to the last item in a menu,INTERACTION,JAWS,END,UP,,
32+
19,Navigate to the last item in a menu,INTERACTION,NVDA,END,UP,,
33+
20,Navigate to the last item in a menu,INTERACTION,VOICEOVER_MACOS,END,UP,,
34+
21,Navigate to an item in a menu by typing a character,INTERACTION,JAWS,A,,,
35+
21,Navigate to an item in a menu by typing a character,INTERACTION,NVDA,A,,,
36+
22,Navigate to an item in a menu by typing a character,INTERACTION,VOICEOVER_MACOS,A,,,
37+
23,Close a menu,INTERACTION,JAWS,ESC,,,
38+
23,Close a menu,INTERACTION,NVDA,ESC,,,
39+
24,Close a menu,INTERACTION,VOICEOVER_MACOS,ESC,,,

‎tests/menu-button-navigation/data/js/openMenuAndSetFocusToFirstItem.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// opens the menu, and sets focus on 'W3C Home Page'
2+
testPageDocument.defaultView.menuController.openPopup();
3+
testPageDocument.defaultView.menuController.setFocusToFirstMenuitem();

‎tests/menu-button-navigation/data/js/openMenuAndSetFocusToLastItem.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// opens the menu, and sets focus on 'Accessible Name and Description'
2+
testPageDocument.defaultView.menuController.openPopup();
3+
testPageDocument.defaultView.menuController.setFocusToLastMenuitem();

‎tests/menu-button-navigation/data/js/setFocusAfterMenuButton.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// sets focus on a link after the menu button
2+
testPageDocument.querySelector('#afterlink').focus();

‎tests/menu-button-navigation/data/js/setFocusBeforeMenuButton.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// sets focus on a link before the menu button
2+
testPageDocument.querySelector('#beforelink').focus();

‎tests/menu-button-navigation/data/js/setFocusOnMenuButton.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// sets focus on the menu button
2+
testPageDocument.querySelector('#menubutton').focus();

‎tests/menu-button-navigation/data/references.csv‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
refId,value
2+
author,Isabel Del Castillo
3+
title,Navigation Menu Button
4+
authorEmail,isa.delcastillo5@gmail.com
5+
reference,reference/2022-4-12_14147/menu-button-links.html
6+
designPattern,https://w3c.github.io/aria-practices/#menubutton
7+
example,https://w3c.github.io/aria-practices/examples/menu-button/menu-button-links.html
8+
menu,https://w3c.github.io/aria/#menu
9+
menuitem,https://w3c.github.io/aria/#menuitem
10+
none,https://w3c.github.io/aria/#none
11+
aria-haspopup,https://w3c.github.io/aria/#aria-haspopup
12+
aria-controls,https://w3c.github.io/aria/#aria-controls
13+
aria-labelledby,https://w3c.github.io/aria/#aria-labelledby
14+
aria-expanded,https://w3c.github.io/aria/#aria-expanded

‎tests/menu-button-navigation/data/tests.csv‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
testId,title,appliesTo,mode,task,setupScript,setupScriptDescription,refs,instructions,assertion1,assertion2,assertion3,assertion4,assertion5,assertion6
2+
1,Navigate forwards to a menu button in reading mode,"JAWS,NVDA",READING,Navigate forwards to a menu button,setFocusBeforeMenuButton,sets focus on a link before the menu button,aria-haspopup,"With the reading cursor on the 'Navigate forwards from here' link, navigate to the 'WAI-ARIA Quick Links' menu button.",Role 'menu button' is conveyed,Name 'WAI-ARIA Quick Links' is conveyed,,,,
3+
2,Navigate forwards to a menu button in interaction mode,"JAWS,NVDA",INTERACTION,Navigate forwards to a menu button,setFocusBeforeMenuButton,sets focus on a link before the menu button,aria-haspopup,"With focus on the 'Navigate forwards from here' link, navigate to the 'WAI-ARIA Quick Links' menu button.",Role 'menu button' is conveyed,Name 'WAI-ARIA Quick Links' is conveyed,,,,
4+
3,Navigate forwards to a menu button,VOICEOVER_MACOS,INTERACTION,Navigate forwards to a menu button,setFocusBeforeMenuButton,sets focus on a link before the menu button,aria-haspopup,"With focus on the 'Navigate forwards from here' link, navigate to the 'WAI-ARIA Quick Links' menu button.",Role 'menu button' is conveyed,Name 'WAI-ARIA Quick Links' is conveyed,,,,
5+
4,Navigate backwards to a menu button in reading mode,"JAWS,NVDA",READING,Navigate backwards to a menu button,setFocusAfterMenuButton,sets focus on a link after the menu button,aria-haspopup,"With the reading cursor on the 'Navigate forwards from here' link, navigate to the 'WAI-ARIA Quick Links' menu button.",Role 'menu button' is conveyed,Name 'WAI-ARIA Quick Links' is conveyed,,,,
6+
5,Navigate backwards to a menu button in interaction mode,"JAWS,NVDA",INTERACTION,Navigate backwards to a menu button,setFocusAfterMenuButton,sets focus on a link after the menu button,aria-haspopup,"With focus on the 'Navigate forwards from here' link, navigate to the 'WAI-ARIA Quick Links' menu button.",Role 'menu button' is conveyed,Name 'WAI-ARIA Quick Links' is conveyed,,,,
7+
6,Navigate backwards to a menu button,VOICEOVER_MACOS,INTERACTION,Navigate backwards to a menu button,setFocusAfterMenuButton,sets focus on a link after the menu button,aria-haspopup,"With focus on the 'Navigate forwards from here' link, navigate to the 'WAI-ARIA Quick Links' menu button.",Role 'menu button' is conveyed,Name 'WAI-ARIA Quick Links' is conveyed,,,,
8+
7,Read information about a menu button in reading mode,"JAWS,NVDA",READING,Read information about a menu button,setFocusOnMenuButton,sets focus on the menu button,aria-haspopup,"With the reading cursor on the 'WAI-ARIA Quick Links', read information about the menu button.",Role 'menu button' is conveyed,Name 'WAI-ARIA Quick Links' is conveyed,,,,
9+
8,Read information about a menu button in interaction mode,"JAWS,NVDA",INTERACTION,Read information about a menu button,setFocusOnMenuButton,sets focus on the menu button,aria-haspopup,"With focus on the 'WAI-ARIA Quick Links', read information about the menu button.",Role 'menu button' is conveyed,Name 'WAI-ARIA Quick Links' is conveyed,,,,
10+
9,Read information about a menu button,VOICEOVER_MACOS,INTERACTION,Read information about a menu button,setFocusOnMenuButton,sets focus on the menu button,aria-haspopup,"With focus on the 'WAI-ARIA Quick Links', read information about the menu button.",Role 'menu button' is conveyed,Name 'WAI-ARIA Quick Links' is conveyed,,,,
11+
10,Open a menu in reading mode,"JAWS,NVDA",READING,Open a menu,setFocusOnMenuButton,sets focus on the menu button,menu aria-labelledby menuitem,"With the reading cursor on the 'WAI-ARIA Quick Links' menu button, open the menu.",Role 'menu button' is conveyed,Name 'WAI-ARIA Quick Links' is conveyed,"2:Role of the focused item, 'menu item', is conveyed","Name of the focused item, 'W3C Home Page', is conveyed",Position of the focused item in the menu (1) is conveyed,Number of items in the menu (6) is conveyed
12+
11,Open a menu in interaction mode,"JAWS,NVDA",INTERACTION,Open a menu,setFocusOnMenuButton,sets focus on the menu button,menu aria-labelledby menuitem,"With focus on the 'WAI-ARIA Quick Links' menu button, open the menu.",Role 'menu button' is conveyed,Name 'WAI-ARIA Quick Links' is conveyed,"2:Role of the focused item, 'menu item', is conveyed","Name of the focused item, 'W3C Home Page', is conveyed",Position of the focused item in the menu (1) is conveyed,Number of items in the menu (6) is conveyed
13+
12,Open a menu,VOICEOVER_MACOS,INTERACTION,Open a menu,setFocusOnMenuButton,sets focus on the menu button,menu aria-labelledby menuitem,"With focus on the 'WAI-ARIA Quick Links' menu button, open the menu.",Role 'menu button' is conveyed,Name 'WAI-ARIA Quick Links' is conveyed,"2:Role of the focused item, 'menu item', is conveyed","Name of the focused item, 'W3C Home Page', is conveyed",Position of the focused item in the menu (1) is conveyed,Number of items in the menu (6) is conveyed
14+
13,Open a menu to the last item in interaction mode,"JAWS,NVDA",INTERACTION,Open a menu to the last item,setFocusOnMenuButton,sets focus on the menu button,menu aria-labelledby menuitem,"With focus on the 'WAI-ARIA Quick Links' menu button, open the menu.",Role 'menu button' is conveyed,Name 'WAI-ARIA Quick Links' is conveyed,"2:Role of the focused item, 'menu item', is conveyed","Name of the focused item, 'Accessible Name and Description', is conveyed",Position of the focused item in the menu (6) is conveyed,Number of items in the menu (6) is conveyed
15+
14,Open a menu to the last item,VOICEOVER_MACOS,INTERACTION,Open a menu to the last item,setFocusOnMenuButton,sets focus on the menu button,menu aria-labelledby menuitem,"With focus on the 'WAI-ARIA Quick Links' menu button, open the menu.",Role 'menu button' is conveyed,Name 'WAI-ARIA Quick Links' is conveyed,"2:Role of the focused item, 'menu item', is conveyed","Name of the focused item, 'Accessible Name and Description', is conveyed",Position of the focused item in the menu (6) is conveyed,Number of items in the menu (6) is conveyed
16+
15,Read information about a menu item in interaction mode,"JAWS,NVDA",INTERACTION,Read information about a menu item,openMenuAndSetFocusToFirstItem,"opens the menu, and sets focus on 'W3C Home Page'",menuitem,"With focus on the 'W3C Home Page' menu item, read information about the item.","Role of the focused item, 'menu item', is conveyed","Name of the focus item, 'W3C Home Page', is conveyed",Position of the focused item in the menu (1) is conveyed,Number of items in the menu (6) is conveyed,,
17+
16,Read information about a menu item,VOICEOVER_MACOS,INTERACTION,Read information about a menu item,openMenuAndSetFocusToFirstItem,"opens the menu, and sets focus on 'W3C Home Page'",menuitem,"With focus on the 'W3C Home Page' menu item, read information about the item.","Role of the focused item, 'menu item', is conveyed","Name of the focus item, 'W3C Home Page', is conveyed",Position of the focused item in the menu (1) is conveyed,Number of items in the menu (6) is conveyed,,
18+
17,Navigate to the first item in a menu in interaction mode,"JAWS,NVDA",INTERACTION,Navigate to the first item in a menu,openMenuAndSetFocusToLastItem,"opens the menu, and sets focus on 'Accessible Name and Description'",menuitem,"With focus on the 'Accessible Name and Description' menu item, navigate to the 'W3C Home Page' menu item.","2:Role of the focused item, 'menu item', is conveyed","Name of the focused item, 'W3C Home Page', is conveyed",Position of the focused item in the menu (1) is conveyed,Number of items in the menu (6) is conveyed,,
19+
18,Navigate to the first item in a menu,VOICEOVER_MACOS,INTERACTION,Navigate to the first item in a menu,openMenuAndSetFocusToLastItem,"opens the menu, and sets focus on 'Accessible Name and Description'",menuitem,"With focus on the 'Accessible Name and Description' menu item, navigate to the 'W3C Home Page' menu item.","2:Role of the focused item, 'menu item', is conveyed","Name of the focused item, 'W3C Home Page', is conveyed",Position of the focused item in the menu (1) is conveyed,Number of items in the menu (6) is conveyed,,
20+
19,Navigate to the last item in a menu in interaction mode,"JAWS,NVDA",INTERACTION,Navigate to the last item in a menu,openMenuAndSetFocusToFirstItem,"opens the menu, and sets focus on 'W3C Home Page'",menuitem,"With focus on the 'W3C Home Page' menu item, navigate to the 'Accessible Name and Description' menu item.","2:Role of the focused item, 'menu item', is conveyed","Name of the focused item, 'Accessible Name and Description', is conveyed",Position of the focused item in the menu (6) is conveyed,Number of items in the menu (6) is conveyed,,
21+
20,Navigate to the last item in a menu,VOICEOVER_MACOS,INTERACTION,Navigate to the last item in a menu,openMenuAndSetFocusToFirstItem,"opens the menu, and sets focus on 'W3C Home Page'",menuitem,"With focus on the 'W3C Home Page' menu item, navigate to the 'Accessible Name and Description' menu item.","2:Role of the focused item, 'menu item', is conveyed","Name of the focused item, 'Accessible Name and Description', is conveyed",Position of the focused item in the menu (6) is conveyed,Number of items in the menu (6) is conveyed,,
22+
21,Navigate to an item in a menu by typing a character in interaction mode,"JAWS,NVDA",INTERACTION,Navigate to an item in a menu by typing a character,openMenuAndSetFocusToFirstItem,"opens the menu, and sets focus on 'W3C Home Page'",menuitem,"With focus on the 'W3C Home Page' menu item, type a character to navigate to a different menu item.","2:Role of the focused item, 'menu item', is conveyed","Name of the focused item, 'Accessible Rich Internet Application Specification', is conveyed",Position of the focused item in the menu (3) is conveyed,Number of items in the menu (6) is conveyed,,
23+
22,Navigate to an item in a menu by typing a character,VOICEOVER_MACOS,INTERACTION,Navigate to an item in a menu by typing a character,openMenuAndSetFocusToFirstItem,"opens the menu, and sets focus on 'W3C Home Page'",menuitem,"With focus on the 'W3C Home Page' menu item, type a character to navigate to a different menu item.","2:Role of the focused item, 'menu item', is conveyed","Name of the focused item, 'Accessible Rich Internet Application Specification', is conveyed",Position of the focused item in the menu (3) is conveyed,Number of items in the menu (6) is conveyed,,
24+
23,Close a menu in interaction mode,"JAWS,NVDA",INTERACTION,Close a menu,openMenuAndSetFocusToFirstItem,"opens the menu, and sets focus on 'W3C Home Page'",aria-haspopup,"With focus on the 'W3C Home Page' menu item, close the menu.",Role 'menu button' is conveyed,Name 'WAI-ARIA Quick Links' is conveyed,,,,
25+
24,Close a menu,VOICEOVER_MACOS,INTERACTION,Close a menu,openMenuAndSetFocusToFirstItem,"opens the menu, and sets focus on 'W3C Home Page'",aria-haspopup,"With focus on the 'W3C Home Page' menu item, close the menu.",Role 'menu button' is conveyed,Name 'WAI-ARIA Quick Links' is conveyed,,,,

‎tests/menu-button-navigation/reference/2022-4-12_14147/css/menu-button-links.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.menu-button-links {
2+
margin: 0;
3+
font-size: 110%;
4+
}
5+
6+
.menu-button-links button {
7+
margin: 0;
8+
padding: 6px;
9+
display: inline-block;
10+
position: relative;
11+
background-color: #034575;
12+
border: 1px solid #034575;
13+
font-size: 0.9em;
14+
color: white;
15+
border-radius: 5px;
16+
}
17+
18+
.menu-button-links [role="menu"] {
19+
margin: 0;
20+
padding: 7px 4px;
21+
list-style: none;
22+
display: none;
23+
position: absolute;
24+
border: 2px solid #034575;
25+
border-radius: 5px;
26+
background-color: #eee;
27+
}
28+
29+
.menu-button-links [role="menuitem"],
30+
.menu-button-links [role="separator"] {
31+
margin: 0;
32+
padding: 6px;
33+
display: block;
34+
width: 24em;
35+
background-color: #eee;
36+
border: none;
37+
color: black;
38+
border-radius: 5px;
39+
}
40+
41+
.menu-button-links [role="separator"] {
42+
padding-top: 3px;
43+
background-image: url("../images/separator.svg");
44+
background-position: center;
45+
background-repeat: repeat-x;
46+
}
47+
48+
.menu-button-links button svg.down {
49+
padding-left: 0.125em;
50+
fill: currentColor;
51+
stroke: currentColor;
52+
}
53+
54+
.menu-button-links button[aria-expanded="true"] svg.down {
55+
transform: rotate(180deg);
56+
}
57+
58+
/* focus styling */
59+
60+
.menu-button-links button:hover,
61+
.menu-button-links button:focus,
62+
.menu-button-links button[aria-expanded="true"] {
63+
padding: 4px;
64+
border: 3px solid #034575;
65+
background: #eee;
66+
color: #222;
67+
outline: none;
68+
margin: 0;
69+
}
70+
71+
.menu-button-links [role="menuitem"]:focus {
72+
padding: 4px;
73+
border: 2px solid #034575;
74+
background: #034575;
75+
color: #fff;
76+
outline: none;
77+
margin: 0;
78+
}

0 commit comments

Comments
 (0)