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

Restructure accordion example to remove DL, DT and DD elements for issue 815 #838

Merged
merged 18 commits into from
Sep 21, 2018
Merged

Restructure accordion example to remove DL, DT and DD elements for issue 815 #838

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
9e304a1
update button example
jongund Mar 18, 2017
4e59e79
fixed references to external file
jongund Mar 27, 2017
76ff0ed
added auto rebase
jongund Mar 27, 2017
75a87f2
Merge branch 'master' of https://github.com/jongund/aria-practices
jongund May 24, 2018
0df77d2
removed gitcongif file
jongund Jun 27, 2018
84dacfe
updated the html
jinzhou77 Aug 15, 2018
9cf9c86
unfinished
jinzhou77 Aug 16, 2018
ccc49d8
update the docs and div element exchange
jinzhou77 Aug 16, 2018
b932417
made edits to accordion and improved focus styling
jongund Sep 10, 2018
3c9413f
made edits to include test refrence
jongund Sep 10, 2018
996e12d
made edits to include test refrence
jongund Sep 10, 2018
2af9917
Remove extra quote
mcking65 Sep 14, 2018
3f19144
Updated documentation
jongund Sep 18, 2018
bd695b1
removed divs from buttons, removed role=presentation and fixed firefo…
jongund Sep 20, 2018
45ad1e0
Merge branch 'issue815-accordion-restructure' into accordion
mcking65 Sep 21, 2018
6a83331
Accordion: editorial revisions
mcking65 Sep 21, 2018
e542a5c
Accordion example: fix validation and editorial revisions
mcking65 Sep 21, 2018
bdbeb71
Fix quotes inside code elements
mcking65 Sep 21, 2018
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
144 changes: 68 additions & 76 deletions examples/accordion/accordion.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,27 +41,28 @@ <h2 id="ex_label">Example</h2>
<!-- Accordion Configuration Options

data-allow-toggle
Allow for each toggle to both open and close individually
Allow for each toggle to both open and close its section. Makes it possible for all sections to be closed. Assumes only one section may be open.

data-allow-multiple
Allow for multiple accordion sections to be expanded at the same time. Assumes data-allow-toggle otherwise you would not be able to close any of the accordions
Allow for multiple accordion sections to be expanded at the same time. Assumes data-allow-toggle otherwise the toggle on open sections would be disabled.
__________

Ex:
<dl id="accordionGroup" role="presentation" class="Accordion" data-allow-multiple>

<dl id="accordionGroup" role="presentation" class="Accordion" data-allow-toggle>
<div id="accordionGroup" class="Accordion" data-allow-multiple>

<div id="accordionGroup" class="Accordion" data-allow-toggle>
-->
<dl id="accordionGroup" role="presentation" class="Accordion">
<dt role="heading" aria-level="3">
<div id="accordionGroup" class="Accordion">
<h3>
<button aria-expanded="true" class="Accordion-trigger"
aria-controls="sect1" id="accordion1id" type="button"
>
<span class="Accordion-title">Personal Information</span><span class="Accordion-icon"></span>
aria-controls="sect1" id="accordion1id">
<span class="Accordion-title">
Personal Information
<span class="Accordion-icon"></span>
</span>
</button>
</dt>
<dd id="sect1" role="region" aria-labelledby="accordion1id" class="Accordion-panel">
</h3>
<div id="sect1" role="region" aria-labelledby="accordion1id" class="Accordion-panel">
<div>
<!-- Variable content within section, may include any type of markup or interactive widgets. -->
<fieldset>
Expand Down Expand Up @@ -95,15 +96,17 @@ <h2 id="ex_label">Example</h2>
</p>
</fieldset>
</div>
</dd>
<dt role="heading" aria-level="3">
</div>
<h3>
<button aria-expanded="false" class="Accordion-trigger"
aria-controls="sect2" id="accordion2id" type="button"
>
<span class="Accordion-title">Billing Address</span><span class="Accordion-icon"></span>
aria-controls="sect2" id="accordion2id">
<span class="Accordion-title">
Billing Address
<span class="Accordion-icon"></span>
</span>
</button>
</dt>
<dd id="sect2" role="region" aria-labelledby="accordion2id" class="Accordion-panel" hidden>
</h3>
<div id="sect2" role="region" aria-labelledby="accordion2id" class="Accordion-panel" hidden>
<div>
<fieldset>
<p>
Expand All @@ -128,15 +131,17 @@ <h2 id="ex_label">Example</h2>
</p>
</fieldset>
</div>
</dd>
<dt role="heading" aria-level="3">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We want a h3 element here

</div>
<h3>
<button aria-expanded="false" class="Accordion-trigger"
aria-controls="sect3" id="accordion3id" type="button"
>
<span class="Accordion-title">Shipping Address</span><span class="Accordion-icon"></span>
aria-controls="sect3" id="accordion3id">
<span class="Accordion-title">
Shipping Address
<span class="Accordion-icon"></span>
</span>
</button>
</dt>
<dd id="sect3" role="region" aria-labelledby="accordion3id" class="Accordion-panel" hidden>
</h3>
<div id="sect3" role="region" aria-labelledby="accordion3id" class="Accordion-panel" hidden>
<div>
<fieldset>
<p>
Expand All @@ -161,12 +166,29 @@ <h2 id="ex_label">Example</h2>
</p>
</fieldset>
</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>
<section>
<h2>Accessibility Features</h2>
<p>
The visual design includes features intended to help users understand that the accordion provides enhanced keyboard navigation functions.
When an accordion header button has keyboard focus, the styling of the accordion container and all its header buttons is changed.
</p>
<p>When any accordion header button receives focus:</p>
<ul>
<li>The border encompassing the entire accordion changes color.</li>
<li>The background color of the accordion header buttons changes.</li>
</ul>
<p>The focused accordion header button:</p>
<ul>
<li>Has a border that encompasses both the header text and icon.</li>
<li>Has a background color that distinguishes it from the other accordion buttons that are not focused.</li>
</ul>
</section>
<section>
<h2 id="kbd_label">Keyboard Support</h2>
<table aria-labelledby="kbd_label" class="def">
Expand Down Expand Up @@ -232,8 +254,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<!--
Update this table to describe how roles, properties, states, and tabindex are used in this example.
-->
Update this table to describe how roles, properties, states, and tabindex are used in this example -->
<table aria-labelledby="rps_label" class="data attributes">
<thead>
<tr>
Expand All @@ -244,72 +265,57 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
</tr>
</thead>
<tbody>
<tr data-test-id="presentation-role">
<th scope="row"><code>presentation</code></th>
<tr data-test-id="h3-element">
<td></td>
<td><code>dl</code></td>
<td>
<ul>
<li>Indicates that the <code>dl</code> element is being used to control presentation and does not represent a definition list.</li>
<li>This implementation uses an HTML definition list where each term is recast as a header and each definition is recast as a region that contains panel content.</li>
</ul>
</td>
</tr>
<tr data-test-id="heading-role">
<th scope="row"><code>heading</code></th>
<td></td>
<td><code>dt</code></td>
<td>Identifies the element as a heading that serves as an accordion header.</td>
</tr>
<tr data-test-id="heading-aria-level">
<td></td>
<th scope="row"><code>aria-level=<q>3</q></code></th>
<td><code>dt</code></td>
<th scope="row"><code>h3</code></th>
<td>
<ul>
<li>Specifies heading level for the accordion header.</li>
<li>Level 3 is chosen because the accordion is contained in a section with a level 2 heading.</li>
<li>Element that serves as an accordion header.</li>
<li>Each accordion header element contains a button that controls the visibility of its content panel.</li>
<li>The example uses heading level 3 so it fits correctly within the outline of the page; the example is contained in a section titled with a level 2 heading.</li>
</ul>
</td>
</tr>
<tr data-test-id="button-aria-expanded">
<td> </td>
<th scope="row"><code>aria-expanded=<q>true</q></code></th>
<th scope="row"><code>aria-expanded="true"</code></th>
<td><code>button</code></td>
<td>
Set to <code>true</code> when the Accordion panel is expanded, otherwise set to <code>false</code>.
</td>
</tr>
<tr data-test-id="button-aria-controls">
<td> </td>
<th scope="row"><code>aria-controls=<q>ID</q></code></th>
<th scope="row"><code>aria-controls="ID"</code></th>
<td><code>button</code></td>
<td>
Points to the ID of the panel which the header controls.
</td>
</tr>
<tr data-test-id="button-aria-disabled">
<td> </td>
<th scope="row"><code>aria-disabled=<q>true</q></code></th>
<th scope="row"><code>aria-disabled="true"</code></th>
<td><code>button</code></td>
<td>
If the accordion panel is expanded and is not allowed to be collapsed, then set to <code>true</code>.
</td>
</tr>
<tr data-test-id="region-role">
<th scope="row">region</th>
<th scope="row"><code>region</code></th>
<td></td>
<td><code>dd</code></td>
<td><code>div</code></td>
<td>Creates a landmark region that contains the currently expanded accordion panel.</td>
</tr>
<tr data-test-id="region-aria-labelledby">
<td></td>
<th scope="row"><code>aria-labelledby=&quot;ID_REF&quot;</code></th>
<td><code>dd</code></td>
<th scope="row"><code>aria-labelledby="IDREF"</code></th>
<td><code>div</code></td>
<td>
<ul>
<li>Points to the accordion header.</li>
<li>Labels the landmark region with the accordion header.</li>
<li>Defines the accessible name for the <code>region</code> element.</li>
<li>References the accordion header button that expands and collapses the region.</li>
<li><code>region</code> elements are required to have an accessible name to be identified as a landmark.</li>
</ul>
</td>
</tr>
Expand All @@ -320,22 +326,8 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<li>
CSS:
<ol>
<li>
<a href="css/accordion.css" type="tex/css">accordion.css</a>
</li>
</ol>
</li>
<li>
JavaScript:
<ol>
<li>
<a href="js/accordion.js" type="text/javascript">accordion.js</a>
</li>
</ol>
</li>
<li>CSS: <a href="css/accordion.css" type="tex/css">accordion.css</a></li>
<li>JavaScript: <a href="js/accordion.js" type="text/javascript">accordion.js</a></li>
</ul>
</section>

Expand Down
52 changes: 42 additions & 10 deletions examples/accordion/css/accordion.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,26 @@
.Accordion {
border: 1px solid hsl(0, 0%, 82%);
border-radius: .3em;
box-shadow: 0 1px 2px hsl(0, 0%, 82%);
margin: 0;
padding: 0;
border: 2px solid hsl(0, 0%, 82%);
border-radius: 7px;
width: 20em;
}

.Accordion.focus {
border-color: hsl(216, 94%, 73%);
}

.Accordion.focus h3 {
background-color: hsl(0, 0%, 97%);
}


.Accordion > * + * {
border-top: 1px solid hsl(0, 0%, 82%);
}

.Accordion-trigger {
sh0ji marked this conversation as resolved.
Show resolved Hide resolved
background: none;
border: 0;
color: hsl(0, 0%, 13%);
display: block;
font-size: 1rem;
Expand All @@ -20,20 +30,38 @@
position: relative;
text-align: left;
width: 100%;
outline: none;
}

.Accordion h3 {
margin: 0;
padding: 0;
}

.Accordion dt:first-child .Accordion-trigger {
border-radius: .3em .3em 0 0;
.Accordion *:first-child .Accordion-trigger {
border-radius: 5px 5px 0 0;
}

.Accordion-trigger:focus,
.Accordion-trigger:hover {
background: hsl(0, 0%, 93%);
background: hsl(216, 94%, 94%);
}

.Accordion button::-moz-focus-inner {
border: 0;
}

.Accordion-title {
display: block; /* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8295099/ */
display: block;
pointer-events: none;
border: transparent 2px solid;
border-radius: 5px;
padding: 0.25em;
outline: none;
}

.Accordion-trigger:focus .Accordion-title {
border-color: hsl(216, 94%, 73%);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The .Accordion-trigger already has a visual change on focus, so I'm not entirely clear what purpose this serves. It also gives the visual impression that only the .Accordion-title is focused, or that the .Accordion-title is the clickable area, neither of which is true.

}

.Accordion-icon {
Expand All @@ -42,15 +70,15 @@
height: .5rem;
pointer-events: none;
position: absolute;
right: 1.5em;
right: 2em;
top: 50%;
transform: translateY(-60%) rotate(45deg);
width: .5rem;
}

.Accordion-trigger:focus .Accordion-icon,
.Accordion-trigger:hover .Accordion-icon {
border-color: hsl(0, 0%, 13%);
border-color: hsl(216, 94%, 73%);
}

.Accordion-trigger[aria-expanded="true"] .Accordion-icon {
Expand All @@ -67,6 +95,10 @@
display: none;
}

button {
border-style: none;
}

fieldset {
border: 0;
margin: 0;
Expand Down
Loading