Skip to content

Commit 243f77d

Browse files
jongundValerie Youngmcking65carmacleod
authored
Menu button examples: Improve High Contrast Support and consistency with APG Coding Practices (pull #1401)
Updated three menu button examples to: * Improve Javascript coding; use key rather than keyCode in keyboard events; use a single object; use classes instead of prototypes. * Improve high contrast support and documentation. Co-authored-by: Valerie Young <[email protected]> Co-authored-by: Matt King <[email protected]> Co-authored-by: Carolyn MacLeod <[email protected]>
1 parent 2e8bb44 commit 243f77d

21 files changed

+1356
-1768
lines changed

‎examples/menu-button/css/MenubuttonLinks.css

Lines changed: 0 additions & 56 deletions
This file was deleted.

‎examples/menu-button/css/menu-button-actions.css

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

‎examples/menu-button/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+
}

‎examples/menu-button/css/menuButtonAction.css

Lines changed: 0 additions & 47 deletions
This file was deleted.

0 commit comments

Comments
 (0)