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

Add "Open in codepen" buttons to 6 more examples #1683

Merged
merged 7 commits into from
Jan 17, 2021
Merged

Add "Open in codepen" buttons to 6 more examples #1683

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fe02b60
Add Codepen button to listbox-rearrangeable
Dec 15, 2020
07fed93
Add Codepen button to data grids example
Dec 15, 2020
3501513
Add Codepen button to listbox collapsible
Dec 15, 2020
3e35a7a
Add Codepen button to menu button navigation
Dec 15, 2020
19dba0f
Add Codepen to LayoutGrid
Dec 15, 2020
38408fd
Add codepen to accordion
Dec 15, 2020
de280db
Satisfy linter
Jan 13, 2021
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
8 changes: 5 additions & 3 deletions examples/accordion/accordion.html
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Loading