Skip to content

Commit

Permalink
Six Example pages: Add "Open in codepen" button to (pull #1683)
Browse files Browse the repository at this point in the history 
Adds Open in CodePen button to the following example pages:
* accordion/accordion.html
* grid/LayoutGrids.html
* menu-button/menu-button-links.html
* grid/dataGrids.html
* listbox/listbox-rearrangeable.html
* listbox/listbox-collapsible.html
  • Loading branch information
@spectranaut
spectranaut committed Jan 17, 2021
1 parent 4dcb7df commit aea1acc
Show file tree
Hide file tree
Showing 9 changed files with 224 additions and 182 deletions.
8 changes: 5 additions & 3 deletions examples/accordion/accordion.html
View file
Expand Up @@ -34,7 +34,9 @@ <h1>Accordion Example</h1>
be expanded at a time.
</p>
<section>
<h2 id="ex_label">Example</h2>
<div class="example-header">
<h2 id="ex_label">Example</h2>
</div>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="coding-arena">
<div class="demo-block">
Expand Down Expand Up @@ -325,7 +327,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<ul id="css_js_files">
<li>CSS: <a href="css/accordion.css" type="tex/css">accordion.css</a></li>
<li>JavaScript: <a href="js/accordion.js" type="text/javascript">accordion.js</a></li>
</ul>
Expand All @@ -337,7 +339,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
<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.add('sc1', 'coding-arena', 'ex_label', 'css_js_files');
sourceCode.make();
</script>
</section>
Expand Down
26 changes: 16 additions & 10 deletions examples/grid/LayoutGrids.html
View file
Expand Up @@ -54,12 +54,14 @@ <h1>Layout Grid Examples</h1>
<section>
<h2>Examples</h2>
<section>
<h3 id="ex1_label">Example 1: Simple List of Links</h3>
<div class="example-header">
<h3 id="ex1_label">Example 1: Simple List of Links</h3>
</div>
<p>This example presents a list of links titled &quot;Related Documents&quot; in a grid. </p>
<div role="separator" id="ex1_start_sep" aria-labelledby="ex1_start_sep ex1_label" aria-label="Start of"></div>
<div id="ex1">
<h4 id="grid1_label">Related Documents</h4>
<div role="grid" class="list-links" aria-labelledby="grid1_label" data-wrap-cols="true" data-wrap-rows="true" data-restructure="true">
<div id="ex1-grid" role="grid" class="list-links" aria-labelledby="grid1_label" data-wrap-cols="true" data-wrap-rows="true" data-restructure="true">
<div role="row">
<span role="gridcell" class="list-link"><a tabindex="-1" href="http://www.w3.org/TR/wai-aria-1.1/">ARIA 1.1 Specification</a></span>
<span role="gridcell" class="list-link"><a tabindex="-1" href="https://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></span>
Expand Down Expand Up @@ -129,7 +131,9 @@ <h4>Notes</h4>
</ol>
</section>
<section>
<h3 id="ex2_label">Example 2: Pill List For a List of Message Recipients</h3>
<div class="example-header">
<h3 id="ex2_label">Example 2: Pill List For a List of Message Recipients</h3>
</div>
<p>
Add recipients by typing a string in the &quot;New Recipient Name&quot; field and pressing <kbd>Enter</kbd> or activating the &quot;Add&quot; button.
See how this grid behaves as the number of elements increases.
Expand All @@ -144,7 +148,7 @@ <h3 id="ex2_label">Example 2: Pill List For a List of Message Recipients</h3>
-->
<div class="recipient-list">
<span id="send_to_label">Send To:</span>
<div role="grid" class="pill-list" aria-labelledby="send_to_label" data-wrap-cols="true">
<div id="ex2-grid" role="grid" class="pill-list" aria-labelledby="send_to_label" data-wrap-cols="true">
<div role="row" class="pill-item" data-id="1">
<span role="gridcell"><a id="r1" class="pill-name" tabindex="-1" href="#">Recipient Name 1</a></span>
<span role="gridcell"><span id="rb1" class="pill-remove" tabindex="-1" role="button" aria-label="Remove" aria-labelledby="rb1 r1"> X </span></span>
Expand Down Expand Up @@ -184,7 +188,9 @@ <h4>Notes</h4>
</ol>
</section>
<section>
<h3 id="ex3_label">Example 3: Scrollable Search Results</h3>
<div class="example-header">
<h3 id="ex3_label">Example 3: Scrollable Search Results</h3>
</div>
<p>
This example demonstrates how a grid can make moving through an infinitely large data set as easy and efficient for keyboard users as it is for mouse users.
It presents a hypothetical set of search results for W3C resources about WAI-ARIA.
Expand All @@ -196,7 +202,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
Showing results <span id="ex3_start_index">1</span> to <span id="ex3_end_index">5</span> of 19
</div>

<div role="grid" aria-labelledby="ex3_search_results_label" aria-rowcount="19" data-per-page="5" data-wrap-cols="true">
<div id="ex3-grid" role="grid" aria-labelledby="ex3_search_results_label" aria-rowcount="19" data-per-page="5" data-wrap-cols="true">
<div role="row">
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/WAI/intro/aria">WAI-ARIA Overview
Expand Down Expand Up @@ -691,7 +697,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<ul id="css_js_files">
<li>CSS:
<ul>
<li><a href="css/layoutGrids.css" type="tex/css">layoutGrids.css</a></li>
Expand All @@ -713,19 +719,19 @@ <h3 id="sc1_label">Example 1: Simple List of Links</h3>
<div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></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')</script>
<script>sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files')</script>

<h3 id="sc2_label">Example 2: Pill List For Components Like a List of Message Recipients</h3>
<div id="sc2_start_sep" role="separator" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of HTML for"></div>
<pre><code id="sc2"></code></pre>
<div id="sc2_end_sep" role="separator" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of HTML for"></div>
<script>sourceCode.add('sc2', 'ex2')</script>
<script>sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files')</script>

<h3 id="sc3_label">Example 3: Scrollable Search Results</h3>
<div id="sc3_start_sep" role="separator" aria-labelledby="sc3_start_sep sc3_label" aria-label="Start of HTML for"></div>
<pre><code id="sc3"></code></pre>
<div id="sc3_end_sep" role="separator" aria-labelledby="sc3_end_sep sc3_label" aria-label="End of HTML for"></div>
<script>sourceCode.add('sc3', 'ex3') </script>
<script>sourceCode.add('sc3', 'ex3', 'ex3_label', 'css_js_files') </script>
<!-- After all source has been added, run make to do the insert. -->
<script> sourceCode.make() </script>
</section>
Expand Down
26 changes: 16 additions & 10 deletions examples/grid/dataGrids.html
View file
Expand Up @@ -47,11 +47,13 @@ <h1>Data Grid Examples</h1>
<section>
<h2>Examples</h2>
<section>
<h3 id="ex1_label">Example 1: Minimal Data Grid</h3>
<div class="example-header">
<h3 id="ex1_label">Example 1: Minimal Data Grid</h3>
</div>
<div role="separator" id="ex1_start_sep" aria-labelledby="ex1_start_sep ex1_label" aria-label="Start of"></div>
<div id="ex1">
<h4 id="grid1Label">Transactions January 1 through January 6</h4>
<table role="grid" aria-labelledby="grid1Label" class="data">
<table id="ex1-grid" role="grid" aria-labelledby="grid1Label" class="data">
<tr>
<th>Date</th>
<th>Type</th>
Expand Down Expand Up @@ -135,11 +137,13 @@ <h4>Notes</h4>
</ol>
</section>
<section>
<h3 id="ex2_label">Example 2: Sortable Data Grid With Editable Cells</h3>
<div class="example-header">
<h3 id="ex2_label">Example 2: Sortable Data Grid With Editable Cells</h3>
</div>
<div role="separator" id="ex2_start_sep" aria-labelledby="ex2_start_sep ex2_label" aria-label="Start of"></div>
<div id="ex2">
<h4 id="grid2Label">Transactions January 1 through January 7</h4>
<table role="grid" aria-labelledby="grid2Label" class="data">
<table id="ex2-grid" role="grid" aria-labelledby="grid2Label" class="data">
<tr>
<th aria-sort="ascending">
<span tabindex="-1" role="button">Date</span>
Expand Down Expand Up @@ -333,13 +337,15 @@ <h4>Notes</h4>
</ol>
</section>
<section>
<h3 id="ex3_label">Example 3: Scrollable Data Grid With Column Hiding</h3>
<div class="example-header">
<h3 id="ex3_label">Example 3: Scrollable Data Grid With Column Hiding</h3>
</div>
<div role="separator" id="ex3_start_sep" aria-labelledby="ex3_start_sep ex3_label" aria-label="Start of"></div>
<div id="ex3">
<h4 id="grid3Label">Transactions for January 1 through January 15</h4>
<button type="button" id="toggle_column_btn" name="toggle_columns">Hide Type and
Category</button>
<table role="grid" aria-labelledby="grid3Label" aria-rowcount="16" aria-colcount="6"
<table id="ex3-grid" role="grid" aria-labelledby="grid3Label" aria-rowcount="16" aria-colcount="6"
data-per-page="5" class="data">
<tr data-fixed="true">
<th>Date</th>
Expand Down Expand Up @@ -789,7 +795,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<ul id="css_js_files">
<li>CSS:
<ul>
<li><a href="css/dataGrids.css" type="tex/css">dataGrids.css</a></li>
Expand All @@ -813,19 +819,19 @@ <h3 id="sc1_label">Example 1: Minimal Data Grid</h3>
<div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></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')</script>
<script>sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files')</script>

<h3 id="sc2_label">Example 2: Sortable Data Grid With Editable Cells</h3>
<div id="sc2_start_sep" role="separator" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of HTML for"></div>
<pre><code id="sc2"></code></pre>
<div id="sc2_end_sep" role="separator" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of HTML for"></div>
<script>sourceCode.add('sc2', 'ex2')</script>
<script>sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files')</script>

<h3 id="sc3_label">Example 3: Scrollable Data Grid With Column Hiding</h3>
<div id="sc3_start_sep" role="separator" aria-labelledby="sc3_start_sep sc3_label" aria-label="Start of HTML for"></div>
<pre><code id="sc3"></code></pre>
<div id="sc3_end_sep" role="separator" aria-labelledby="sc3_end_sep sc3_label" aria-label="End of HTML for"></div>
<script>sourceCode.add('sc3', 'ex3') </script>
<script>sourceCode.add('sc3', 'ex3', 'ex3_label', 'css_js_files') </script>
<!-- After all source has been added, run make to do the insert. -->
<script> sourceCode.make(); </script>
</section>
Expand Down
55 changes: 32 additions & 23 deletions examples/grid/js/dataGrids.js
View file
Expand Up @@ -14,27 +14,36 @@
*/

window.addEventListener('load', function () {
var ex1 = document.getElementById('ex1');
new aria.Grid(ex1.querySelector('[role="grid"]'));

var ex2 = document.getElementById('ex2');
new aria.Grid(ex2.querySelector('[role="grid"]'));

var ex3 = document.getElementById('ex3');
var ex3Grid = new aria.Grid(ex3.querySelector('[role="grid"]'));
var toggleButton = document.getElementById('toggle_column_btn');
var toggledOn = true;

toggleButton.addEventListener('click', function () {
toggledOn = !toggledOn;

ex3Grid.toggleColumn(2, toggledOn);
ex3Grid.toggleColumn(4, toggledOn);

if (toggledOn) {
toggleButton.innerText = 'Hide Type and Category';
} else {
toggleButton.innerText = 'Show Type and Category';
}
});
// Initialize Example 1 Grid (if it is present in the DOM)
var ex1GridElement = document.getElementById('ex1-grid');
if (ex1GridElement) {
new aria.Grid(ex1GridElement);
}

// Initialize Example 2 Grid (if it is present in the DOM)
var ex2GridElement = document.getElementById('ex2-grid');
if (ex2GridElement) {
new aria.Grid(ex2GridElement);
}

// Initialize Example 3 Grid (if it is present in the DOM)
var ex3GridElement = document.getElementById('ex3-grid');
if (ex3GridElement) {
var ex3Grid = new aria.Grid(ex3GridElement);
var toggleButton = document.getElementById('toggle_column_btn');
var toggledOn = true;

toggleButton.addEventListener('click', function () {
toggledOn = !toggledOn;

ex3Grid.toggleColumn(2, toggledOn);
ex3Grid.toggleColumn(4, toggledOn);

if (toggledOn) {
toggleButton.innerText = 'Hide Type and Category';
} else {
toggleButton.innerText = 'Show Type and Category';
}
});
}
});
107 changes: 55 additions & 52 deletions examples/grid/js/layoutGrids.js
View file
Expand Up @@ -15,64 +15,67 @@ var aria = aria || {};

window.addEventListener('load', function () {
// Setup Example 1
var ex1 = document.getElementById('ex1');
new aria.Grid(ex1.querySelector('[role="grid"]'));
if (document.getElementById('ex1-grid')) {
new aria.Grid(document.getElementById('ex1-grid'));

// Setup NUX; activates when the first grid cell is focused
var gridNUX = document.getElementById('grid-nux');
var firstGridCell = document.querySelector('#ex1-grid [tabindex="0"]');
var NUXCloseButton = document.getElementById('close-nux-button');
var closeNUX = function () {
aria.Utils.addClass(gridNUX, 'hidden');
firstGridCell.focus();
};
var setupInstructions = function () {
firstGridCell.removeEventListener('focus', setupInstructions);
aria.Utils.removeClass(gridNUX, 'hidden');

NUXCloseButton.addEventListener('click', closeNUX);
NUXCloseButton.addEventListener('keyup', function (event) {
if (event.which === aria.KeyCode.RETURN) {
closeNUX();
}
});
};
firstGridCell.addEventListener('focus', setupInstructions);
}

// Setup Example 2
var ex2 = document.getElementById('ex2');
var ex2Grid = new aria.Grid(ex2.querySelector('[role="grid"]'));

new PillList(
ex2Grid,
document.getElementById('add-recipient-input'),
document.getElementById('add-recipient-button'),
document.getElementById('form-action-text')
);
if (document.getElementById('ex2-grid')) {
var ex2Grid = new aria.Grid(document.getElementById('ex2-grid'));

new PillList(
ex2Grid,
document.getElementById('add-recipient-input'),
document.getElementById('add-recipient-button'),
document.getElementById('form-action-text')
);
}

// Setup Example 3
var ex3 = document.getElementById('ex3');
var ex3Grid = new aria.Grid(ex3.querySelector('[role="grid"]'));
var startIndexText = document.getElementById('ex3_start_index');
var endIndexText = document.getElementById('ex3_end_index');
var previousButton = document.getElementById('ex3_pageup_button');
var nextButton = document.getElementById('ex3_pagedown_button');
ex3Grid.setPaginationChangeHandler(function (startIndex, endIndex) {
startIndexText.innerText = startIndex + 1;
endIndexText.innerText = endIndex + 1;
if (startIndex <= 0) {
previousButton.setAttribute('disabled', 'true');
} else {
previousButton.removeAttribute('disabled');
}
if (endIndex >= 18) {
nextButton.setAttribute('disabled', 'true');
} else {
nextButton.removeAttribute('disabled');
}
});
previousButton.addEventListener('click', ex3Grid.movePageUp.bind(ex3Grid));
nextButton.addEventListener('click', ex3Grid.movePageDown.bind(ex3Grid));

// Setup NUX; activates when the first grid cell is focused
var gridNUX = document.getElementById('grid-nux');
var firstGridCell = document.querySelector('#ex1 [tabindex="0"]');
var NUXCloseButton = document.getElementById('close-nux-button');
var closeNUX = function () {
aria.Utils.addClass(gridNUX, 'hidden');
firstGridCell.focus();
};
var setupInstructions = function () {
firstGridCell.removeEventListener('focus', setupInstructions);
aria.Utils.removeClass(gridNUX, 'hidden');

NUXCloseButton.addEventListener('click', closeNUX);
NUXCloseButton.addEventListener('keyup', function (event) {
if (event.which === aria.KeyCode.RETURN) {
closeNUX();
if (document.getElementById('ex3-grid')) {
var ex3Grid = new aria.Grid(document.getElementById('ex3-grid'));
var startIndexText = document.getElementById('ex3_start_index');
var endIndexText = document.getElementById('ex3_end_index');
var previousButton = document.getElementById('ex3_pageup_button');
var nextButton = document.getElementById('ex3_pagedown_button');
ex3Grid.setPaginationChangeHandler(function (startIndex, endIndex) {
startIndexText.innerText = startIndex + 1;
endIndexText.innerText = endIndex + 1;
if (startIndex <= 0) {
previousButton.setAttribute('disabled', 'true');
} else {
previousButton.removeAttribute('disabled');
}
if (endIndex >= 18) {
nextButton.setAttribute('disabled', 'true');
} else {
nextButton.removeAttribute('disabled');
}
});
};
firstGridCell.addEventListener('focus', setupInstructions);
previousButton.addEventListener('click', ex3Grid.movePageUp.bind(ex3Grid));
nextButton.addEventListener('click', ex3Grid.movePageDown.bind(ex3Grid));
}
});

function PillList(grid, input, submitButton, formUpdateText) {
Expand Down

0 comments on commit aea1acc

Please sign in to comment.