Add Sortable table example (pull #2046)

Adds example of a simple HTML table that includes buttons for sorting in some of the column headers and illustrates implementation of aria--sort.

Co-authored-by: Matt King <a11yThinker@gmail.com>

aria-practices.html

@@ -2643,7 +2643,10 @@ <h3>Table</h3>
  </p>
  <section class="notoc">
  <h4>Examples</h4>
- <p><a href="examples/table/table.html">Table Example</a>: ARIA table made using HTML <code>div</code> and <code>span</code> elements.</p>
+ <ul>
+ <li><a href="examples/table/table.html">Table Example</a>: ARIA table made using HTML <code>div</code> and <code>span</code> elements.</li>
+ <li><a href="examples/table/sortable-table.html">Sortable Table Example</a>: Basic HTML table that illustrates implementation of <code>aria-sort</code> in the headers of sortable columns.</li>
+ </ul>
  </section>
  <section class="notoc">
  <h4>Keyboard Interaction</h4>

cspell.json

@@ -181,6 +181,7 @@
  "shizzle",
  "Shopify",
  "Smorgeni",
+ "sortability",
  "sourcecode",
  "Spinbuttons",
  "Starkrimson",

examples/index.html

@@ -625,6 +625,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
  <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
  <li><a href="switch/switch-button.html">Switch Using HTML Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
  <li><a href="switch/switch.html">Switch</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+ <li><a href="table/sortable-table.html">Sortable Table</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
  <li><a href="toolbar/toolbar.html">Toolbar</a></li>
  </ul>
  </td>
@@ -823,7 +824,12 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
  </tr>
  <tr>
  <td><code>aria-sort</code></td>
- <td><a href="grid/dataGrids.html">Data Grid</a></td>
+ <td>
+ <ul>
+ <li><a href="grid/dataGrids.html">Data Grid</a></li>
+ <li><a href="table/sortable-table.html">Sortable Table</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+ </ul>
+ </td>
  </tr>
  <tr>
  <td><code>aria-valuemax</code></td>

examples/table/css/sortable-table.css

@@ -0,0 +1,101 @@
+.sr-only {
+ position: absolute;
+ top: -30em;
+}
+
+table.sortable td,
+table.sortable th {
+ padding: 0.125em 0.25em;
+ width: 8em;
+}
+
+table.sortable th {
+ font-weight: bold;
+ border-bottom: thin solid #888;
+ position: relative;
+}
+
+table.sortable th.no-sort {
+ padding-top: 0.35em;
+}
+
+table.sortable th:nth-child(5) {
+ width: 10em;
+}
+
+table.sortable th button {
+ position: absolute;
+ padding: 4px;
+ margin: 1px;
+ font-size: 100%;
+ font-weight: bold;
+ background: transparent;
+ border: none;
+ display: inline;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 100%;
+ text-align: left;
+ outline: none;
+ cursor: pointer;
+}
+
+table.sortable th button span {
+ position: absolute;
+ right: 4px;
+}
+
+table.sortable th[aria-sort="descending"] span::after {
+ content: "▼";
+ color: currentColor;
+ font-size: 100%;
+ top: 0;
+}
+
+table.sortable th[aria-sort="ascending"] span::after {
+ content: "▲";
+ color: currentColor;
+ font-size: 100%;
+ top: 0;
+}
+
+table.show-unsorted-icon th:not([aria-sort]) button span::after {
+ content: "♢";
+ color: currentColor;
+ font-size: 100%;
+ position: relative;
+ top: -3px;
+ left: -4px;
+}
+
+table.sortable td.num {
+ text-align: right;
+}
+
+table.sortable tbody tr:nth-child(odd) {
+ background-color: #ddd;
+}
+
+/* Focus and hover styling */
+
+table.sortable th button:focus,
+table.sortable th button:hover {
+ padding: 2px;
+ border: 2px solid currentColor;
+ background-color: #e5f4ff;
+}
+
+table.sortable th button:focus span,
+table.sortable th button:hover span {
+ right: 2px;
+}
+
+table.sortable th:not([aria-sort]) button:focus span::after,
+table.sortable th:not([aria-sort]) button:hover span::after {
+ content: "▼";
+ color: currentColor;
+ font-size: 100%;
+ top: 0;
+}

examples/table/js/sortable-table.js

@@ -0,0 +1,167 @@
+/*
+ * This content is licensed according to the W3C Software License at
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * File: sortable-table.js
+ *
+ * Desc: Adds sorting to a HTML data table that implements ARIA Authoring Practices
+ */
+
+'use strict';
+
+class SortableTable {
+ constructor(tableNode) {
+ this.tableNode = tableNode;
+
+ this.columnHeaders = tableNode.querySelectorAll('thead th');
+
+ this.sortColumns = [];
+
+ for (var i = 0; i < this.columnHeaders.length; i++) {
+ var ch = this.columnHeaders[i];
+ var buttonNode = ch.querySelector('button');
+ if (buttonNode) {
+ this.sortColumns.push(i);
+ buttonNode.setAttribute('data-column-index', i);
+ buttonNode.addEventListener('click', this.handleClick.bind(this));
+ }
+ }
+
+ this.optionCheckbox = document.querySelector(
+ 'input[type="checkbox"][value="show-unsorted-icon"]'
+ );
+
+ if (this.optionCheckbox) {
+ this.optionCheckbox.addEventListener(
+ 'change',
+ this.handleOptionChange.bind(this)
+ );
+ if (this.optionCheckbox.checked) {
+ this.tableNode.classList.add('show-unsorted-icon');
+ }
+ }
+ }
+
+ setColumnHeaderSort(columnIndex) {
+ if (typeof columnIndex === 'string') {
+ columnIndex = parseInt(columnIndex);
+ }
+
+ for (var i = 0; i < this.columnHeaders.length; i++) {
+ var ch = this.columnHeaders[i];
+ var buttonNode = ch.querySelector('button');
+ if (i === columnIndex) {
+ var value = ch.getAttribute('aria-sort');
+ if (value === 'descending') {
+ ch.setAttribute('aria-sort', 'ascending');
+ this.sortColumn(
+ columnIndex,
+ 'ascending',
+ ch.classList.contains('num')
+ );
+ } else {
+ ch.setAttribute('aria-sort', 'descending');
+ this.sortColumn(
+ columnIndex,
+ 'descending',
+ ch.classList.contains('num')
+ );
+ }
+ } else {
+ if (ch.hasAttribute('aria-sort') && buttonNode) {
+ ch.removeAttribute('aria-sort');
+ }
+ }
+ }
+ }
+
+ sortColumn(columnIndex, sortValue, isNumber) {
+ function compareValues(a, b) {
+ if (sortValue === 'ascending') {
+ if (a.value === b.value) {
+ return 0;
+ } else {
+ if (isNumber) {
+ return a.value - b.value;
+ } else {
+ return a.value < b.value ? -1 : 1;
+ }
+ }
+ } else {
+ if (a.value === b.value) {
+ return 0;
+ } else {
+ if (isNumber) {
+ return b.value - a.value;
+ } else {
+ return a.value > b.value ? -1 : 1;
+ }
+ }
+ }
+ }
+
+ if (typeof isNumber !== 'boolean') {
+ isNumber = false;
+ }
+
+ var tbodyNode = this.tableNode.querySelector('tbody');
+ var rowNodes = [];
+ var dataCells = [];
+
+ var rowNode = tbodyNode.firstElementChild;
+
+ var index = 0;
+ while (rowNode) {
+ rowNodes.push(rowNode);
+ var rowCells = rowNode.querySelectorAll('th, td');
+ var dataCell = rowCells[columnIndex];
+
+ var data = {};
+ data.index = index;
+ data.value = dataCell.textContent.toLowerCase().trim();
+ if (isNumber) {
+ data.value = parseFloat(data.value);
+ }
+ dataCells.push(data);
+ rowNode = rowNode.nextElementSibling;
+ index += 1;
+ }
+
+ dataCells.sort(compareValues);
+
+ // remove rows
+ while (tbodyNode.firstChild) {
+ tbodyNode.removeChild(tbodyNode.lastChild);
+ }
+
+ // add sorted rows
+ for (var i = 0; i < dataCells.length; i += 1) {
+ tbodyNode.appendChild(rowNodes[dataCells[i].index]);
+ }
+ }
+
+ /* EVENT HANDLERS */
+
+ handleClick(event) {
+ var tgt = event.currentTarget;
+ this.setColumnHeaderSort(tgt.getAttribute('data-column-index'));
+ }
+
+ handleOptionChange(event) {
+ var tgt = event.currentTarget;
+
+ if (tgt.checked) {
+ this.tableNode.classList.add('show-unsorted-icon');
+ } else {
+ this.tableNode.classList.remove('show-unsorted-icon');
+ }
+ }
+}
+
+// Initialize sortable table buttons
+window.addEventListener('load', function () {
+ var sortableTables = document.querySelectorAll('table.sortable');
+ for (var i = 0; i < sortableTables.length; i++) {
+ new SortableTable(sortableTables[i]);
+ }
+});