Skip to content

Commit

Permalink
Clean up button example code (pull #609)
Browse files Browse the repository at this point in the history 
In preparation for developing examples for tri-state toggle buttons (see issue #535).
* Fixes indentation issues in the markup
* Removing type="text/javascript" (some scripts have it, some don’t. I chose one.)
* Removed / in the meta charset tag (some examples have it, some don’t).
  • Loading branch information
@kleinfreund @mcking65
kleinfreund authored and mcking65 committed Jun 4, 2018
1 parent 125a659 commit e683226
Show file tree
Hide file tree
Showing 3 changed files with 170 additions and 158 deletions.
308 changes: 162 additions & 146 deletions examples/button/button.html
View file
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
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

0 comments on commit e683226

Please sign in to comment.