A11y (#64)

* class="dir-d|u"->aria-sort="ascending|descending"
resolves #62

CHANGELOG.md

@@ -7,6 +7,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.0.0] - 2023-10-17
+
+### Changed
+
+- `aria-sort="ascending|descending"` used instead of `class="dir-d|dir-up"`  to keep track of direction.
+
+### Breaking Changes
+
+- `class="dir-d|dir-up"` removed.
+
 ## [2.4.0] - 2023-10-17
 
 ### Added
@@ -96,6 +106,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 This CHANGELOG.md was generated with the assistance of [ChatGPT by OpenAI](https://www.openai.com/research/chatgpt).
 
+[3.0.0]: https://github.com/tofsjonas/sortable/releases/tag/3.0.0
 [2.4.0]: https://github.com/tofsjonas/sortable/releases/tag/2.4.0
 [2.3.2]: https://github.com/tofsjonas/sortable/releases/tag/2.3.2
 [2.3.1]: https://github.com/tofsjonas/sortable/releases/tag/2.3.1

README.md

@@ -37,7 +37,7 @@ You can find a simple demo on <https://tofsjonas.github.io/sortable/>
 
 ## Factoids
 
-- **1187 bytes** minified. (620 bytes gzipped)
+- **1180 bytes** minified. (617 bytes gzipped)
 
 - Works with **JavaScript generated tables**. (since we are using an eventListener)
 
@@ -475,4 +475,6 @@ Combine this with `<table class="sortable asc">` to reverse the sort order. Or d
 
 - ...[Jojo-IO](https://github.com/Jojo-IO) for the finding the "`parseFloat` messes up time values" bug!
 
+- ...[Steve Wirt](https://github.com/swirtSJW) for lifting the Accessibility issue! 🦾️
+
 [![jsdelivr](https://data.jsdelivr.com/v1/package/gh/tofsjonas/sortable/badge)](https://www.jsdelivr.com/package/gh/tofsjonas/sortable)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sortable-tablesort",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "description": "A tiny, Vanilla/Plain JavaScript table sorter",
   "scripts": {
     "dev": "tsc -w",
@@ -22,7 +22,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/tofsjonas/sortable"
+    "url": "git+https://github.com/tofsjonas/sortable.git"
   },
   "keywords": [
     "sort",

sortable.a11y.js

@@ -1,35 +1,65 @@
+/**
+ * This is a "plugin" for the sortable package:
+ * https://www.npmjs.com/package/sortable-tablesort
+ * https://github.com/tofsjonas/sortable
+ *
+ * Enhances the accessibility of class="sortable" tables by adding ARIA attributes and keyboard event listeners.
+ * @param tables - A list of HTML table elements to enhance.
+ */
 var enhanceSortableAccessibility = function (tables) {
-    function updateAriaLabel(header_element) {
+    /**
+     * Generates an aria-label attribute for a table header cell based on its content and current sort direction.
+     * @param element - The table header cell to update.
+     * @param default_direction - The default sort direction for the table.
+     */
+    function updateAriaLabel(element, default_direction) {
+        var _a;
+        if (default_direction === void 0) { default_direction = ""; }
         // Generate aria-label based on header content
-        var header_text = header_element.textContent || '';
-        var direction = header_element.classList.contains('dir-d') ? 'ascending' : 'descending';
-        var aria_label = "Click to sort table by ".concat(header_text, " in ").concat(direction, " order");
-        header_element.setAttribute('aria-label', aria_label);
-        // header_element.setAttribute('title', aria_label)
+        var header_text = element.textContent || 'element';
+        var current_direction = (_a = element.getAttribute('aria-sort')) !== null && _a !== void 0 ? _a : '';
+        var new_direction = 'descending';
+        if (current_direction === 'descending' ||
+            default_direction && current_direction !== 'ascending') {
+            new_direction = 'ascending';
+        }
+        var aria_label = "Click to sort table by ".concat(header_text, " in ").concat(new_direction, " order");
+        element.setAttribute('aria-label', aria_label);
+        // element.setAttribute('title', aria_label)
     }
+    /**
+     * Handles keyboard events on table header cells and triggers a click event when the Enter key is pressed.
+     * @param event - The keyboard event to handle.
+     */
     function handleKeyDown(event) {
         if (event.key === 'Enter') {
             var element = event.target;
             element.click();
         }
     }
+    // Iterate over each table in the input list
     tables.forEach(function (table) {
+        var default_direction = table.classList.contains('asc') ? 'ascending' : '';
         var headers = table.querySelectorAll('th');
+        // Iterate over each header cell in the table
         headers.forEach(function (header) {
-            var header_element = header;
-            header_element.setAttribute('tabindex', '0');
-            updateAriaLabel(header_element);
-            header_element.addEventListener('click', function () {
+            var element = header;
+            // Add tabindex attribute and generate initial aria-label attribute
+            element.setAttribute('tabindex', '0');
+            updateAriaLabel(element, default_direction);
+            // Attach click event listener to update aria-label attribute
+            element.addEventListener('click', function () {
                 // Add a delay to allow the new sort order to be applied
                 setTimeout(function () {
-                    updateAriaLabel(header_element);
+                    updateAriaLabel(element, default_direction);
                 }, 50);
             });
-            // Attach event handlers
-            header_element.addEventListener('keydown', handleKeyDown);
+            // Attach keyboard event listener to trigger click event
+            element.addEventListener('keydown', handleKeyDown);
         });
     });
 };
+// Attach function to DOMContentLoaded event to execute when page is loaded
 document.addEventListener('DOMContentLoaded', function () {
     enhanceSortableAccessibility(document.querySelectorAll('.sortable'));
 });