Skip to content

Commit 87a75c9

Browse files
davidsgrogandavidsgrogan
committed
menubar accessility test v1
1 parent 2320451 commit 87a75c9

1 file changed

Lines changed: 89 additions & 0 deletions

File tree

‎menu-a11y-test.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<meta name="viewport" content="width=device-width, initial-scale=1">
3+
4+
<h3>menubar</h3>
5+
<p>Since this is a menubar element, it should render as a persistently visible horizontal container. Activating its menuitem children should open their respective drop-down menus.</p>
6+
<menubar>
7+
<menuitem commandfor="file-menu" command="toggle-menu">File</menuitem>
8+
<menuitem commandfor="edit-menu" command="toggle-menu">Edit</menuitem>
9+
</menubar>
10+
11+
<menulist id="file-menu">
12+
<menuitem>New</menuitem>
13+
<menuitem>Open</menuitem>
14+
</menulist>
15+
16+
<menulist id="edit-menu">
17+
<menuitem>Undo</menuitem>
18+
<menuitem>Redo</menuitem>
19+
</menulist>
20+
21+
<h3>menubar with nested menus</h3>
22+
<p>Since the menubar has a menuitem that opens a menulist, and that menulist contains a menuitem with a commandfor attribute pointing to another menulist, it should allow opening a secondary, nested drop-down box from the first drop-down menu.</p>
23+
<menubar>
24+
<menuitem commandfor="view-menu-nested" command="toggle-menu">View</menuitem>
25+
</menubar>
26+
27+
<menulist id="view-menu-nested">
28+
<menuitem>Layout</menuitem>
29+
<menuitem commandfor="zoom-menu-nested" command="toggle-menu">Zoom</menuitem>
30+
</menulist>
31+
32+
<menulist id="zoom-menu-nested">
33+
<menuitem>Zoom In</menuitem>
34+
<menuitem>Zoom Out</menuitem>
35+
</menulist>
36+
37+
<hr>
38+
39+
<h3>menulist invoked by button</h3>
40+
<p>Since the button has a commandfor attribute pointing to a menulist, activating the button should open a drop-down box containing the options.</p>
41+
<button commandfor="action-menu" command="toggle-menu">Actions</button>
42+
<menulist id="action-menu">
43+
<menuitem>Action 1</menuitem>
44+
<menuitem>Action 2</menuitem>
45+
</menulist>
46+
47+
<h3>nested menulist</h3>
48+
<p>Since the "Share" menuitem has a commandfor attribute pointing to another menulist, activating it should open a secondary, nested drop-down box.</p>
49+
<button commandfor="main-menu" command="toggle-menu">Share Menu</button>
50+
<menulist id="main-menu">
51+
<menuitem>Save</menuitem>
52+
<menuitem commandfor="share-menu" command="toggle-menu">Share</menuitem>
53+
</menulist>
54+
<menulist id="share-menu">
55+
<menuitem>Email</menuitem>
56+
<menuitem>Link</menuitem>
57+
</menulist>
58+
59+
<h3>menulist with separator and disabled item</h3>
60+
<p>Since this menulist contains an hr element, it should render as a visual separator line. Since the "Paste" menuitem has the disabled attribute, it should render as inactive and un-clickable.</p>
61+
<button commandfor="mixed-menu" command="toggle-menu">Clipboard</button>
62+
<menulist id="mixed-menu">
63+
<menuitem>Copy</menuitem>
64+
<hr>
65+
<menuitem disabled>Paste</menuitem>
66+
</menulist>
67+
68+
<h3>checkable single</h3>
69+
<p>Since the fieldset has the checkable="single" attribute, its menuitem children should behave like radio buttons where only one can be selected. The "100%" item is selected by default.</p>
70+
<button commandfor="view-menu" command="toggle-menu">Zoom Options</button>
71+
<menulist id="view-menu">
72+
<fieldset checkable="single">
73+
<legend>Zoom Level</legend>
74+
<menuitem>50%</menuitem>
75+
<menuitem defaultchecked>100%</menuitem>
76+
<menuitem>200%</menuitem>
77+
</fieldset>
78+
</menulist>
79+
80+
<h3>checkable multiple</h3>
81+
<p>Since the fieldset has the checkable="multiple" attribute, its menuitem children should behave like checkboxes where multiple can be selected. "Show Ruler" and "Show Comments" are selected by default.</p>
82+
<button commandfor="options-menu" command="toggle-menu">Formatting</button>
83+
<menulist id="options-menu">
84+
<fieldset checkable="multiple">
85+
<menuitem defaultchecked>Show Ruler</menuitem>
86+
<menuitem>Show Outline</menuitem>
87+
<menuitem defaultchecked>Show Comments</menuitem>
88+
</fieldset>
89+
</menulist>

0 commit comments

Comments
 (0)