Skip to content

Commit

Permalink
Initial implementation of two disclosure examples for issue #244
Browse files Browse the repository at this point in the history 
Adds two disclosure pattern examples. One for an image long description and one for answers in an FAQ.
  • Loading branch information
@jongund @mcking65
jongund authored and mcking65 committed Jan 31, 2017
1 parent a9b91bd commit b930590
Show file tree
Hide file tree
Showing 6 changed files with 810 additions and 0 deletions.
38 changes: 38 additions & 0 deletions examples/disclosure/css/disclosure-faq.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
[role="button"]:hover,
[role="button"]:focus {
background-color: #eee;
text-decoration: underline;
}

[role="button"]:active {
background-color: #bbb;
}

[role="button"][aria-expanded="false"]:before {
content: "\0025BA \0000A0";
color: #630;

}

[role="button"][aria-expanded="true"]:before {
content: "\0025BC \0000A0";
color: #630;
}

dl.faq dt {
margin: 0;
padding: 0;
margin-top: 0.5em;
font-weight: bold;
font-size: 110%;
}


dl.faq dd {
margin: 0;
padding: 0;
margin-top: 0.25em;
margin-left: 1.5em;
font-size: 110%;
display: none;
}
19 changes: 19 additions & 0 deletions examples/disclosure/css/disclosure-img-long-description.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
[role="button"]:hover,
[role="button"]:focus {
background-color: #eee;
text-decoration: underline;
}

[role="button"]:active {
background-color: #bbb;
}

[role="button"][aria-expanded="false"]:before {
content: "\0025BA";
color: #630;
}

[role="button"][aria-expanded="true"]:before {
content: "\0025BC";
color: #630;
}
239 changes: 239 additions & 0 deletions examples/disclosure/disclosure-faq.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Disclosure (Show/Hide) of Answers to Frequently Asked Questions | WAI-ARIA Authoring
Practices 1.1</title>
<meta name="generator" content="BBEdit 10.5" />
<link href="../css/core.css" rel="stylesheet">
<link href="../css/table.css" rel="stylesheet">
<script src="../js/examples.js" type="text/javascript"></script>

<link href="css/disclosure-faq.css" rel="stylesheet">
<script src="js/disclosureButton.js" type="text/javascript"></script>

</head>
<body>
<main>
<h1>Disclosure (Show/Hide) of Answers to Frequently Asked Questions</h1>
<p>
Please provide feedback on this example in
<a href="https://github.com/w3c/aria-practices/issues/265">issue 265.</a>
</p>
<p>
The following example demonstrates using the
<a href="../../#disclosure">disclosure design pattern</a>
to create a set of frequently asked questions where the answers may be independently shown or hidden.
</p>
<p>Similar examples include:</p>
<ul>
<li>
<a href="disclosure-img-long-description.html">Disclosure (Show/Hide) of an Image
Description</a>
</li>
</ul>
<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="ex1">
<dl class="faq">
<dt role="button" aria-expanded="false" aria-controls="faq1_desc">What do I do if I
have a permit for an assigned lot, but can't find a space there?</dt>
<dd id="faq1_desc">Park at the nearest available parking meter without paying the meter
and call 999-999-9999 to report the problem. We will note and approve your alternate
location and will investigate the cause of the shortage in your assigned facility.</dd>

<dt role="button" aria-expanded="false" aria-controls="faq2_desc">What do I do if I
lose my permit or if my permit is stolen?</dt>
<dd id="faq2_desc">You should come to the Parking office and report the loss. There is
a fee to replace your lost permit. However, if your permit was stolen, a copy of a police
report needs to be submitted along with a stolen parking permit form for a fee replacement
exemption.</dd>

<dt role="button" aria-expanded="false" aria-controls="faq3_desc">Is there free parking
on holidays?</dt>
<dd id="faq3_desc">All facilities are restricted from 2:00 am - 6:00 am on all days. No
exceptions are made for any holiday or recess except those officially listed as a
”Holidays” in the calendar. Please note: 24-hour rental spaces, 24-hour rental lots, and
disabled parking is enforced at all times.</dd>

<dt role="button" aria-expanded="false" aria-controls="faq4_desc">Do all parking
facilities have the same enforcement rules?</dt>
<dd id="faq4_desc">Some parking facility restrictions differ from others. Be sure to
take note of the signs at each lot entrance.</dd>

</dl>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>
<section>
<h2 id="kbd_label">Keyboard Support</h2>
<table aria-labelledby="kbd_label">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<kbd>Tab</kbd>
</th>
<td>
Moves keyboard focus to the disclosure button.
</td>
</tr>
<tr>
<th>
<kbd>Space</kbd> or <br />
<kbd>Enter</kbd>
</th>
<td>
<li>
Activates the disclosure button,
which toggles the visibility of the answer to the question.
</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<table aria-labelledby="rps_label">
<thead>
<tr>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>button</code>
</th>
<td></td>
<td>
<code>span</code>
</td>
<td>
Identifies the <code>span</code> element as a <code>button</code>.
</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>tabindex=&quot;0&quot;</code>
</th>
<td>
<code>span</code>
</td>
<td>
Includes the <code>span</code> element in the tab sequence of the page.
</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>aria-controls=&quot;IDREF&quot;</code>
</th>
<td>
<code>span</code>
</td>
<td>
The disclosure button controls visibility of the container identified by the <code>IDREF</code> value.
</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>aria-expanded=&quot;false&quot;</code>
</th>
<td>
<code>span</code>
</td>
<td>
<ul>
<li>
Indicates that the container controlled by the disclosure button is <em>hidden </em>.
</li>
<li>
CSS attribute selectors (e.g. <code>[aria-expanded=&quot;false&quot;]</code>) are
used to synchronize the visual states with the value of the <code>aria-expanded</code>
attribute.
</li>
<li>
The visual indicator of the show/hide state is created using the CSS <code>:before</code> pseudo selector and the <code>content</code> property
so the image is reliably rendered in high contrast mode of operating systems and browsers.
</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>aria-expanded=&quot;true&quot;</code>
</th>
<td>
<code>span</code>
</td>
<td>
<ul>
<li>
Indicates that the container controlled by the disclosure button is <em>visible</em>.
</li>
<li>
CSS attribute selectors (e.g. <code>[aria-expanded=&quot;true&quot;]</code>) are
used to synchronize the visual states with the value of the <code>aria-expanded</code>
attribute.
</li>
<li>
The visual indicator of the show/hide state is created using the CSS <code>:before</code> pseudo selector and the <code>content</code> property
so the image is reliably rendered in high contrast mode of operating systems and browsers.
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2>Javascript and CSS Source Code</h2>
<!-- After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files. -->
<ul>
<li>
CSS:
<a href="css/disclosure-faq.css" type="tex/css">disclosure-faq.css</a>
</li>
<li>
Javascript:
<a href="js/disclosureButton.js" type="text/javascript">disclosureButton.js</a>
</li>
</ul>
</section>

<section>
<h2 id="sc1_label">HTML Source Code</h2>
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label"
aria-label="Start of"
></div>
<div id="sc1"></div>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label"
aria-label="End of"
></div>
<script>
sourceCode.add('sc1', 'ex1');
sourceCode.make();
</script>
</section>
</main>
<nav>
<a href="../../#disclosure">Disclosure (Show/Hide) Design Pattern in WAI-ARIA Authoring
Practices 1.1</a>
</nav>
</body>
</html>
Loading

0 comments on commit b930590

Please sign in to comment.