mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-07-26 04:28:39 +02:00
Merge pull request #3422 from cisagov/rjm/3048-request-table-accessibility
#3048: Request table accessibility issues - [RJM]
This commit is contained in:
Rachid Mrad
GitHub
commit
0774355243
5 changed files with 38 additions and 31 deletions
|
|
@ -129,7 +129,7 @@ export class BaseTable {
|
|||
this.displayName = itemName;
|
||||
this.sectionSelector = itemName + 's';
|
||||
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.currentOrder = 'asc';
|
||||
this.currentStatus = [];
|
||||
|
|
@ -303,13 +303,18 @@ export class BaseTable {
|
|||
* A helper that resets sortable table headers
|
||||
*
|
||||
*/
|
||||
unsetHeader = (header) => {
|
||||
header.removeAttribute('aria-sort');
|
||||
let headerName = header.innerText;
|
||||
const headerLabel = `${headerName}, sortable column, currently unsorted"`;
|
||||
const headerButtonLabel = `Click to sort by ascending order.`;
|
||||
header.setAttribute("aria-label", headerLabel);
|
||||
header.querySelector('.usa-table__header__button').setAttribute("title", headerButtonLabel);
|
||||
unsetHeader = (headerSortButton) => {
|
||||
let header = headerSortButton.closest('th');
|
||||
if (header) {
|
||||
header.removeAttribute('aria-sort');
|
||||
let headerName = header.innerText;
|
||||
const headerLabel = `${headerName}, sortable column, currently unsorted"`;
|
||||
const headerButtonLabel = `Click to sort by ascending order.`;
|
||||
header.setAttribute("aria-label", headerLabel);
|
||||
header.querySelector('.usa-table__header__button').setAttribute("title", headerButtonLabel);
|
||||
} else {
|
||||
console.warn('Issue with DOM');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -505,24 +510,21 @@ export class BaseTable {
|
|||
|
||||
// Add event listeners to table headers for sorting
|
||||
initializeTableHeaders() {
|
||||
this.tableHeaders.forEach(header => {
|
||||
header.addEventListener('click', event => {
|
||||
let button = header.querySelector('.usa-table__header__button')
|
||||
const sortBy = header.getAttribute('data-sortable');
|
||||
let order = 'asc';
|
||||
// sort order will be ascending, unless the currently sorted column is ascending, and the user
|
||||
// is selecting the same column to sort in descending order
|
||||
if (sortBy === this.currentSortBy) {
|
||||
order = this.currentOrder === 'asc' ? 'desc' : 'asc';
|
||||
}
|
||||
// load the results with the updated sort
|
||||
this.loadTable(1, sortBy, order);
|
||||
// If the click occurs outside of the button, need to simulate a button click in order
|
||||
// for USWDS listener on the button to execute.
|
||||
// Check first to see if click occurs outside of the button
|
||||
if (!button.contains(event.target)) {
|
||||
// Simulate a button click
|
||||
button.click();
|
||||
this.tableHeaderSortButtons.forEach(tableHeader => {
|
||||
tableHeader.addEventListener('click', event => {
|
||||
let header = tableHeader.closest('th');
|
||||
if (header) {
|
||||
const sortBy = header.getAttribute('data-sortable');
|
||||
let order = 'asc';
|
||||
// sort order will be ascending, unless the currently sorted column is ascending, and the user
|
||||
// is selecting the same column to sort in descending order
|
||||
if (sortBy === this.currentSortBy) {
|
||||
order = this.currentOrder === 'asc' ? 'desc' : 'asc';
|
||||
}
|
||||
// load the results with the updated sort
|
||||
this.loadTable(1, sortBy, order);
|
||||
} else {
|
||||
console.warn('Issue with DOM');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -587,9 +589,9 @@ export class BaseTable {
|
|||
|
||||
// Reset UI and accessibility
|
||||
resetHeaders() {
|
||||
this.tableHeaders.forEach(header => {
|
||||
this.tableHeaderSortButtons.forEach(headerSortButton => {
|
||||
// Unset sort UI in headers
|
||||
this.unsetHeader(header);
|
||||
this.unsetHeader(headerSortButton);
|
||||
});
|
||||
// Reset the announcement region
|
||||
this.tableAnnouncementRegion.innerHTML = '';
|
||||
|
|
|
|||
|
|
@ -35,16 +35,19 @@ export class MemberDomainsTable extends BaseTable {
|
|||
showElement(dataWrapper);
|
||||
hideElement(noSearchResultsWrapper);
|
||||
hideElement(noDataWrapper);
|
||||
this.tableAnnouncementRegion.innerHTML = '';
|
||||
} else {
|
||||
hideElement(dataWrapper);
|
||||
showElement(noSearchResultsWrapper);
|
||||
hideElement(noDataWrapper);
|
||||
this.tableAnnouncementRegion.innerHTML = this.noSearchResultsWrapper.innerHTML;
|
||||
}
|
||||
} else {
|
||||
hideElement(searchSection);
|
||||
hideElement(dataWrapper);
|
||||
hideElement(noSearchResultsWrapper);
|
||||
showElement(noDataWrapper);
|
||||
this.tableAnnouncementRegion.innerHTML = this.noDataWrapper.innerHTML;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
<!----------------------------------------------------------------------
|
||||
This link is commented out because we intend to add it back in later.
|
||||
------------------------------------------------------------------------->
|
||||
<!-- <a href="{% url 'export_data_type_requests' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right" role="button">
|
||||
<!-- <a href="{% url 'export_data_type_requests' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right">
|
||||
<svg class="usa-icon usa-icon--large" aria-hidden="true" focusable="false" role="img" width="24" height="24">
|
||||
<use xlink:href="{% static 'img/sprite.svg' %}#file_download"></use>
|
||||
</svg>Export as CSV
|
||||
|
|
@ -78,6 +78,7 @@
|
|||
id="domain-requests__usa-button--filter"
|
||||
aria-expanded="false"
|
||||
aria-controls="filter-status"
|
||||
aria-label="Status, list 7 items"
|
||||
>
|
||||
<span class="text-bold display-none" id="domain-requests__filter-indicator"></span> Status
|
||||
<svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24">
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
{% if user_domain_count and user_domain_count > 0 %}
|
||||
<div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}">
|
||||
<section aria-label="Domains report component" class="margin-top-205">
|
||||
<a href="{% url 'export_data_type_user' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right" role="button">
|
||||
<a href="{% url 'export_data_type_user' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right">
|
||||
<svg class="usa-icon usa-icon--large" aria-hidden="true" focusable="false" role="img" width="24" height="24">
|
||||
<use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
|
||||
</svg>Export as CSV
|
||||
|
|
@ -101,6 +101,7 @@
|
|||
id="domains__usa-button--filter"
|
||||
aria-expanded="false"
|
||||
aria-controls="filter-status"
|
||||
aria-label="Status, list 5 items"
|
||||
>
|
||||
<span class="text-bold display-none" id="domains__filter-indicator"></span> Status
|
||||
<svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24">
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
</div>
|
||||
<div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}">
|
||||
<section aria-label="Domains report component" class="margin-top-205">
|
||||
<a href="{% url 'export_members_portfolio' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right" role="button">
|
||||
<a href="{% url 'export_members_portfolio' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right">
|
||||
<svg class="usa-icon usa-icon--large" aria-hidden="true" focusable="false" role="img" width="24" height="24">
|
||||
<use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
|
||||
</svg>Export as CSV
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue