Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Menubar Navigation Example: Make single page and improve implementation of APG coding practices (try 2) #1741

Merged
merged 19 commits into from
Feb 9, 2021
Merged

Menubar Navigation Example: Make single page and improve implementation of APG coding practices (try 2) #1741

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
4b9c7cf
attempt to fix merge issues with update-menubar-nav pull request
jongund Jan 28, 2021
8f3acf4
fixed spelling issue
jongund Jan 28, 2021
b303312
fixed spelling issue
jongund Jan 28, 2021
317e7ea
fixed spelling issue
jongund Jan 28, 2021
05e7a96
Add advisement
mcking65 Feb 2, 2021
5c0aa81
Revise intro
mcking65 Feb 2, 2021
3994dc3
Editorial revisions to landmark comments for clarity and grammar
mcking65 Feb 2, 2021
c820f4a
Revise documentation of focus movement after activation
mcking65 Feb 2, 2021
ae65d32
Make HCM documentation consistent with nav menu button and clarify pa…
mcking65 Feb 2, 2021
17689f1
Fix enter and space docs for menubar
mcking65 Feb 2, 2021
5b3f71c
Fix enter and space documentation for submenus
mcking65 Feb 2, 2021
3db5e3c
Editorial clarification of landmark documentation
mcking65 Feb 2, 2021
d21f1c8
Remove quote entity from inside code tags
mcking65 Feb 2, 2021
d9be722
removed aria-owns
jongund Feb 3, 2021
73d8e19
removed aria-owns
jongund Feb 3, 2021
6feb92d
updated documentation and removed aria-owns
jongund Feb 3, 2021
c1d541f
updated border styling and documentation
jongund Feb 3, 2021
722a429
updated focus and aria-current styling
jongund Feb 4, 2021
33eb499
Improve wording in caution box and intro
mcking65 Feb 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
<td><code>banner</code></td>
<td>
<ul>
<li><a href="menubar/menubar-navigation.html">Navigation Menubar</a></li>
<li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
<li><a href="landmarks/banner.html">Banner Landmark</a></li>
</ul>
Expand Down Expand Up @@ -98,6 +99,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
<td><code>contentinfo</code></td>
<td>
<ul>
<li><a href="menubar/menubar-navigation.html">Navigation Menubar</a></li>
<li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
<li><a href="landmarks/contentinfo.html">Contentinfo Landmark</a></li>
</ul>
Expand Down Expand Up @@ -222,6 +224,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
<td><code>navigation</code></td>
<td>
<ul>
<li><a href="menubar/menubar-navigation.html">Navigation Menubar</a></li>
<li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
<li><a href="landmarks/navigation.html">Navigation Landmark</a></li>
</ul>
Expand Down Expand Up @@ -468,6 +471,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<td>
<ul>
<li><a href="disclosure/disclosure-navigation.html">Disclosure for Navigation Menus</a></li>
<li><a href="menubar/menubar-navigation.html">Navigation Menubar</a></li>
<li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
</ul>
</td>
Expand Down Expand Up @@ -612,6 +616,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="menu-button/menu-button-actions-active-descendant.html">Actions Menu Button Using aria-activedescendant</a></li>
<li><a href="menu-button/menu-button-actions.html">Actions Menu Button Using element.focus()</a></li>
<li><a href="menu-button/menu-button-links.html">Navigation Menu Button</a></li>
<li><a href="menubar/menubar-navigation.html">Navigation Menubar</a></li>
<li><a href="radio/radio-activedescendant.html">Radio Group Using aria-activedescendant</a></li>
<li><a href="radio/radio.html">Radio Group Using Roving tabindex</a></li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
Expand Down
135 changes: 110 additions & 25 deletions examples/menubar/css/menubar-navigation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,51 @@
.page header {
border: #005a9c solid 2px;
background: #005a9c;
color: white;
text-align: center;
}

.page header .title {
font-size: 2.5em;
font-weight: bold;
font-family: serif;
}

.page header .tagline {
font-style: italic;
}

.page .main {
padding-top: 1em;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 5em;
border-left: 2px solid #eee;
border-right: 2px solid #eee;
}

.page footer {
border: #005a9c solid 2px;
background: #005a9c;
font-family: serif;
color: white;
font-style: italic;
padding-left: 1em;
}

.page nav {
margin: 0;
padding: 0;
border: 2px solid #eee;
}

.menubar-navigation {
margin: 0;
margin-top: 0.5em;
margin-bottom: 0.5em;
padding: 7px;
padding: 2px;
font-size: 110%;
list-style: none;
background-color: #eee;
border: #eee solid 1px;
border-radius: 5px;
}

.menubar-navigation li {
Expand All @@ -30,16 +68,22 @@
.menubar-navigation [role="menu"] [role="separator"] {
display: block;
width: 12em;
margin: 0;
margin: 2px;
padding: 4px;
padding-left: 8px;
background-color: #eee;
border: 0 solid #eee;
color: black;
}

.menubar-navigation [role="menuitem"],
.menubar-navigation [role="separator"] {
padding: 6px;
.menubar-navigation > li > [role="menuitem"] {
display: inline-block;
margin: 2px;
padding: 4px;
padding-bottom: 8px;
background-color: #eee;
border: 0 solid #eee;
color: black;
border-radius: 5px;
}

.menubar-navigation [role="menuitem"] svg {
Expand All @@ -65,18 +109,13 @@
transform: rotate(90deg) translate(5px, -5px);
}

.menubar-navigation > li > [role="menuitem"] {
display: inline-block;
}

.menubar-navigation [role="menu"] {
display: none;
position: absolute;
margin: 0;
padding: 0;
padding: 7px 4px;
border: 2px solid #034575;
border-radius: 5px;
background-color: #eee;
}

Expand All @@ -87,28 +126,74 @@

.menubar-navigation [role="separator"] {
padding-top: 3px;
background-image: url("../images/separator.svg");
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cline x1='0' y1='6' x2='12' y2='6' style='stroke:black;stroke-width:1' /%3E%3C/svg%3E%0A");
background-position: center;
background-repeat: repeat-x;
}

/* aria-current styling */

.menubar-navigation [role="menu"] [role="menuitem"].aria-current-path,
.menubar-navigation [role="menu"] [role="menuitem"][aria-current] {
padding-left: 4px;
border-left: 4px solid #034575;
}

.menubar-navigation > li > [role="menuitem"][aria-current],
.menubar-navigation > li > [role="menuitem"].aria-current-path {
padding-bottom: 2px;
border-bottom: 4px solid #034575;
}

/* focus styling */

.menubar-navigation.focus {
padding: 6px;
border: #034575 solid 2px;
padding: 0;
border: #034575 solid 3px;
}

.menubar-navigation [role="menu"] [aria-expanded="true"],
.menubar-navigation [role="menu"] [role="menuitem"]:focus,
.menubar-navigation [role="menu"] [role="menuitem"]:hover {
outline: none;
background-color: #ccc;
}

.menubar-navigation [role="menu"] [role="menuitem"]:focus,
.menubar-navigation [role="menu"] [role="menuitem"]:hover {
padding: 2px;
padding-left: 6px;
border: 2px solid #034575;
}

.menubar-navigation [role="menuitem"][aria-expanded="true"],
.menubar-navigation [role="menuitem"]:focus,
.menubar-navigation [role="menuitem"]:hover {
background: #034575;
color: #fff;
.menubar-navigation [role="menu"] [aria-expanded="true"].aria-current-path,
.menubar-navigation [role="menu"] [role="menuitem"].aria-current-path:focus,
.menubar-navigation [role="menu"] [role="menuitem"].aria-current-path:hover,
.menubar-navigation [role="menu"] [role="menuitem"][aria-current]:focus,
.menubar-navigation [role="menu"] [role="menuitem"][aria-current]:hover {
padding-left: 4px;
border-left: 4px solid #034575;
}

.menubar-navigation > li > [aria-expanded="true"],
.menubar-navigation > li > [role="menuitem"]:focus,
.menubar-navigation > li > [role="menuitem"]:hover {
outline: none;
background-color: #ccc;
}

.menubar-navigation [role="menuitem"]:focus,
.menubar-navigation [role="menuitem"]:hover {
.menubar-navigation > li > [role="menuitem"]:focus,
.menubar-navigation > li > [role="menuitem"]:hover {
padding: 2px;
border: 4px solid #034575;
padding-bottom: 4px;
border: 2px solid #034575;
}

.menubar-navigation > li > [aria-expanded="true"].aria-current-path,
.menubar-navigation > li > [role="menuitem"].aria-current-path:focus,
.menubar-navigation > li > [role="menuitem"].aria-current-path:hover,
.menubar-navigation > li > [role="menuitem"][aria-current]:focus,
.menubar-navigation > li > [role="menuitem"][aria-current]:hover {
padding-bottom: 2px;
border-bottom: 4px solid #034575;
}
Loading