Skip to content

Commit

Permalink
Accordion Example: Restructure to use div instead of dl and impro…
Browse files Browse the repository at this point in the history 
…ve focus styling

To resolve issue w3c#815:
1. Replace `dl` with `div`
2. Replace `dt` with `h3`
3. Replace `dd` with `div`
4. Update documentation tables.

Also:
1. Improve visual focus styling so it is more apparent that arrow keys move focus from header to header.
2. Add accessibility features section that describes the focus styling.
  • Loading branch information
@mcking65
mcking65 authored and Valerie R Young committed Sep 27, 2018
1 parent 9d38848 commit bb0b367
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 98 deletions.
144 changes: 68 additions & 76 deletions examples/accordion/accordion.html
View file
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">
</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
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 {
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%);
}

.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

0 comments on commit bb0b367

Please sign in to comment.