71 lines
3.3 KiB
JavaScript
71 lines
3.3 KiB
JavaScript
/**
|
|
* 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) {
|
|
/**
|
|
* 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 = 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) REMEMBER TO COMMENT OUT WHEN NOT TESTING!!
|
|
}
|
|
/**
|
|
* 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 element = header;
|
|
// Skip if the header cell already has a tabindex attribute
|
|
if (element.hasAttribute('tabindex'))
|
|
return;
|
|
var update = function () {
|
|
updateAriaLabel(element, default_direction);
|
|
};
|
|
// Add tabindex attribute and generate initial aria-label attribute
|
|
element.setAttribute('tabindex', '0');
|
|
update();
|
|
// 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(update, 50);
|
|
});
|
|
// Attach focus event listener to update aria-label attribute
|
|
element.addEventListener('focus', update);
|
|
// 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'));
|
|
});
|