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

Jump to bottom

Add example of disclosure navigation with top-level links #1614

Merged
merged 29 commits into from
Mar 3, 2021
+1,074 −170
Merged

Add example of disclosure navigation with top-level links #1614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
2b58fdd
updated disclosure nav with links example
smhigley Nov 10, 2020
6f59642
update js to a class, update filename, add links
smhigley Nov 13, 2020
800ea09
add tests, add codepen button, update some wording
smhigley Dec 15, 2020
c9176aa
address PR comments: fix tests, fix codepen link behavior, run refere…
smhigley Jan 12, 2021
e035a7b
fix codepen issue and failing test
smhigley Jan 19, 2021
724db34
fix lint issues
smhigley Jan 20, 2021
f204fb4
update example to match treeview navigation page visuals and update s…
smhigley Feb 2, 2021
a61bb11
hide dropdowns on load
smhigley Feb 2, 2021
3102ab3
example page focus change when activating a link
smhigley Feb 9, 2021
99e16fe
Add link to new example from main doc
mcking65 Feb 21, 2021
2ac5269
update dropdown button labels
smhigley Feb 18, 2021
8b38d45
remove content on hover or focus wording
smhigley Feb 18, 2021
32500f6
switch from fake link focus behavior to fixing the href for codepen
smhigley Feb 23, 2021
b4cc2fd
add advisement text to example page
smhigley Feb 23, 2021
1694aa9
remove link click preventDefault from previous workaround
smhigley Feb 23, 2021
b317fee
Add link to advisement, add missing comma, delete dupe note.
mcking65 Feb 24, 2021
eac99ce
partial white space fix
mcking65 Feb 24, 2021
692b620
Make title tag consistent with h1
mcking65 Feb 24, 2021
3c025a3
Editorial revision to tab key description
mcking65 Feb 24, 2021
eb770be
Editorial revision to aria-controls
mcking65 Feb 24, 2021
0b56059
Editorial clarification of accessibility features
mcking65 Feb 24, 2021
fc7be57
Fix link text for the disclosure nav menu example
mcking65 Feb 24, 2021
50d10b4
Add advisement to disclosure nav menu example, remove dupe note, fix …
mcking65 Feb 24, 2021
9ea4396
Make link text consistent
mcking65 Feb 24, 2021
ac41d61
Make link text consistent
mcking65 Feb 24, 2021
13f02cc
Make link text consistent and fix href
mcking65 Feb 24, 2021
22abf70
Make link text consistent
mcking65 Feb 24, 2021
0ba0a3e
Uupdate index of examples
mcking65 Feb 24, 2021
00c1af9
Remove accessibility feature documentation of high contrast support p…
mcking65 Mar 3, 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
3 changes: 2 additions & 1 deletion aria-practices.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1228,7 +1228,8 @@ <h4>Examples</h4>
<ul>
<li><a href="examples/disclosure/disclosure-img-long-description.html">Disclosure (Show/Hide) of Image Description</a></li>
<li><a href="examples/disclosure/disclosure-faq.html">Disclosure (Show/Hide) of Answers to Frequently Asked Questions</a></li>
<li><a href="examples/disclosure/disclosure-navigation.html">Disclosure (Show/Hide) for Navigation Menus</a></li>
<li><a href="examples/disclosure/disclosure-navigation.html">Disclosure (Show/Hide) Navigation Menu</a></li>
<li><a href="examples/disclosure/disclosure-navigation-hybrid.html">Disclosure (Show/Hide) Navigation Menu with Top-Level Links</a></li>
</ul>
</section>

Expand Down
48 changes: 46 additions & 2 deletions examples/disclosure/css/disclosure-navigation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}

.disclosure-nav ul {
Expand All @@ -16,12 +17,18 @@
min-width: 200px;
padding: 0;
position: absolute;
top: 100%;
}

.disclosure-nav li {
margin: 0;
}

.disclosure-nav > li {
display: flex;
position: relative;
}

.disclosure-nav ul a {
border: 0;
color: #000;
Expand All @@ -43,14 +50,20 @@
position: relative;
}

.disclosure-nav button {
.disclosure-nav button,
.disclosure-nav .main-link {
align-items: center;
background-color: transparent;
border: 1px solid transparent;
border-right-color: #ccc;
display: flex;
padding: 1em;
}

.disclosure-nav .main-link {
border-right-color: transparent;
}

.disclosure-nav button::after {
content: "";
border-bottom: 1px solid #000;
Expand All @@ -61,7 +74,12 @@
transform: rotate(45deg);
}

.disclosure-nav button:focus {
.disclosure-nav .main-link + button::after {
margin-left: 0;
}

.disclosure-nav button:focus,
.disclosure-nav .main-link:focus {
border-color: #005a9c;
outline: 5px solid rgba(0, 90, 156, 0.75);
position: relative;
Expand All @@ -87,3 +105,29 @@
.disclosure-page-content h3 {
margin-top: 0.5em;
}

.sample-header {
border: #005a9c solid 2px;
background: #005a9c;
color: white;
text-align: center;
}

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

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

.sample-footer {
border: #005a9c solid 2px;
background: #005a9c;
font-family: serif;
color: white;
font-style: italic;
padding-left: 1em;
}
3 changes: 2 additions & 1 deletion examples/disclosure/disclosure-faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,9 @@ <h1>Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</h1
<a href="disclosure-img-long-description.html">Example Disclosure (Show/Hide) for an Image Description</a>
</li>
<li>
<a href="disclosure-navigation.html">Example Disclosure for Navigation Menus</a>
<a href="disclosure-navigation.html">Example Disclosure Navigation Menu</a>
</li>
<li><a href="disclosure-navigation-hybrid.html">Example Disclosure Navigation Menu with Top-Level Links</a></li>
</ul>
<section>
<div class="example-header">
Expand Down
3 changes: 2 additions & 1 deletion examples/disclosure/disclosure-img-long-description.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,9 @@ <h1>Example Disclosure (Show/Hide) for Image Description</h1>
<a href="disclosure-faq.html">Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a>
</li>
<li>
<a href="disclosure-navigation.html">Example Disclosure for Navigation Menus</a>
<a href="disclosure-navigation.html">Example Disclosure Navigation Menu</a>
</li>
<li><a href="disclosure-navigation-hybrid.html">Example Disclosure Navigation Menu with Top-Level Links</a></li>
</ul>
<section>
<div class="example-header">
Expand Down
Loading