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

Jump to bottom

New design for all example pages #296

Merged
merged 5 commits into from
Feb 18, 2017
Merged

New design for all example pages #296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e0ab6d6
New style for examples pages
Feb 18, 2017
eca4ef9
Correct breadcrumb links
Feb 18, 2017
ad8ea9d
New design for code example pages
Feb 18, 2017
c13017d
Small tweaks to code examples related to new design
Feb 18, 2017
e08981a
Internal page with links to all examples
Feb 18, 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
22 changes: 12 additions & 10 deletions examples/accordion/accordion1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Accordion Example | WAI-ARIA Authoring Practices 1.1</title>
<!-- Core js and css shared by all examples; do not modify when using this template. -->
<link href="../css/core.css" rel="stylesheet">
<link href="../css/table.css" rel="stylesheet">
<script src="../js/examples.js" type="text/javascript"></script>
<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>

<!-- js and css for this example. -->
<link rel="stylesheet" type="text/css" href="css/customize.css" />
Expand Down Expand Up @@ -146,7 +148,7 @@ <h2 id="ex_label">Example</h2>
</section>
<section>
<h2 id="kbd_label">Keyboard Support</h2>
<table aria-labelledby="kbd_label">
<table aria-labelledby="kbd_label" class="def">
<thead>
<tr>
<th>Key</th>
Expand All @@ -155,7 +157,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
</thead>
<tbody>
<tr>
<td><kbd>Space</kbd> or <kbd>Enter</kbd></td>
<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>
</tbody>
Expand All @@ -167,7 +169,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<!--
Update this table to describe how roles, properties, states, and tabindex are used in this example.
-->
<table aria-labelledby="rps_label">
<table aria-labelledby="rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
Expand Down Expand Up @@ -286,12 +288,12 @@ <h2>Javascript and CSS Source Code</h2>
<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>
<pre><code id="sc1"></code></pre>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<script>
sourceCode.add('sc1', 'coding-arena')
sourceCode.make()
</script>
sourceCode.add('sc1', 'coding-arena');
sourceCode.make();
</script>
</section>

</main>
Expand Down
9 changes: 6 additions & 3 deletions examples/alert/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,11 @@
<title>Alert Example | WAI-ARIA Authoring Practices 1.1</title>

<!-- Core js and css shared by all examples; do not modify when using this template. -->
<link href="../css/core.css" rel="stylesheet">
<link href="../css/table.css" rel="stylesheet">
<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>

<!-- js and css for this example. -->
<link href="css/alert.css" rel="stylesheet">
Expand Down Expand Up @@ -55,7 +58,7 @@ <h2 id="kbd_label">Keyboard Support</h2>

<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<table aria-labelledby="rps_label">
<table aria-labelledby="rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
Expand Down
21 changes: 2 additions & 19 deletions examples/breadcrumb/css/breadcrumb.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
nav.breadcrumb {
padding: 0.8em 1em;
border: 1px solid #f5f5f5;
border: 1px solid hsl(0, 0%, 90%);
border-radius: 4px;
background: #FCFBFC;
background: hsl(300, 14%, 97%);
}

nav.breadcrumb ol {
Expand All @@ -15,12 +15,6 @@ nav.breadcrumb li {
display: inline;
}

/*nav.breadcrumb li + li::before {
display: inline-block;
content: url('../images/slash.svg');
vertical-align: middle;
}*/

nav.breadcrumb li + li::before {
display: inline-block;
margin: 0 .25em;
Expand All @@ -30,17 +24,6 @@ nav.breadcrumb li + li::before {
content: '';
}

nav.breadcrumb a {
color: #2F72C8;
text-decoration: none;
}

nav.breadcrumb a:focus,
nav.breadcrumb a:hover {
text-decoration: underline;
background: transparent;
}

nav.breadcrumb [aria-current="page"] {
color: #000;
font-weight: 700;
Expand Down
14 changes: 9 additions & 5 deletions examples/breadcrumb/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,13 @@
<meta charset="utf-8" />
<title>Breadcrumb Example | WAI-ARIA Authoring Practices 1.1</title>

<link href="../css/core.css" rel="stylesheet">
<link href="../css/table.css" rel="stylesheet">
<script src="../js/examples.js" type="text/javascript"></script>
<!-- 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>

<link href="css/breadcrumb.css" rel="stylesheet">
</head>
<body>
Expand Down Expand Up @@ -61,7 +65,7 @@ <h2 id="kbd_label">Keyboard Support</h2>

<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<table aria-labelledby="rps_label">
<table aria-labelledby="rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
Expand Down Expand Up @@ -112,7 +116,7 @@ <h2>Javascript and CSS Source Code</h2>
<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>
<pre><code id="sc1"></code></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');
Expand Down
42 changes: 17 additions & 25 deletions examples/button/button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,16 @@
<head>
<meta charset="utf-8" />
<title>Button Examples | 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">

<!-- 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>

<link href="css/button.css" rel="stylesheet">
<script src="js/button.js" type="text/javascript"></script>
<style type="text/css">
#example h3 {
padding: 0;
margin: 0;
margin-top: 1em;
margin-bottom: 0.25em;
}
#example p {
padding: 0;
margin: 0;
margin-bottom: 0.5em;
}
</style>
</head>
<body>
<main>
Expand All @@ -38,21 +30,21 @@ <h1>Button Examples</h1>
<h3>Action Button</h3>
<p>Print button uses a <code>div</code> element.</p>
<div tabindex="0" role="button" id="action">Print Page</div>

<h3>Toggle Button</h3>
<p>Mute button uses a <code>a</code> element.</p>
<div>
<a tabindex="0" role="button" id="toggle" aria-pressed="false">Mute</a>
</div>

</div>
</section>
</div>
</section>


<section>
<h2 id="kbd_label">Keyboard Support</h2>

<table aria-labelledby="kbd_label">
<table aria-labelledby="kbd_label" class="def">
<thead>
<tr>
<th>Key</th>
Expand All @@ -71,7 +63,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
<section>
<h2 id="rps_label">ARIA Roles, Properties and States</h2>

<table aria-labelledby="rps_label">
<table aria-labelledby="rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
Expand Down Expand Up @@ -164,19 +156,19 @@ <h2>HTML Source Code</h2>

<h3 id="sc1_label">Action Button</h3>
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
<div id="source1"></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>

<h3 id="sc2_label">Toggle Button</h3>
<div role="separator" id="sc2_start_sep" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of"></div>
<div id="source2"></div>
<pre><code id="source2"></code></pre>
<div role="separator" id="sc2_end_sep" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of"></div>



<script>
sourceCode.add('source1', 'action')
sourceCode.add('source2', 'toggle')
sourceCode.add('source1', 'action');
sourceCode.add('source2', 'toggle');
sourceCode.make();
</script>
</section>
Expand Down
47 changes: 25 additions & 22 deletions examples/checkbox/checkbox-1/checkbox-1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,15 @@
<meta charset="utf-8" />
<title>Checkbox Example (Two State) | WAI-ARIA Authoring Practices 1.1</title>

<link href="../../css/core.css" rel="stylesheet">
<link href="../../css/table.css" rel="stylesheet">
<script src="../../js/examples.js" type="text/javascript"></script>

<!-- 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>

<link href="css/checkbox.css" rel="stylesheet">

<script src="js/checkbox.js" type="text/javascript"></script>
</head>
<body>
Expand Down Expand Up @@ -38,7 +41,7 @@ <h3>Sandwich Condiments</h3>
</div>

<script type="text/javascript">
window.onload=function() {
window.onload = function () {

var checkboxes = document.querySelectorAll('[role="checkbox"]');

Expand All @@ -47,18 +50,18 @@ <h3>Sandwich Condiments</h3>
cb.init();
}

}
};
</script>

</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">
<table aria-labelledby="kbd_label" class="def">
<thead>
<tr>
<th>Key</th>
Expand All @@ -71,24 +74,24 @@ <h2 id="kbd_label">Keyboard Support</h2>
<td>
<ul>
<li>Moves keyboard focus to the <code>checkbox</code>.</li>
</ul>
</ul>
</td>
</tr>
<tr>
<th><kbd>Space</kbd></th>
<td>
<ul>
<li>Toggle check checkbox between checked and unchecked.</li>
</ul>
<li>Toggle check checkbox between checked and unchecked.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section>

<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<table aria-labelledby="rps_label">
<table aria-labelledby="rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
Expand All @@ -107,7 +110,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<li>The <code>role=&quot;checkbox&quot;</code> attribute identifies the <code>div</code> element as a ARIA <code>checkbox</code>.</li>
<li>The accessible name comes the child text content of the <code>div[role=&quot;checkbox&quot;]</code> element.</li>
<li>The <code>checkbox</code> widget needs a <code>tabindex=&quot;0&quot;</code> value.</li>
</ul>
</ul>
</td>
</tr>
<tr>
Expand All @@ -117,7 +120,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<td>
<ul>
<li>The <code>div[&quot;checkbox&quot;]</code> is identified as an ineractive element and is added to the tab order of the page by setting the <code>tabindex=&quot;0&quot;</code>.</li>
</ul>
</ul>
</td>
</tr>
<tr>
Expand All @@ -129,7 +132,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<li>Indentifies the <code>checkbox</code> button as unchecked.</li>
<li>CSS attribute selectors (e.g. <code>[aria-checked=&quot;false&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 "unchecked" to support high contrast setting in operating systems and browsers.</li>
</ul>
</ul>
</td>
</tr>
<tr>
Expand All @@ -141,13 +144,13 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<li>Indentifies the <code>checkbox</code> as checked.</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>
</ul>
</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
Expand All @@ -164,15 +167,15 @@ <h2>Javascript and CSS Source Code</h2>
<h2>HTML Source Code</h2>
<h3 id="sc1_label">Simple Two-State Checkbox Example</h3>
<div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
<div id="sc1"></div>
<pre><code id="sc1"></code></pre>
<div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for"></div>

<script>
sourceCode.add('sc1', 'ex1');
sourceCode.make();
</script>
</section>
</main>
</main>
<nav>
<a href="../../../#checkbox">Checkbox Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
</nav>
Expand Down
Loading