A11y (#63)

* src/sortable.a11y.ts added

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 .DS_Store
+._*

CHANGELOG.md

@@ -7,6 +7,12 @@ 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).
 
+## [2.4.0] - 2023-10-17
+
+### Added
+
+- Simple accessibility introduced with **sortable.a11y.js**. `enhanceSortableAccessibility` adds `aria-label` to the headers of an array of tables.
+
 ## [2.3.2] - 2023-08-22
 
 ### Fixed
@@ -90,6 +96,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).
 
+[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
 [2.3.0]: https://github.com/tofsjonas/sortable/releases/tag/2.3.0

README.md

@@ -31,6 +31,7 @@ You can find a simple demo on <https://tofsjonas.github.io/sortable/>
 - [Ascending sort](#ascending-sort)
 - [Tiebreaker / secondary sort](#tiebreaker--secondary-sort)
 - [Empty/null rows always last](#emptynull-rows-always-last)
+- [Accessibility](#accessibility)
 - [Sort on load](#sort-on-load)
 - [Thank you...](#thank-you)
 
@@ -390,6 +391,27 @@ Adding `class="n-last"` to `<table class="sortable">` will make empty/null value
 
 ⚠️ _Note that a string of blank spaces is **not** considered null/empty. `<td data-sort=" "></td>` will be sorted normally._
 
+## Accessibility
+
+Sortable is not very accessible in its raw form. It does not support screen readers, and it does not have any keyboard support. Including `sortable.a11y.min.js` in your project will add some basic accessibility features.
+
+```html
+<table class="sortable">
+  ...
+</table>
+<link href="sortable.min.css" rel="stylesheet" />
+<script src="sortable.min.js"></script>
+<script src="sortable.a11y.min.js"></script>
+```
+
+By including the file the global function `enhanceSortableAccessibility` will automatically run through all existing `.sortable` tables, but you can also run it manually, like so:
+
+```javascript
+enhanceSortableAccessibility([table1, table2,...etc.])
+```
+
+The function adds an `aria-label` to each th, as well as `tabindex="0"` to each th in the thead of each table, making it possible to tab through the headers. It updates the `aria-label` depending on the direction.
+
 ## Sort on load
 
 If you wish to sort a table on load, I would recommend doing something like this:

package.json

@@ -1,14 +1,16 @@
 {
   "name": "sortable-tablesort",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "description": "A tiny, Vanilla/Plain JavaScript table sorter",
   "scripts": {
     "dev": "tsc -w",
     "test:watch": "jest --watchAll",
     "test": "jest",
     "lint": "eslint src/sortable.ts",
     "build": "npm run compile && npm run sass",
-    "compile": "google-closure-compiler --js=./sortable.js --js_output_file=./sortable.min.js",
+    "compile": "npm run compile:sortable && npm run compile:a11y",
+    "compile:sortable": "google-closure-compiler --js=./sortable.js --js_output_file=./sortable.min.js",
+    "compile:a11y": "google-closure-compiler --js=./sortable.a11y.js --js_output_file=./sortable.a11y.min.js",
     "sass": "npm run sass:dist && npm run sass:dist:minify",
     "sass:dist": "sass src/sortable.scss:sortable.css src/example.scss:example.css src/sortable-base.scss:sortable-base.css",
     "sass:dist:minify": "sass src/sortable.scss:sortable.min.css src/example.scss:example.min.css src/sortable-base.scss:sortable-base.min.css --style compressed"
@@ -33,21 +35,21 @@
   "author": "Jonas Earendel",
   "license": "Unlicense",
   "devDependencies": {
-    "@babel/core": "^7.22.10",
-    "@babel/preset-env": "^7.22.10",
-    "@testing-library/dom": "^9.3.1",
-    "@testing-library/jest-dom": "^6.0.1",
-    "@typescript-eslint/eslint-plugin": "^6.4.1",
-    "@typescript-eslint/parser": "^6.4.1",
-    "babel-jest": "^29.6.3",
-    "eslint": "^8.47.0",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
+    "babel-jest": "^29.7.0",
+    "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "google-closure-compiler": "^20230802.0.0",
-    "jest": "^29.6.3",
+    "jest": "^29.7.0",
     "jsdom": "^22.1.0",
-    "prettier": "^3.0.2",
-    "sass": "^1.66.1",
-    "typescript": "^5.1.6"
+    "prettier": "^3.0.3",
+    "sass": "^1.69.3",
+    "typescript": "^5.2.2"
   }
 }