✨ feat(sitemap): add XML styling (#221)

2023-11-14 23:26:44 +01:00
parent 741a7e7c6f
commit 1df3f7f89c
9 changed files with 190 additions and 4 deletions
--- a/static/js/sortTable.js
+++ b/static/js/sortTable.js
@@ -0,0 +1,113 @@
+// Select the table and table headers.
+var table = document.querySelector("#sitemapTable");
+var headers = Array.from(table.querySelectorAll("th"));
+
+// Create and append the live region for accessibility announcements.
+var liveRegion = document.createElement('div');
+liveRegion.setAttribute('aria-live', 'polite');
+liveRegion.setAttribute('aria-atomic', 'true');
+liveRegion.classList.add('visually-hidden');
+document.body.appendChild(liveRegion);
+
+// Initialise headers with click and keyboard listeners.
+initializeHeaders();
+addSortText(); // Add text for screen readers for initial sort direction.
+updateSortIndicators(headers[0], 'asc'); // Set initial sort indicators.
+
+function updateSortIndicators(header, direction) {
+    removeSortArrows(header);
+    var arrow = document.createElement('span');
+    arrow.classList.add('sort-arrow');
+    arrow.textContent = direction === 'asc' ? ' ▲' : ' ▼';
+    arrow.setAttribute('aria-hidden', 'true');
+    header.appendChild(arrow);
+}
+
+function removeSortArrows(header) {
+    var arrows = header.querySelectorAll('.sort-arrow');
+    arrows.forEach(function (arrow) {
+        arrow.remove();
+    });
+}
+
+function initializeHeaders() {
+    headers.forEach(function (header, index) {
+        header.classList.add('sortable');
+        header.setAttribute('tabindex', '0');
+        header.sortDirection = 'asc'; // Default sort direction.
+        var sortAttribute = index === 0 ? 'ascending' : 'none';
+        header.setAttribute('aria-sort', sortAttribute);
+        header.addEventListener("click", function () {
+            sortTable(index);
+        });
+        header.addEventListener("keydown", function (e) {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                sortTable(index);
+            }
+        });
+    });
+}
+
+function announceSort(header, direction) {
+    var columnTitle = header.querySelector('.columntitle').textContent;
+    liveRegion.textContent = 'Column ' + columnTitle + ' is now sorted in ' + direction + ' order';
+}
+
+function sortTable(index) {
+    var header = headers[index];
+    var direction = header.sortDirection === 'asc' ? 'desc' : 'asc';
+    var tbody = table.querySelector("tbody");
+    var rows = Array.from(tbody.querySelectorAll("tr"));
+    sortRows(rows, index, direction);
+    refreshTableBody(tbody, rows);
+    updateHeaderAttributes(header, direction);
+    announceSort(header, direction === 'asc' ? 'ascending' : 'descending');
+}
+
+function sortRows(rows, index, direction) {
+    rows.sort(function (rowA, rowB) {
+        var cellA = rowA.querySelectorAll("td")[index].textContent;
+        var cellB = rowB.querySelectorAll("td")[index].textContent;
+        return direction === 'asc' ? cellA.localeCompare(cellB) : cellB.localeCompare(cellA);
+    });
+}
+
+function refreshTableBody(tbody, rows) {
+    tbody.innerHTML = ''; // Clear existing rows.
+    rows.forEach(function (row) {
+        tbody.appendChild(row);
+    });
+}
+
+function updateHeaderAttributes(header, direction) {
+    headers.forEach(function (otherHeader) {
+        if (otherHeader !== header) {
+            otherHeader.setAttribute('aria-sort', 'none');
+            removeSortArrows(otherHeader);
+        }
+    });
+    header.setAttribute('aria-sort', direction === 'asc' ? 'ascending' : 'descending');
+    header.sortDirection = direction;
+    updateSortIndicators(header, direction);
+    updateAnnounceText(header);
+}
+
+// Update screen reader text for sorting.
+function updateAnnounceText(header) {
+    var span = header.querySelector('.visually-hidden');
+    span.textContent = 'Click to sort in ' + (header.sortDirection === 'asc' ? 'descending' : 'ascending') + ' order';
+}
+
+// Add text for screen readers regarding sort order.
+function addSortText() {
+    headers.forEach(function (header) {
+        var span = document.createElement('span');
+        span.classList.add('visually-hidden');
+        span.textContent = 'Click to sort in descending order';
+        header.appendChild(span);
+    });
+}
+
+headers[0].sortDirection = 'asc';
+headers[0].setAttribute('aria-sort', 'ascending');