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

Draft: Accordion example with checkbox to switch behaviors #1833

Closed
wants to merge 2 commits into from
Closed

Draft: Accordion example with checkbox to switch behaviors #1833

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
be3c1d7
update accordion example code, clean up styles, update docs to remove…
smhigley Mar 24, 2021
22c25d4
accordion group open behavior
smhigley Mar 24, 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
309 changes: 126 additions & 183 deletions examples/accordion/accordion.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,168 +29,145 @@ <h1>Accordion Example</h1>
<p>
The below example section contains a simple personal information input form divided into 3 sections
that demonstrates the
<a href="../../#accordion">design pattern for accordion.</a>
In this implementation, one panel of the accordion is always expanded, and only one panel may
be expanded at a time.
<a href="../../#accordion">design pattern for accordion</a>.
</p>

<h2>Example Usage Options</h2>
<p>
This example demonstrates two different accordion group behaviors.
The default behavior is to treat each accordion separately, and allow each to individually expand and collapse.
Check this checkbox to instead force exactly one accordion within the group to be open at all times.
</p>
<label for="arrow-behavior-switch">
<input type="checkbox" id="arrow-behavior-switch">
Force one accordion within the group to be open at a time.
</label>

<section>
<div class="example-header">
<h2 id="ex_label">Example</h2>
</div>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="coding-arena">
<div class="demo-block">
<!-- Accordion Configuration Options

data-allow-toggle
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 the toggle on open sections would be disabled.
__________

Ex:
<div id="accordionGroup" class="Accordion" data-allow-multiple>

<div id="accordionGroup" class="Accordion" data-allow-toggle>
-->
<div id="accordionGroup" class="Accordion">
<h3>
<button type="button" aria-expanded="true" class="Accordion-trigger"
aria-controls="sect1" id="accordion1id">
<span class="Accordion-title">
Personal Information
<span class="Accordion-icon"></span>
</span>
</button>
</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>
<p>
<label for="cufc1">Name<span aria-hidden="true">*</span>:</label>
<input type="text" value="" name="Name" id="cufc1" class="required"
aria-required="true"
>
</p>
<p>
<label for="cufc2">Email<span aria-hidden="true">*</span>:</label>
<input type="text" value="" name="Email" id="cufc2"
aria-required="true"
>
</p>
<p>
<label for="cufc3">Phone:</label>
<input type="text" value="" name="Phone" id="cufc3">
</p>
<p>
<label for="cufc4">Extension:</label>
<input type="text" value="" name="Ext" id="cufc4">
</p>
<p>
<label for="cufc5">Country:</label>
<input type="text" value="" name="Country" id="cufc5">
</p>
<p>
<label for="cufc6">City/Province:</label>
<input type="text" value="" name="City_Province" id="cufc6">
</p>
</fieldset>
</div>
<div id="ex1">
<div id="accordionGroup" class="accordion">
<h3>
<button type="button" aria-expanded="true" class="accordion-trigger"
aria-controls="sect1" id="accordion1id">
<span class="accordion-title">
Personal Information
<span class="accordion-icon"></span>
</span>
</button>
</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>
<p>
<label for="cufc1">Name<span aria-hidden="true">*</span>:</label>
<input type="text" value="" name="Name" id="cufc1" class="required"
aria-required="true"
>
</p>
<p>
<label for="cufc2">Email<span aria-hidden="true">*</span>:</label>
<input type="text" value="" name="Email" id="cufc2"
aria-required="true"
>
</p>
<p>
<label for="cufc3">Phone:</label>
<input type="text" value="" name="Phone" id="cufc3">
</p>
<p>
<label for="cufc4">Extension:</label>
<input type="text" value="" name="Ext" id="cufc4">
</p>
<p>
<label for="cufc5">Country:</label>
<input type="text" value="" name="Country" id="cufc5">
</p>
<p>
<label for="cufc6">City/Province:</label>
<input type="text" value="" name="City_Province" id="cufc6">
</p>
</fieldset>
</div>
<h3>
<button type="button" aria-expanded="false" class="Accordion-trigger"
aria-controls="sect2" id="accordion2id">
<span class="Accordion-title">
Billing Address
<span class="Accordion-icon"></span>
</span>
</button>
</h3>
<div id="sect2" role="region" aria-labelledby="accordion2id" class="Accordion-panel" hidden>
<div>
<fieldset>
<p>
<label for="b-add1">Address 1:</label>
<input type="text" name="b-add1" id="b-add1" />
</p>
<p>
<label for="b-add2">Address 2:</label>
<input type="text" name="b-add2" id="b-add2" />
</p>
<p>
<label for="b-city">City:</label>
<input type="text" name="b-city" id="b-city" />
</p>
<p>
<label for="b-state">State:</label>
<input type="text" name="b-state" id="b-state" />
</p>
<p>
<label for="b-zip">Zip Code:</label>
<input type="text" name="b-zip" id="b-zip" />
</p>
</fieldset>
</div>
</div>
<h3>
<button type="button" aria-expanded="false" class="accordion-trigger"
aria-controls="sect2" id="accordion2id">
<span class="accordion-title">
Billing Address
<span class="accordion-icon"></span>
</span>
</button>
</h3>
<div id="sect2" role="region" aria-labelledby="accordion2id" class="accordion-panel" hidden>
<div>
<fieldset>
<p>
<label for="b-add1">Address 1:</label>
<input type="text" name="b-add1" id="b-add1" />
</p>
<p>
<label for="b-add2">Address 2:</label>
<input type="text" name="b-add2" id="b-add2" />
</p>
<p>
<label for="b-city">City:</label>
<input type="text" name="b-city" id="b-city" />
</p>
<p>
<label for="b-state">State:</label>
<input type="text" name="b-state" id="b-state" />
</p>
<p>
<label for="b-zip">Zip Code:</label>
<input type="text" name="b-zip" id="b-zip" />
</p>
</fieldset>
</div>
<h3>
<button type="button" aria-expanded="false" class="Accordion-trigger"
aria-controls="sect3" id="accordion3id">
<span class="Accordion-title">
Shipping Address
<span class="Accordion-icon"></span>
</span>
</button>
</h3>
<div id="sect3" role="region" aria-labelledby="accordion3id" class="Accordion-panel" hidden>
<div>
<fieldset>
<p>
<label for="m-add1">Address 1:</label>
<input type="text" name="m-add1" id="m-add1" />
</p>
<p>
<label for="m-add2">Address 2:</label>
<input type="text" name="m-add2" id="m-add2" />
</p>
<p>
<label for="m-city">City:</label>
<input type="text" name="m-city" id="m-city" />
</p>
<p>
<label for="m-state">State:</label>
<input type="text" name="m-state" id="m-state" />
</p>
<p>
<label for="m-zip">Zip Code:</label>
<input type="text" name="m-zip" id="m-zip" />
</p>
</fieldset>
</div>
</div>
<h3>
<button type="button" aria-expanded="false" class="accordion-trigger"
aria-controls="sect3" id="accordion3id">
<span class="accordion-title">
Shipping Address
<span class="accordion-icon"></span>
</span>
</button>
</h3>
<div id="sect3" role="region" aria-labelledby="accordion3id" class="accordion-panel" hidden>
<div>
<fieldset>
<p>
<label for="m-add1">Address 1:</label>
<input type="text" name="m-add1" id="m-add1" />
</p>
<p>
<label for="m-add2">Address 2:</label>
<input type="text" name="m-add2" id="m-add2" />
</p>
<p>
<label for="m-city">City:</label>
<input type="text" name="m-city" id="m-city" />
</p>
<p>
<label for="m-state">State:</label>
<input type="text" name="m-state" id="m-state" />
</p>
<p>
<label for="m-zip">Zip Code:</label>
<input type="text" name="m-zip" id="m-zip" />
</p>
</fieldset>
</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 @@ -223,32 +200,6 @@ <h2 id="kbd_label">Keyboard Support</h2>
</ul>
</td>
</tr>
<tr data-test-id="key-down-arrow">
<th><kbd>Down Arrow</kbd></th>
<td>
<ul>
<li>When focus is on an accordion header, moves focus to the next accordion header.</li>
<li>When focus is on last accordion header, moves focus to first accordion header.</li>
</ul>
</td>
</tr>
<tr data-test-id="key-up-arrow">
<th><kbd>Up Arrow</kbd></th>
<td>
<ul>
<li>When focus is on an accordion header, moves focus to the previous accordion header.</li>
<li>When focus is on first accordion header, moves focus to last accordion header.</li>
</ul>
</td>
</tr>
<tr data-test-id="key-home">
<th><kbd>Home</kbd></th>
<td>When focus is on an accordion header, moves focus to the first accordion header.</td>
</tr>
<tr data-test-id="key-end">
<th><kbd>End</kbd></th>
<td>When focus is on an accordion header, moves focus to the last accordion header.</td>
</tr>
</tbody>
</table>
</section>
Expand Down Expand Up @@ -295,14 +246,6 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
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="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"><code>region</code></th>
<td></td>
Expand Down Expand Up @@ -339,7 +282,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
<pre><code id="sc1"></code></pre>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<script>
sourceCode.add('sc1', 'coding-arena', 'ex_label', 'css_js_files');
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
sourceCode.make();
</script>
</section>
Expand Down
Loading