Merge pull request #3422 from cisagov/rjm/3048-request-table-accessibility

#3048: Request table accessibility issues - [RJM]

src/registrar/assets/src/js/getgov/table-base.js

@@ -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) => {
+  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,9 +510,10 @@ export class BaseTable {
 
   // Add event listeners to table headers for sorting
   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');
           let order = 'asc';
           // 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
           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
   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 = '';

src/registrar/assets/src/js/getgov/table-member-domains.js

@@ -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;
     }
   };
 }

src/registrar/templates/includes/domain_requests_table.html

@@ -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">

src/registrar/templates/includes/domains_table.html

@@ -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">

src/registrar/templates/includes/members_table.html

@@ -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