Add VO changes

Resovles: https://cisa-corp.slack.com/archives/C087NN9UW5C/p1737136440608239

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

@@ -448,6 +448,7 @@ export class BaseTable {
     const baseUrlValue = this.getBaseUrl()?.innerHTML ?? null;
     if (!baseUrlValue) return;
 
+    this.tableAnnouncementRegion.innerHTML = '<p>Loading table.</p>';
     let url = `${baseUrlValue}?${searchParams.toString()}`
     fetch(url)
       .then(response => response.json())
@@ -480,6 +481,18 @@ export class BaseTable {
         // Do not scroll on first page load
         if (scroll)
           scrollToElement('class', this.sectionSelector);
+          // Note: this code is similar to that in updateDisplay.
+          // This is slightly different in that we control this via scroll, hence we have this here.
+          const { unfiltered_total, total } = data;
+          if (unfiltered_total) {
+            if (total) {
+              this.tableWrapper.focus();
+            }else {
+              this.noSearchResultsWrapper.focus();
+            }
+          }else {
+            this.noDataWrapper.focus();
+          }
         this.scrollToTable = true;
 
         // update pagination
@@ -493,6 +506,7 @@ export class BaseTable {
         this.currentSortBy = sortBy;
         this.currentOrder = order;
         this.currentSearchTerm = searchTerm;
+        this.tableAnnouncmentRegion.innerHTML = '';
     })
     .catch(error => console.error('Error fetching objects:', error));
   }

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

@@ -90,6 +90,7 @@ export class EditMemberDomainsTable extends BaseTable {
   addRow(dataObject, tbody, customTableOptions) {
     const domain = dataObject;
     const row = document.createElement('tr');
+    row.setAttribute("tabindex", "-1");
     let checked = false;
     let disabled = false;
     if (

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

@@ -18,6 +18,7 @@ export class MemberDomainsTable extends BaseTable {
   addRow(dataObject, tbody, customTableOptions) {
     const domain = dataObject;
     const row = document.createElement('tr');
+    row.setAttribute("tabindex", "-1"); 
     row.innerHTML = `
       <th scope="row" role="rowheader" data-label="Domain name">
         ${domain.name}

src/registrar/templates/includes/domain_requests_table.html

@@ -196,11 +196,11 @@
         <div class="usa-sr-only usa-table__announcement-region" aria-live="polite" id="domain-requests__usa-table__announcement-region"></div>
     </div>
 
-    <div class="display-none" id="domain-requests__no-data">
+    <div class="display-none" id="domain-requests__no-data" tabindex="-1">
         <p>You haven't requested any domains.</p>
     </div>
 
-    <div class="display-none" id="domain-requests__no-search-results">
+    <div class="display-none" id="domain-requests__no-search-results" tabindex="-1">
         <p>No results found</p>
     </div>
 </section>

src/registrar/templates/includes/domains_table.html

@@ -227,7 +227,7 @@
       aria-live="polite"
     ></div>
   </div>
-  <div class="display-none" id="domains__no-data">
+  <div class="display-none" id="domains__no-data" tabindex="-1">
     <p>You don't have any registered domains.</p>
     <p class="maxw-none clearfix">
       <a href="https://get.gov/help/faq/#do-not-see-my-domain" class="float-right-tablet usa-link usa-link--icon" target="_blank">
@@ -238,7 +238,7 @@
       </a>
     </p>
   </div>
-  <div class="display-none" id="domains__no-search-results">
+  <div class="display-none" id="domains__no-search-results" tabindex="-1">
     <p>No results found</p>
   </div>
 </section>

src/registrar/templates/includes/member_domains_edit_table.html

@@ -99,10 +99,10 @@
       aria-live="polite"
     ></div>
   </div>
-  <div class="display-none" id="edit-member-domains__no-data">
+  <div class="display-none" id="edit-member-domains__no-data" tabindex="-1">
     <p>This member does not manage any domains.  Click the Edit domain assignments buttons to assign domains.</p>
   </div>
-  <div class="display-none" id="edit-member-domains__no-search-results" tabindex=0>
+  <div class="display-none" id="edit-member-domains__no-search-results" tabindex="-1">
     <p>No results found</p>
   </div>
 </section>

src/registrar/templates/includes/member_domains_table.html

@@ -94,10 +94,10 @@
         aria-live="polite"
       ></div>
     </div>
-    <div class="display-none" id="member-domains__no-data">
+    <div class="display-none" id="member-domains__no-data" tabindex="-1">
       <p>This member does not manage any domains.  Click the Edit domain assignments buttons to assign domains.</p>
     </div>
-    <div class="display-none" id="member-domains__no-search-results" tabindex=0>
+    <div class="display-none" id="member-domains__no-search-results" tabindex="-1">
       <p>No results found</p>
     </div>
   </section>

src/registrar/templates/includes/members_table.html

@@ -72,10 +72,10 @@
         aria-live="polite"
       ></div>
     </div>
-    <div class="display-none" id="members__no-data">
+    <div class="display-none" id="members__no-data" tabindex="-1">
       <p>You don't have any members.</p>
     </div>
-    <div class="display-none" id="members__no-search-results" tabindex=0>
+    <div class="display-none" id="members__no-search-results" tabindex="-1">
       <p>No results found</p>
     </div>
   </section>