Merge pull request #6659 from WoltLab/63-aria-sort

Set `aria-sort` attributes in grid view tables

Author: BurntimeX

com.woltlab.wcf/templates/shared_gridView.tpl

@@ -38,6 +38,13 @@
 							class="gridView__headerColumn {$column->getClasses()} {if $view->isSortedBy($column)}active {$view->getSortOrder()}{/if}"
 							data-id="{$column->getID()}"
 							data-sortable="{$column->isSortable()}"
+							{if $column->isSortable()}
+								{if $view->isSortedBy($column)}
+									aria-sort="{if $view->getSortOrder() === 'ASC'}ascending{else}descending{/if}"
+								{else}
+									aria-sort="none"
+								{/if}
+							{/if}
 						>
 							{if $column->isSortable()}
 								<button type="button" class="gridView__headerColumn__button">

ts/WoltLabSuite/Core/Component/GridView/Sorting.ts

@@ -98,9 +98,11 @@ export class Sorting extends EventTarget {
   #renderActiveSorting(): void {
     this.#table.querySelectorAll<HTMLTableCellElement>('th[data-sortable="1"]').forEach((element) => {
       element.classList.remove("active", "ASC", "DESC");
+      element.setAttribute("aria-sort", "none");
 
       if (element.dataset.id == this.#sortField) {
         element.classList.add("active", this.#sortOrder);
+        element.setAttribute("aria-sort", this.#sortOrder === "ASC" ? "ascending" : "descending");
       }
     });
   }