zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-12 12:39:43 +02:00
Code Issues Projects Releases Packages Wiki Activity

3050 - simplify sort header event listeners

Browse source
This commit is contained in:
Rachid Mrad 2025-01-28 19:25:58 -05:00
parent 0c1def30aa
commit 5553140405
No known key found for this signature in database
1 changed files with 30 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/registrar/assets/src/js/getgov/table-base.js
View file

@ -129,7 +129,7 @@ export class BaseTable {
this.displayName = itemName; this.displayName = itemName;
this.sectionSelector = itemName + 's'; this.sectionSelector = itemName + 's';
this.tableWrapper = document.getElementById(`${this.sectionSelector}__table-wrapper`); this.tableWrapper = document.getElementById(`${this.sectionSelector}__table-wrapper`);
this.tableHeaders = document.querySelectorAll(`#${this.sectionSelector} th[data-sortable]`); this.tableHeaderSortButtons = document.querySelectorAll(`#${this.sectionSelector} th[data-sortable] button`);
this.currentSortBy = 'id'; this.currentSortBy = 'id';
this.currentOrder = 'asc'; this.currentOrder = 'asc';
this.currentStatus = []; this.currentStatus = [];
@ -303,13 +303,18 @@ export class BaseTable {
* A helper that resets sortable table headers * A helper that resets sortable table headers
* *
*/ */
unsetHeader = (header) => { unsetHeader = (headerSortButton) => {
let header = headerSortButton.closest('th');
if (header) {
header.removeAttribute('aria-sort'); header.removeAttribute('aria-sort');
let headerName = header.innerText; let headerName = header.innerText;
const headerLabel = `${headerName}, sortable column, currently unsorted"`; const headerLabel = `${headerName}, sortable column, currently unsorted"`;
const headerButtonLabel = `Click to sort by ascending order.`; const headerButtonLabel = `Click to sort by ascending order.`;
header.setAttribute("aria-label", headerLabel); header.setAttribute("aria-label", headerLabel);
header.querySelector('.usa-table__header__button').setAttribute("title", headerButtonLabel); header.querySelector('.usa-table__header__button').setAttribute("title", headerButtonLabel);
} else {
console.warn('Issue with DOM');
}
}; };
/** /**
@ -505,9 +510,10 @@ export class BaseTable {
// Add event listeners to table headers for sorting // Add event listeners to table headers for sorting
initializeTableHeaders() { initializeTableHeaders() {
this.tableHeaders.forEach(header => { this.tableHeaderSortButtons.forEach(tableHeader => {
header.addEventListener('click', event => { tableHeader.addEventListener('click', event => {
let button = header.querySelector('.usa-table__header__button') let header = tableHeader.closest('th');
if (header) {
const sortBy = header.getAttribute('data-sortable'); const sortBy = header.getAttribute('data-sortable');
let order = 'asc'; let order = 'asc';
// sort order will be ascending, unless the currently sorted column is ascending, and the user // sort order will be ascending, unless the currently sorted column is ascending, and the user
@ -517,12 +523,8 @@ export class BaseTable {
} }
// load the results with the updated sort // load the results with the updated sort
this.loadTable(1, sortBy, order); this.loadTable(1, sortBy, order);
// If the click occurs outside of the button, need to simulate a button click in order } else {
// for USWDS listener on the button to execute. console.warn('Issue with DOM');
// Check first to see if click occurs outside of the button
if (!button.contains(event.target)) {
// Simulate a button click
button.click();
} }
}); });
}); });
@ -587,9 +589,9 @@ export class BaseTable {
// Reset UI and accessibility // Reset UI and accessibility
resetHeaders() { resetHeaders() {
this.tableHeaders.forEach(header => { this.tableHeaderSortButtons.forEach(headerSortButton => {
// Unset sort UI in headers // Unset sort UI in headers
this.unsetHeader(header); this.unsetHeader(headerSortButton);
}); });
// Reset the announcement region // Reset the announcement region
this.tableAnnouncementRegion.innerHTML = ''; this.tableAnnouncementRegion.innerHTML = '';