From 1b813cabf8e7bbb5d75e59abd6161394683e3b69 Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Mon, 23 Dec 2024 09:16:24 -0500
Subject: [PATCH 1/3] table sort on icon only

---
 src/registrar/assets/src/js/getgov/table-base.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/registrar/assets/src/js/getgov/table-base.js b/src/registrar/assets/src/js/getgov/table-base.js
index e526c6b5f..e9830ca0e 100644
--- a/src/registrar/assets/src/js/getgov/table-base.js
+++ b/src/registrar/assets/src/js/getgov/table-base.js
@@ -495,8 +495,10 @@ export class BaseTable {
   // Add event listeners to table headers for sorting
   initializeTableHeaders() {
     this.tableHeaders.forEach(header => {
-      header.addEventListener('click', () => {
-        const sortBy = header.getAttribute('data-sortable');
+      const sortBy = header.getAttribute('data-sortable');
+      // add event listener to respond to clicks on the button
+      let button = header.querySelector('.usa-table__header__button')
+      button.addEventListener('click', () => {
         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

From f817dbdf18c2d2aceb148a310373ad6e98638c96 Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Mon, 23 Dec 2024 09:32:58 -0500
Subject: [PATCH 2/3] simulate button click outside button

---
 src/registrar/assets/src/js/getgov/table-base.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/registrar/assets/src/js/getgov/table-base.js b/src/registrar/assets/src/js/getgov/table-base.js
index e9830ca0e..8f47ca53a 100644
--- a/src/registrar/assets/src/js/getgov/table-base.js
+++ b/src/registrar/assets/src/js/getgov/table-base.js
@@ -495,10 +495,12 @@ export class BaseTable {
   // Add event listeners to table headers for sorting
   initializeTableHeaders() {
     this.tableHeaders.forEach(header => {
-      const sortBy = header.getAttribute('data-sortable');
+      
       // add event listener to respond to clicks on the button
-      let button = header.querySelector('.usa-table__header__button')
-      button.addEventListener('click', () => {
+      
+      header.addEventListener('click', function(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
@@ -507,6 +509,11 @@ export class BaseTable {
         }
         // load the results with the updated sort
         this.loadTable(1, sortBy, order);
+        // Check if the click occurred outside the button
+        if (!button.contains(event.target)) {
+            // Simulate a button click
+            button.click();
+        }
       });
     });
   }

From ebe8aa7f782bc56882e6da8902280177a6392559 Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Mon, 23 Dec 2024 09:41:14 -0500
Subject: [PATCH 3/3] header click updates button

---
 src/registrar/assets/src/js/getgov/table-base.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/registrar/assets/src/js/getgov/table-base.js b/src/registrar/assets/src/js/getgov/table-base.js
index 8f47ca53a..97c256734 100644
--- a/src/registrar/assets/src/js/getgov/table-base.js
+++ b/src/registrar/assets/src/js/getgov/table-base.js
@@ -495,10 +495,7 @@ export class BaseTable {
   // Add event listeners to table headers for sorting
   initializeTableHeaders() {
     this.tableHeaders.forEach(header => {
-      
-      // add event listener to respond to clicks on the button
-      
-      header.addEventListener('click', function(event) {
+      header.addEventListener('click', event => {
         let button = header.querySelector('.usa-table__header__button')
         const sortBy = header.getAttribute('data-sortable');
         let order = 'asc';
@@ -509,7 +506,9 @@ export class BaseTable {
         }
         // load the results with the updated sort
         this.loadTable(1, sortBy, order);
-        // Check if the click occurred outside the button
+        // 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();