diff --git a/src/sortable.a11y.ts b/src/sortable.a11y.ts index d6d5dc5..563eee9 100644 --- a/src/sortable.a11y.ts +++ b/src/sortable.a11y.ts @@ -2,28 +2,25 @@ * 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. */ const enhanceSortableAccessibility = (tables: NodeListOf) => { - /** * 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: HTMLTableCellElement, default_direction = "") { + function updateAriaLabel(element: HTMLTableCellElement, default_direction = '') { // Generate aria-label based on header content const header_text = element.textContent || 'element' - let current_direction = element.getAttribute('aria-sort') ?? '' + const current_direction = element.getAttribute('aria-sort') ?? '' let new_direction = 'descending' - if(current_direction === 'descending' || - default_direction && current_direction !== 'ascending' - ) { - new_direction='ascending' + if (current_direction === 'descending' || (default_direction && current_direction !== 'ascending')) { + new_direction = 'ascending' } const aria_label = `Click to sort table by ${header_text} in ${new_direction} order` @@ -54,7 +51,7 @@ const enhanceSortableAccessibility = (tables: NodeListOf) => { // Add tabindex attribute and generate initial aria-label attribute element.setAttribute('tabindex', '0') - updateAriaLabel(element,default_direction) + updateAriaLabel(element, default_direction) // Attach click event listener to update aria-label attribute element.addEventListener('click', () => { @@ -73,4 +70,4 @@ const enhanceSortableAccessibility = (tables: NodeListOf) => { // Attach function to DOMContentLoaded event to execute when page is loaded document.addEventListener('DOMContentLoaded', () => { enhanceSortableAccessibility(document.querySelectorAll('.sortable')) -}) \ No newline at end of file +}) diff --git a/src/sortable.ts b/src/sortable.ts index 5f139a8..5567b41 100644 --- a/src/sortable.ts +++ b/src/sortable.ts @@ -80,11 +80,10 @@ document.addEventListener('click', function (e: MouseEvent) { let direction = 'descending' - if(element.getAttribute('aria-sort') === 'descending' - || - (table.classList.contains(ascending_table_sort_class) && element.getAttribute('aria-sort')!=='ascending') - ) - { + if ( + element.getAttribute('aria-sort') === 'descending' || + (table.classList.contains(ascending_table_sort_class) && element.getAttribute('aria-sort') !== 'ascending') + ) { direction = 'ascending' }