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

Initial implementation of a Hide/show widget for showing a long description of a image and faq details #250

Merged
merged 40 commits into from
Jan 31, 2017
Merged

Initial implementation of a Hide/show widget for showing a long description of a image and faq details #250

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
3ff5785
updated button example
jongund Jan 13, 2017
41acdec
added files for hide-show button
jongund Jan 15, 2017
c48df39
update hide show with data
jongund Jan 16, 2017
f941dba
update hide/show example
jongund Jan 17, 2017
5ac6937
updated JS for hide show
jongund Jan 17, 2017
b564585
updated data table
jongund Jan 23, 2017
c5d2ba3
update
jongund Jan 23, 2017
6989887
update
jongund Jan 23, 2017
0cb5edf
update table
jongund Jan 23, 2017
f07f87d
update
jongund Jan 23, 2017
56de6f7
Fix jscs error in button example
mcking65 Jan 23, 2017
42e044a
Merge pull request #235 from jongund/button
mcking65 Jan 23, 2017
79697b7
Revise example title
mcking65 Jan 24, 2017
5a5f331
modified: examples/hide-show/hide-show-1/hide-show-1.html:
mcking65 Jan 24, 2017
a50306d
Added Disclosure Design Pattern Placeholder
mcking65 Jan 24, 2017
dce9894
Modified examples/hide-show/hide-show-1/hide-show-1.html:
mcking65 Jan 24, 2017
74fb4d8
Added link to issue 244
mcking65 Jan 25, 2017
dedd4b9
added files for hide-show button
jongund Jan 15, 2017
a3b4948
update hide show with data
jongund Jan 16, 2017
d13f2e5
update hide/show example
jongund Jan 17, 2017
307ed25
updated JS for hide show
jongund Jan 17, 2017
75335ba
updated data table
jongund Jan 23, 2017
4786a57
update
jongund Jan 23, 2017
7a279b1
update
jongund Jan 23, 2017
650493a
update table
jongund Jan 23, 2017
532ae1e
update
jongund Jan 23, 2017
7e834da
Update disclosure examples
jongund Jan 26, 2017
eb45c44
Merge remote-tracking branch 'origin/hide-show' into hide-show
jongund Jan 26, 2017
7c8178f
update
jongund Jan 26, 2017
0936269
updated focus styling of button using underline
jongund Jan 26, 2017
aafcf6d
added links between examples
jongund Jan 26, 2017
6e58e05
update documentation on tab index being added by Javascript
jongund Jan 26, 2017
ce335a2
bug in documentation
jongund Jan 26, 2017
c9ee253
fixed problems with links and removed return key support
jongund Jan 27, 2017
c20dedb
added RETURN back into the design pattern
jongund Jan 27, 2017
f569900
updated keyboard documentation
jongund Jan 29, 2017
0b4f5fd
modified examples/disclosure/disclosure-img-long-description.html:
mcking65 Jan 30, 2017
9875dfc
Complete initial draft of long description disclosure example
mcking65 Jan 30, 2017
769495a
Initial draft of FAQ disclosure for issue #244
mcking65 Jan 31, 2017
e9576ad
Removed original hide-show directory and content
mcking65 Jan 31, 2017
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
17 changes: 17 additions & 0 deletions examples/hide-show/hide-show-1/css/hideShow1.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
[role="button"]:hover,
[role="button"]:focus {
background-color: #eee;
cursor: default;
}

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

[role="button"][aria-expanded="false"]:before {
content: "+";
}

[role="button"][aria-expanded="true"]:before {
content: "-";
}
344 changes: 344 additions & 0 deletions examples/hide-show/hide-show-1/hide-show-1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,344 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Disclosure (Show/Hide) Example | 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/hideShow1.css" rel="stylesheet">
<script src="js/buttonExpanded.js" type="text/javascript"></script>

</head>
<body>
<main>
<h1>Disclosure (Show/Hide) Example</h1>
<p>
Development of this example is tracked in
<a href="https://github.com/w3c/aria-practices/issues/244">issue 244.</a>
</p>
<p>
The following example demonstrates using the
<a href="../../../#disclosure">disclosure design pattern</a>
to provide a way of revealing a table of data that complements an image.
</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="ex1">
<img src="images/minard.png" aria-labelledby="id_short_desc" />
Charles Minard's 1869 chart showing the number of men in Napoleon’s 1812 Russian campaign
army, their movements, as well as the temperature they encountered on the return path (
<span
id="id_short_desc" tabindex="0" role="button" aria-expanded="true"
aria-controls="id_long_desc"
> chart details </span> ).
<div id="id_long_desc">
<h2 id="id_data_label">Data for Charles Minars's Chart of Naploean's Invasion of Russia</h2>
<table aria-labelledby="id_data_label">
<thead>
<tr>
<th scope="col">Location</th>
<th scope="col">Approximate Date</th>
<th scope="col">Size of Army</th>
<th scope="col">Tempature C</th>
<th scope="col">Tempature F</th>
<th scope="col">Direction</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Kowno River</th>
<td>June 24th</td>
<td>442,000</td>
<td>na</td>
<td>na</td>
<td>Advance</td>
</tr>
<tr>
<th scope="row">Wilna</th>
<td>June 30th</td>
<td>400,000</td>
<td>na</td>
<td>na</td>
<td>Advance</td>
</tr>
<tr>
<th scope="row">Witebsk</th>
<td>na</td>
<td>175,000</td>
<td>na</td>
<td>na</td>
<td>Advance</td>
</tr>
<tr>
<th scope="row">Smolensk</th>
<td>August 16th</td>
<td>145,000</td>
<td>na</td>
<td>na</td>
<td>Advance</td>
</tr>
<tr>
<th scope="row">Chjat</th>
<td>na</td>
<td>127,000</td>
<td>na</td>
<td>na</td>
<td>Advance</td>
</tr>
<tr>
<th scope="row">Mojaisk</th>
<td>September 7th</td>
<td>100,000</td>
<td>na</td>
<td>na</td>
<td>Advance</td>
</tr>
<tr>
<th scope="row">Moscow</th>
<td>September 14th</td>
<td>100,000</td>
<td>na</td>
<td>na</td>
<td>Advance</td>
</tr>
<tr>
<th scope="row">Malo-jarosewli</th>
<td>October 18th</td>
<td>96,000</td>
<td>0</td>
<td>32</td>
<td>Retreat</td>
</tr>
<tr>
<th scope="row">Mojaisk</th>
<td>October 24th</td>
<td>87,000</td>
<td>0</td>
<td>32</td>
<td>Retreat</td>
</tr>
<tr>
<th scope="row">Wirma</th>
<td>na</td>
<td>55,000</td>
<td>na</td>
<td>na</td>
<td>Retreat</td>
</tr>
<tr>
<th scope="row">Smolensk</th>
<td>November 14th</td>
<td>37,000</td>
<td>-26</td>
<td>-13</td>
<td>Retreat</td>
</tr>
<tr>
<th scope="row">Orscha</th>
<td>na</td>
<td>24,000</td>
<td>na</td>
<td>na</td>
<td>Retreat</td>
</tr>
<tr>
<th scope="row">Botr</th>
<td>na</td>
<td>20,000</td>
<td>-14</td>
<td>-7</td>
<td>Retreat</td>
</tr>
<tr>
<th scope="row">Studienska (reinforcements arrive)</th>
<td>December 1st</td>
<td>50,000</td>
<td>-25</td>
<td>-13</td>
<td>Retreat</td>
</tr>
<tr>
<th scope="row">Minsk</th>
<td>December 1st</td>
<td>28,000</td>
<td>-30</td>
<td>-22</td>
<td>Retreat</td>
</tr>
<tr>
<th scope="row">Moloderno</th>
<td>December 6th</td>
<td>28,000</td>
<td>-38</td>
<td>-34</td>
<td>Retreat</td>
</tr>
<tr>
<th scope="row">Smorgeni</th>
<td>December 7th</td>
<td>12,000</td>
<td>-33</td>
<td>-27</td>
<td>Retreat</td>
</tr>
<tr>
<th scope="row">Wilna
</td>
<td>na
</th>
<td>8,000</td>
<td>na</td>
<td>na</td>
<td>Retreat</td>
</tr>
<tr>
<th scope="row">Kowno (reinforcements arrive)</th>
<td>December 14th</td>
<td>10,000</td>
<td>na</td>
<td>na</td>
<td>Retreat</td>
</tr>
</tbody>
</table>
</div>
</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>
<ul>
<li>Moves keyboard focus to the checkbox.</li>
</ul>
</td>
</tr>
<tr>
<th><kbd>Space</kbd>, <br/> or <kbd>Enter</kbd></th>
<td>
<ul>
<li>Toggle the checkbox between expanded and not expanded.</li>
</ul>
</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>
<ul>
<li>The <code>role=&quot;button&quot;</code> attribute identifies the <code>div</code> element as a ARIA <code>button</code>.</li>
<li>The accessible name comes the ???.</li>
<li>The <code>button</code> widget needs a <code>tabindex=&quot;0&quot;</code> value.</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>tabindex=&quot;0&quot;</code></th>
<td><code>span</code></td>
<td>
<ul>
<li>The <code>span[&quot;button&quot;]</code> is identified as an interactive element and is added to the tab order of the page by setting the <code>tabindex=&quot;0&quot;</code>.</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-controls=&quot;[IDREFS]&quot;</code></th>
<td><code>span</code></td>
<td>
<ul>
<li>The <code>IDREF</code> identifies the container of the content to hide and show.</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-expanded=&quot;false&quot;</code></th>
<td><code>div</code></td>
<td>
<ul>
<li>Indentifies the <code>button</code> button as <em>hiding</em> content identified with <code>aria-controls</code> property.</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 CSS <code>:before</code> psuedo selector and the <code>content</code> property are used to indcate visual state of "expanded" to support high contrast setting in 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>Indentifies the <code>button</code> button as <em>showing</em> content identified with <code>aria-controls</code> property.</li>
<li>CSS attribute selectors (e.g. <code>[aria-checked=&quot;true&quot;]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
<li>The CSS <code>:before</code> psuedo selector and the <code>content</code> property are used to indcate visual state of "checked" to support high contrast setting in 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/hideShow1.css" type="tex/css">hideShow1.css</a>
</li>
<li>Javascript: <a href="js/buttonExpanded.js" type="text/javascript">buttonExpanded.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>
<pre id="sc1"></pre>
<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>
Binary file added examples/hide-show/hide-show-1/images/collapsed-16.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/hide-show/hide-show-1/images/expanded-16.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/hide-show/hide-show-1/images/minard.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading