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

Issue #158 Add Optional Keyboard Commands to Accordion Example #397

Merged
merged 1 commit into from
Jun 18, 2017
Merged

Issue #158 Add Optional Keyboard Commands to Accordion Example #397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
115 changes: 85 additions & 30 deletions examples/accordion/accordion.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@

<!-- js and css for this example. -->
<link rel="stylesheet" type="text/css" href="css/accordion.css" />
<script type="text/javascript" src="js/helpers.js"></script>
<script type="text/javascript" src="js/setup.js"></script>

</head>
<body>
Expand All @@ -25,34 +23,47 @@ <h1>Accordion Example</h1>
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. This example does not implement any of the optional keystrokes included in the accordion pattern.
be expanded at a time.
</p>
<section>
<h2 id="ex_label">Example</h2>
<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">
<dl id="accordionGroup" role="presentation" class="accordion">
<dt role="heading" aria-level="3" class="clearfix">
<a role="button" aria-expanded="false" href="#" class="accAccordion"
aria-controls="sect1" data-defaultopen="true" id="accordion1id"
<!-- Accordion Configuration Options

data-allow-toggle
Allow for each toggle to both open and close individually

data-allow-multiple
Allow for multiple accordion sections to be expanded at the same time
__________

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

-->
<dl id="accordionGroup" role="presentation" class="Accordion">
<dt role="heading" aria-level="3">
<button aria-expanded="true" class="Accordion-trigger"
aria-controls="sect1" id="accordion1id"
>
<span class="icon"></span><span class="lbl">Personal Information</span>
</a>
<span class="Accordion-title">Personal Information</span><span class="Accordion-icon"></span>
</button>
</dt>
<dd id="sect1" role="region" aria-labelledby="accordion1id" class="hidden">
<dd 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 class="contact flex">
<fieldset>
<p>
<label for="cufc1">Name<span class="cRed">*</span>:</label>
<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 class="cRed">*</span>:</label>
<input type="text" value="" name="Email" id="cufc2" class="required"
<label for="cufc2">Email<span aria-hidden="true">*</span>:</label>
<input type="text" value="" name="Email" id="cufc2"
aria-required="true"
>
</p>
Expand All @@ -75,14 +86,14 @@ <h2 id="ex_label">Example</h2>
</fieldset>
</div>
</dd>
<dt role="heading" aria-level="3" class="clearfix">
<a role="button" aria-expanded="false" href="#" class="accAccordion"
<dt role="heading" aria-level="3">
<button aria-expanded="false" class="Accordion-trigger"
aria-controls="sect2" id="accordion2id"
>
<span class="icon"></span><span class="lbl">Billing Address</span>
</a>
<span class="Accordion-title">Billing Address</span><span class="Accordion-icon"></span>
</button>
</dt>
<dd id="sect2" role="region" aria-labelledby="accordion2id" class="hidden">
<dd id="sect2" role="region" aria-labelledby="accordion2id" class="Accordion-panel" hidden>
<div>
<fieldset class="billing flex">
<p>
Expand All @@ -108,16 +119,16 @@ <h2 id="ex_label">Example</h2>
</fieldset>
</div>
</dd>
<dt role="heading" aria-level="3" class="clearfix">
<a role="button" aria-expanded="false" href="#" class="accAccordion"
<dt role="heading" aria-level="3">
<button aria-expanded="false" class="Accordion-trigger"
aria-controls="sect3" id="accordion3id"
>
<span class="icon"></span><span class="lbl">Shipping Address</span>
</a>
<span class="Accordion-title">Shipping Address</span><span class="Accordion-icon"></span>
</button>
</dt>
<dd id="sect3" role="region" aria-labelledby="accordion3id" class="hidden">
<dd id="sect3" role="region" aria-labelledby="accordion3id" class="Accordion-panel" hidden>
<div>
<fieldset class="shipping flex">
<fieldset>
<p>
<label for="m-add1">Address 1:</label>
<input type="text" name="m-add1" id="m-add1" />
Expand Down Expand Up @@ -160,6 +171,51 @@ <h2 id="kbd_label">Keyboard Support</h2>
<th><kbd>Space</kbd> or <kbd>Enter</kbd></th>
<td>When focus is on the accordion header of a collapsed section, expands the section.</td>
</tr>
<tr>
<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>
<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>
<th><kbd>Home</kbd></th>
<td>When focus is on an accordion header, moves focus to the first accordion header.</td>
</tr>
<tr>
<th><kbd>End</kbd></th>
<td>When focus is on an accordion header, moves focus to the last accordion header.</td>
</tr>
<tr>
<th><kbd>Control + Page Down</kbd></th>
<td>
<ul>
<li>When focus is inside an accordion panel or on an accordion header, moves focus to the next accordion header.</li>
<li>When focus is on last accordion header or inside last accordion panel, moves focus to first accordion header.</li>
</ul>
</td>
</tr>
<tr>
<th><kbd>Control + Page Up</kbd></th>
<td>
<ul>
<li>When focus is inside an accordion panel, moves focus to the header for that panel.</li>
<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>
</tbody>
</table>
</section>
Expand Down Expand Up @@ -267,18 +323,15 @@ <h2>Javascript and CSS Source Code</h2>
CSS:
<ol>
<li>
<a href="css/customize.css" type="tex/css">customize.css</a>
<a href="css/accordion.css" type="tex/css">accordion.css</a>
</li>
</ol>
</li>
<li>
JavaScript:
<ol>
<li>
<a href="js/helpers.js" type="text/javascript">helpers.js</a>
</li>
<li>
<a href="js/setup.js" type="text/javascript">setup.js</a>
<a href="js/accordion.js" type="text/javascript">accordion.js</a>
</li>
</ol>
</li>
Expand All @@ -300,5 +353,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
<nav>
<a href="../../#accordion">Accordion Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
</nav>

<script src="js/accordion.js"></script>
</body>
</html>
119 changes: 49 additions & 70 deletions examples/accordion/css/accordion.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,92 +1,71 @@
/* Contains the accordion elements */
.accordion {
border: 1px solid hsl(0, 0%, 82%);
border-radius: .3em;
box-shadow: 0 1px 2px hsl(0, 0%, 82%);
.Accordion {
border: 1px solid hsl(0, 0%, 82%);
border-radius: .3em;
box-shadow: 0 1px 2px hsl(0, 0%, 82%);
}

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

/* Heading containing accordion button */
.accordion dt[role="heading"] {

}

.accordion dt[role="heading"]:first-of-type > [role="button"] {
border-radius: .3em .3em 0 0;
}

.accordion dt[role="heading"]:last-of-type > [role="button"] {
border-radius: 0 0 .3em .3em;
}

.accordion dt[role="heading"]:last-of-type > [role="button"][aria-expanded="true"] {
border-radius: 0;
}

/* Accordion button */
.accordion dt > [role="button"] {
display: block;
position: relative;
margin: 0;
padding: 1em 1.5em;
border-bottom: 0;
color: hsl(0, 0%, 13%);
font-weight: normal;
.Accordion-trigger {
background: none;
border: 0;
color: hsl(0, 0%, 13%);
display: block;
font-size: 1rem;
font-weight: normal;
margin: 0;
padding: 1em 1.5em;
position: relative;
text-align: left;
width: 100%;
}

.accordion dt > [role="button"]:hover,
.accordion dt > [role="button"]:focus {
margin: inherit;
background: hsl(0, 0%, 93%);
.Accordion dt:first-child .Accordion-trigger {
border-radius: .3em .3em 0 0;
}

/* Accordion button icon */
.accordion dt > [role="button"] .icon {
position: absolute;
top: 50%;
right: 1.5em;
transform: translateY(-60%) rotate(45deg);
width: 8px;
height: 8px;
border: solid hsl(0, 0%, 62%);
border-width: 0 2px 2px 0;
.Accordion-trigger:focus,
.Accordion-trigger:hover {
background: hsl(0, 0%, 93%);
}

.accordion dt > [role="button"][aria-expanded="true"] .icon {
transform: translateY(-50%) rotate(-135deg);
.Accordion-icon {
border: solid hsl(0, 0%, 62%);
border-width: 0 2px 2px 0;
height: .5rem;
position: absolute;
right: 1.5em;
top: 50%;
transform: translateY(-60%) rotate(45deg);
width: .5rem;
}

.accordion dt > [role="button"]:hover .icon,
.accordion dt > [role="button"]:focus .icon {
border-color: hsl(0, 0%, 13%);
.Accordion-trigger:focus .Accordion-icon,
.Accordion-trigger:hover .Accordion-icon {
border-color: hsl(0, 0%, 13%);
}

/* Accordion panel */
.accordion dd[role="region"] {
margin: 0;
padding: 1em 1.5em;
/*border: solid hsl(0, 0%, 82%);
border-width: 0 1px;*/
.Accordion-trigger[aria-expanded="true"] .Accordion-icon {
transform: translateY(-50%) rotate(-135deg);
}

.accordion dd[role="region"].hidden {
display: none;
.Accordion-panel {
margin: 0;
padding: 1em 1.5em;
}

/* Basic stuff */
fieldset {
border: 0;
margin: 0;
padding: 0;
border: 0;
margin: 0;
padding: 0;
}

input[type="text"] {
display: block;
padding: .3em .5em;
border: 1px solid hsl(0, 0%, 62%);
border-radius: .3em;
font-size: inherit;
input {
border: 1px solid hsl(0, 0%, 62%);
border-radius: .3em;
display: block;
font-size: inherit;
padding: .3em .5em;
}
52 changes: 0 additions & 52 deletions examples/accordion/css/customize.css
View file
Open in desktop

This file was deleted.

Binary file removed examples/accordion/img/accordion/left.png
View file
Open in desktop
Binary file not shown.
Binary file removed examples/accordion/img/accordion/right.png
View file
Open in desktop
Binary file not shown.
Loading