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

Clean up button example code #609

Merged
merged 4 commits into from
Jun 4, 2018
Merged

Clean up button example code #609

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
20d3a95
Clean up button example code
Feb 21, 2018
32f4390
Revert the change that replaced th elements incorrectly
Apr 17, 2018
e7c83a2
Loosen selector so that kbd elements are always styled
Apr 17, 2018
b6fdfde
Revert core.css changes to original state
May 10, 2018
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
308 changes: 162 additions & 146 deletions examples/button/button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Button Examples | WAI-ARIA Authoring Practices 1.1</title>

<!-- Core js and css shared by all examples; do not modify when using this template. -->
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
<link rel="stylesheet" href="../css/core.css">
<script src="../js/examples.js" type="text/javascript"></script>
<script src="../js/highlight.pack.js"></script>
<script src="../js/app.js"></script>

<link href="css/button.css" rel="stylesheet">
<script src="js/button.js" type="text/javascript"></script>
<meta charset="utf-8">
<title>Button Examples | WAI-ARIA Authoring Practices 1.1</title>

<!-- Core JS and CSS shared by all examples. Do not modify when using this template. -->
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
<link rel="stylesheet" href="../css/core.css">
<script src="../js/examples.js"></script>
<script src="../js/highlight.pack.js"></script>
<script src="../js/app.js"></script>

<!-- CSS and JS for this example. -->
<link rel="stylesheet" href="css/button.css">
<script src="js/button.js"></script>
</head>
<body>
<nav aria-label="Related Links" class="feedback">
Expand All @@ -23,149 +24,164 @@
<li><a href="../../#button">Design Pattern</a></li>
</ul>
</nav>

<main>
<h1>Button Examples</h1>

<p>
The following command and toggle button examples demonstrate the
<a href="../../#button">button design pattern.</a>
The following command and toggle button examples demonstrate the <a href="../../#button">button design pattern.</a>
</p>

<p>Similar examples include:</p>

<ul>
<li><a href="../menu-button/menu-button-links.html">Navigation Menu Button</a>: A button that opens a menu of items that behave as links.</li>
<li><a href="../menu-button/menu-button-actions.html">Action Menu Button Example Using element.focus()</a>: A button that opens a menu of actions or commands where focus in the menu is managed using <code>element.focus()</code>.</li>
<li><a href="../menu-button/menu-button-actions-active-descendant.html">Action Menu Button Example Using aria-activedescendant</a>: A button that opens a menu of actions or commands where focus in the menu is managed using aria-activedescendant.</li>
<li><a href="../menu-button/menu-button-actions.html">Action Menu Button Example Using <code>element.focus()</code></a>: A button that opens a menu of actions or commands where focus in the menu is managed using <code>element.focus()</code>.</li>
<li><a href="../menu-button/menu-button-actions-active-descendant.html">Action Menu Button Example Using <code>aria-activedescendant</code></a>: A button that opens a menu of actions or commands where focus in the menu is managed using <code>aria-activedescendant</code>.</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="example">
<p>This <q>Print</q> action button uses a <code>div</code> element.</p>
<div tabindex="0" role="button" id="action">Print Page</div>
<p>This <q>Mute</q> toggle button uses an <code>a</code> element.</p>
<a tabindex="0" role="button" id="toggle" aria-pressed="false">
Mute
<svg aria-hidden="true">
<use xlink:href="images/mute.svg#icon-sound"></use>
</svg>
</a>
</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" class="def">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<th><kbd>Enter</kbd></th>
<td>Activates the button.</td>
</tr>
<tr>
<th><kbd>Space</kbd></th>
<td>Activates the button.</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<table aria-labelledby="rps_label" class="data attributes">
<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>div</code>, <code>a</code>
</td>
<td>
<ul>
<li>Identifies the element as a <code>button</code> widget.</li>
<li> Accessible name for the button is defined by the text content of the element.</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>tabindex=&quot;0&quot;</code>
</th>
<td>
<code>div</code>, <code>a</code>
</td>
<td>
<ul>
<li>Includes the element in the tab sequence.</li>
<li>Needed on the <code>a</code> element because it does not have a <code>href</code> attribute.</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-pressed=&quot;false&quot;</code></th>
<td><code>a</code></td>
<td>
<ul>
<li>Identifies the button as a toggle button.</li>
<li>Indicates the toggle button is not pressed.</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-pressed=&quot;true&quot;</code></th>
<td><code>a</code></td>
<td>
<ul>
<li>Identifies the button as a toggle button.</li>
<li>Indicates the toggle button is pressed.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<li>
CSS:
<a href="css/button.css" type="tex/css">button.css</a>
</li>
<li>
Javascript:
<a href="js/button.js" type="text/javascript">button.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><code id="source1"></code></pre>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<script>
sourceCode.add('source1', 'example');
sourceCode.make();
</script>
</section>

<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="example">
<p>This <q>Print</q> action button uses a <code>div</code> element.</p>
<div tabindex="0" role="button" id="action">Print Page</div>

<p>This <q>Mute</q> toggle button uses an <code>a</code> element.</p>
<a tabindex="0" role="button" id="toggle" aria-pressed="false">
Mute
<svg aria-hidden="true">
<use xlink:href="images/mute.svg#icon-sound"></use>
</svg>
</a>
</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" class="def">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<th><kbd>Enter</kbd></th>
<td>Activates the button.</td>
</tr>
<tr>
<th><kbd>Space</kbd></th>
<td>Activates the button.</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>

<table aria-labelledby="rps_label" class="data attributes">
<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>div</code>, <code>a</code>
</td>
<td>
<ul>
<li>Identifies the element as a <code>button</code> widget.</li>
<li>Accessible name for the button is defined by the text content of the element.</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>tabindex=&quot;0&quot;</code>
</th>
<td>
<code>div</code>, <code>a</code>
</td>
<td>
<ul>
<li>Includes the element in the tab sequence.</li>
<li>Needed on the <code>a</code> element because it does not have a <code>href</code> attribute.</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-pressed=&quot;false&quot;</code></th>
<td><code>a</code></td>
<td>
<ul>
<li>Identifies the button as a toggle button.</li>
<li>Indicates the toggle button is not pressed.</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-pressed=&quot;true&quot;</code></th>
<td><code>a</code></td>
<td>
<ul>
<li>Identifies the button as a toggle button.</li>
<li>Indicates the toggle button is pressed.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2>Javascript and CSS Source Code</h2>

<ul>
<li>
CSS:
<a href="css/button.css" type="text/css">button.css</a>
</li>
<li>
Javascript:
<a href="js/button.js" type="text/javascript">button.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><code id="source1"></code></pre>

<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>

<script>
sourceCode.add('source1', 'example');
sourceCode.make();
</script>
</section>
</main>

<nav>
<a href="../../#button">Button Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
</nav>
Expand Down
19 changes: 8 additions & 11 deletions examples/button/css/button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,17 @@
border: 1px solid hsl(213, 71%, 49%);
border-radius: 5px;
box-shadow: 0 1px 2px hsl(216, 27%, 55%);
overflow: visible;
color: #fff;
text-shadow: 0 -1px 1px hsl(216, 27%, 25%);
background: hsl(216, 82%, 51%);
background-color: hsl(216, 82%, 51%);
background-image: linear-gradient(to bottom, hsl(216, 82%, 53%), hsl(216, 82%, 47%));
}

[role="button"]:hover {
border-color: hsl(213, 71%, 29%);
background: hsl(216, 82%, 31%);
background-color: hsl(216, 82%, 31%);
background-image: linear-gradient(to bottom, hsl(216, 82%, 33%), hsl(216, 82%, 27%));
cursor: default;
outline: none;
cursor: default;
}

[role="button"]:focus {
Expand All @@ -40,7 +38,7 @@

[role="button"]:active {
border-color: hsl(213, 71%, 49%);
background: hsl(216, 82%, 31%);
background-color: hsl(216, 82%, 31%);
background-image: linear-gradient(to bottom, hsl(216, 82%, 53%), hsl(216, 82%, 47%));
box-shadow: inset 0 3px 5px 1px hsl(216, 82%, 30%);
}
Expand All @@ -49,29 +47,28 @@
border-color: hsl(261, 71%, 49%);
box-shadow: 0 1px 2px hsl(261, 27%, 55%);
text-shadow: 0 -1px 1px hsl(261, 27%, 25%);
background: hsl(261, 82%, 51%);
background-color: hsl(261, 82%, 51%);
background-image: linear-gradient(to bottom, hsl(261, 82%, 53%), hsl(261, 82%, 47%));
}

[role="button"][aria-pressed]:hover {
border-color: hsl(261, 71%, 29%);
background: hsl(261, 82%, 31%);
background-color: hsl(261, 82%, 31%);
background-image: linear-gradient(to bottom, hsl(261, 82%, 33%), hsl(261, 82%, 27%));
cursor: default;
}

[role="button"][aria-pressed="true"] {
padding-top: .5em;
padding-bottom: .3em;
border-color: hsl(261, 71%, 49%);
background: hsl(261, 82%, 31%);
background-color: hsl(261, 82%, 31%);
background-image: linear-gradient(to bottom, hsl(261, 82%, 63%), hsl(261, 82%, 57%));
box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 30%);
}

[role="button"][aria-pressed="true"]:hover {
border-color: hsl(261, 71%, 49%);
background: hsl(261, 82%, 31%);
background-color: hsl(261, 82%, 31%);
background-image: linear-gradient(to bottom, hsl(261, 82%, 43%), hsl(261, 82%, 37%));
box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 20%);
}
Expand Down
Loading