From 1641056f7cbbd9ab7efd577ad6f7b51e14060352 Mon Sep 17 00:00:00 2001
From: Joshua Li <joshuali925@gmail.com>
Date: Tue, 8 Dec 2020 11:57:07 -0800
Subject: [PATCH] Disable sorting on workbench

---
 .../QueryResults/QueryResults.test.tsx        |    4 +-
 .../QueryResults/QueryResultsBody.tsx         |    6 +-
 .../__snapshots__/QueryResults.test.tsx.snap  | 2396 ++++-------------
 .../QueryResultsBody.test.tsx.snap            | 1796 +++---------
 4 files changed, 1007 insertions(+), 3195 deletions(-)

diff --git a/workbench/public/components/QueryResults/QueryResults.test.tsx b/workbench/public/components/QueryResults/QueryResults.test.tsx
index 087ffdad89..248c2d5b25 100644
--- a/workbench/public/components/QueryResults/QueryResults.test.tsx
+++ b/workbench/public/components/QueryResults/QueryResults.test.tsx
@@ -104,7 +104,7 @@ describe("<QueryResults with data/> spec", () => {
     await fireEvent.click(getAllByRole('tab')[5]);
 
     // It tests sorting
-    await fireEvent.click(getAllByTestId('tableHeaderSortButton')[1]);
+    // await fireEvent.click(getAllByTestId('tableHeaderSortButton')[1]);
 
     // It tests pagination
     await fireEvent.click(getAllByLabelText('Page 2 of 2')[0]);
@@ -210,7 +210,7 @@ describe("<QueryResults with data/> spec", () => {
     await fireEvent.click(getAllByRole('tab')[5]);
 
     // It tests sorting
-    await fireEvent.click(getAllByTestId('tableHeaderSortButton')[1]);
+    // await fireEvent.click(getAllByTestId('tableHeaderSortButton')[1]);
 
     // It tests pagination
     await fireEvent.click(getAllByLabelText('Page 2 of 2')[0]);
diff --git a/workbench/public/components/QueryResults/QueryResultsBody.tsx b/workbench/public/components/QueryResults/QueryResultsBody.tsx
index 33df6214b9..9a34bd568b 100644
--- a/workbench/public/components/QueryResults/QueryResultsBody.tsx
+++ b/workbench/public/components/QueryResults/QueryResultsBody.tsx
@@ -601,9 +601,9 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul
         <EuiTableHeaderCell
           key={label}
           width={colwidth}
-          onSort={this.onSort.bind(this, label)}
-          isSorted={this.props.sortedColumn === label}
-          isSortAscending={this.props.sortableProperties.isAscendingByName(label)}
+          // onSort={this.onSort.bind(this, label)}
+          // isSorted={this.props.sortedColumn === label}
+          // isSortAscending={this.props.sortableProperties.isAscendingByName(label)}
         >
           {label}
         </EuiTableHeaderCell>
diff --git a/workbench/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap b/workbench/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap
index 1d09d78f7d..f625b404e8 100644
--- a/workbench/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap
+++ b/workbench/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap
@@ -351,722 +351,409 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                   >
                     <tr>
                       <td
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 27px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
-                          >
-                            <span
-                              class="euiTableCellContent__text"
-                            />
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
-                          </span>
-                        </button>
+                            class="euiTableCellContent__text"
+                          />
+                        </div>
                       </td>
                       <th
-                        aria-live="polite"
-                        aria-sort="ascending"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton euiTableHeaderButton-isSorted"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="category"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="category; Sorted in ascending order"
-                            >
-                              category
-                            </span>
-                            EuiIconMock
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in descending order
-                            </span>
+                            category
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="currency"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="currency"
-                            >
-                              currency
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            currency
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_first_name"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_first_name"
-                            >
-                              customer_first_name
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_first_name
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_full_name"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_full_name"
-                            >
-                              customer_full_name
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_full_name
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_gender"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_gender"
-                            >
-                              customer_gender
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_gender
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_id"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_id"
-                            >
-                              customer_id
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_id
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_last_name"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_last_name"
-                            >
-                              customer_last_name
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_last_name
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_phone"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_phone"
-                            >
-                              customer_phone
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_phone
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="day_of_week"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="day_of_week"
-                            >
-                              day_of_week
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            day_of_week
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="day_of_week_i"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="day_of_week_i"
-                            >
-                              day_of_week_i
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            day_of_week_i
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="email"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="email"
-                            >
-                              email
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            email
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="manufacturer"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="manufacturer"
-                            >
-                              manufacturer
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            manufacturer
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="order_date"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="order_date"
-                            >
-                              order_date
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            order_date
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="order_id"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="order_id"
-                            >
-                              order_id
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            order_id
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="products"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="products"
-                            >
-                              products
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            products
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="sku"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="sku"
-                            >
-                              sku
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            sku
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="taxful_total_price"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="taxful_total_price"
-                            >
-                              taxful_total_price
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            taxful_total_price
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="taxless_total_price"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="taxless_total_price"
-                            >
-                              taxless_total_price
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            taxless_total_price
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="total_quantity"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="total_quantity"
-                            >
-                              total_quantity
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            total_quantity
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="total_unique_products"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="total_unique_products"
-                            >
-                              total_unique_products
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            total_unique_products
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="type"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="type"
-                            >
-                              type
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            type
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="user"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="user"
-                            >
-                              user
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            user
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="geoip"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="geoip"
-                            >
-                              geoip
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            geoip
                           </span>
-                        </button>
+                        </div>
                       </th>
                     </tr>
                   </thead>
@@ -5126,722 +4813,409 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                   >
                     <tr>
                       <td
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 27px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
-                          >
-                            <span
-                              class="euiTableCellContent__text"
-                            />
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
-                          </span>
-                        </button>
+                            class="euiTableCellContent__text"
+                          />
+                        </div>
                       </td>
                       <th
-                        aria-live="polite"
-                        aria-sort="ascending"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton euiTableHeaderButton-isSorted"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="category"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="category; Sorted in ascending order"
-                            >
-                              category
-                            </span>
-                            EuiIconMock
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in descending order
-                            </span>
+                            category
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="currency"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="currency"
-                            >
-                              currency
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            currency
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_first_name"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_first_name"
-                            >
-                              customer_first_name
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_first_name
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_full_name"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_full_name"
-                            >
-                              customer_full_name
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_full_name
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_gender"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_gender"
-                            >
-                              customer_gender
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_gender
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_id"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_id"
-                            >
-                              customer_id
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_id
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_last_name"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_last_name"
-                            >
-                              customer_last_name
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_last_name
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_phone"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_phone"
-                            >
-                              customer_phone
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_phone
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="day_of_week"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="day_of_week"
-                            >
-                              day_of_week
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            day_of_week
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="day_of_week_i"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="day_of_week_i"
-                            >
-                              day_of_week_i
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            day_of_week_i
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="email"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="email"
-                            >
-                              email
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            email
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="manufacturer"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="manufacturer"
-                            >
-                              manufacturer
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            manufacturer
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="order_date"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="order_date"
-                            >
-                              order_date
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            order_date
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="order_id"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="order_id"
-                            >
-                              order_id
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            order_id
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="products"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="products"
-                            >
-                              products
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            products
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="sku"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="sku"
-                            >
-                              sku
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            sku
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="taxful_total_price"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="taxful_total_price"
-                            >
-                              taxful_total_price
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            taxful_total_price
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="taxless_total_price"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="taxless_total_price"
-                            >
-                              taxless_total_price
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            taxless_total_price
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="total_quantity"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="total_quantity"
-                            >
-                              total_quantity
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            total_quantity
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="total_unique_products"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="total_unique_products"
-                            >
-                              total_unique_products
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            total_unique_products
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="type"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="type"
-                            >
-                              type
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            type
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="user"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="user"
-                            >
-                              user
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            user
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="geoip"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="geoip"
-                            >
-                              geoip
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            geoip
                           </span>
-                        </button>
+                        </div>
                       </th>
                     </tr>
                   </thead>
@@ -9994,722 +9368,409 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                   >
                     <tr>
                       <td
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 27px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
-                          >
-                            <span
-                              class="euiTableCellContent__text"
-                            />
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
-                          </span>
-                        </button>
+                            class="euiTableCellContent__text"
+                          />
+                        </div>
                       </td>
                       <th
-                        aria-live="polite"
-                        aria-sort="ascending"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton euiTableHeaderButton-isSorted"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="category"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="category; Sorted in ascending order"
-                            >
-                              category
-                            </span>
-                            EuiIconMock
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in descending order
-                            </span>
+                            category
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="currency"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="currency"
-                            >
-                              currency
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            currency
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_first_name"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_first_name"
-                            >
-                              customer_first_name
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_first_name
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_full_name"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_full_name"
-                            >
-                              customer_full_name
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_full_name
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_gender"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_gender"
-                            >
-                              customer_gender
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_gender
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_id"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_id"
-                            >
-                              customer_id
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_id
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_last_name"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_last_name"
-                            >
-                              customer_last_name
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_last_name
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_phone"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_phone"
-                            >
-                              customer_phone
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_phone
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="day_of_week"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="day_of_week"
-                            >
-                              day_of_week
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            day_of_week
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="day_of_week_i"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="day_of_week_i"
-                            >
-                              day_of_week_i
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            day_of_week_i
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="email"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="email"
-                            >
-                              email
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            email
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="manufacturer"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="manufacturer"
-                            >
-                              manufacturer
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            manufacturer
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="order_date"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="order_date"
-                            >
-                              order_date
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            order_date
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="order_id"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="order_id"
-                            >
-                              order_id
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            order_id
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="products"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="products"
-                            >
-                              products
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            products
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="sku"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="sku"
-                            >
-                              sku
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            sku
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="taxful_total_price"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="taxful_total_price"
-                            >
-                              taxful_total_price
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            taxful_total_price
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="taxless_total_price"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="taxless_total_price"
-                            >
-                              taxless_total_price
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            taxless_total_price
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="total_quantity"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="total_quantity"
-                            >
-                              total_quantity
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            total_quantity
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="total_unique_products"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="total_unique_products"
-                            >
-                              total_unique_products
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            total_unique_products
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="type"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="type"
-                            >
-                              type
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            type
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="user"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="user"
-                            >
-                              user
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            user
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="geoip"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="geoip"
-                            >
-                              geoip
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            geoip
                           </span>
-                        </button>
+                        </div>
                       </th>
                     </tr>
                   </thead>
@@ -14769,722 +13830,409 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                   >
                     <tr>
                       <td
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 27px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
-                          >
-                            <span
-                              class="euiTableCellContent__text"
-                            />
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
-                          </span>
-                        </button>
+                            class="euiTableCellContent__text"
+                          />
+                        </div>
                       </td>
                       <th
-                        aria-live="polite"
-                        aria-sort="ascending"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton euiTableHeaderButton-isSorted"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="category"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="category; Sorted in ascending order"
-                            >
-                              category
-                            </span>
-                            EuiIconMock
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in descending order
-                            </span>
+                            category
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="currency"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="currency"
-                            >
-                              currency
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            currency
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_first_name"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_first_name"
-                            >
-                              customer_first_name
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_first_name
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_full_name"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_full_name"
-                            >
-                              customer_full_name
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_full_name
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_gender"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_gender"
-                            >
-                              customer_gender
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_gender
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_id"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_id"
-                            >
-                              customer_id
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_id
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_last_name"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_last_name"
-                            >
-                              customer_last_name
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_last_name
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="customer_phone"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="customer_phone"
-                            >
-                              customer_phone
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            customer_phone
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="day_of_week"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="day_of_week"
-                            >
-                              day_of_week
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            day_of_week
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="day_of_week_i"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="day_of_week_i"
-                            >
-                              day_of_week_i
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            day_of_week_i
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="email"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="email"
-                            >
-                              email
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            email
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="manufacturer"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="manufacturer"
-                            >
-                              manufacturer
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            manufacturer
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="order_date"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="order_date"
-                            >
-                              order_date
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            order_date
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="order_id"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="order_id"
-                            >
-                              order_id
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            order_id
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="products"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="products"
-                            >
-                              products
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            products
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="sku"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="sku"
-                            >
-                              sku
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            sku
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="taxful_total_price"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="taxful_total_price"
-                            >
-                              taxful_total_price
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            taxful_total_price
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="taxless_total_price"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="taxless_total_price"
-                            >
-                              taxless_total_price
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            taxless_total_price
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="total_quantity"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="total_quantity"
-                            >
-                              total_quantity
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            total_quantity
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="total_unique_products"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="total_unique_products"
-                            >
-                              total_unique_products
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            total_unique_products
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="type"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="type"
-                            >
-                              type
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            type
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="user"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="user"
-                            >
-                              user
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            user
                           </span>
-                        </button>
+                        </div>
                       </th>
                       <th
-                        aria-live="polite"
-                        aria-sort="none"
                         class="euiTableHeaderCell"
                         role="columnheader"
                         scope="col"
                         style="width: 155px;"
                       >
-                        <button
-                          class="euiTableHeaderButton"
-                          data-test-subj="tableHeaderSortButton"
-                          type="button"
+                        <div
+                          class="euiTableCellContent"
                         >
                           <span
-                            class="euiTableCellContent"
+                            class="euiTableCellContent__text"
+                            title="geoip"
                           >
-                            <span
-                              class="euiTableCellContent__text"
-                              title="geoip"
-                            >
-                              geoip
-                            </span>
-                            <span
-                              class="euiScreenReaderOnly"
-                            >
-                              Click to sort in ascending order
-                            </span>
+                            geoip
                           </span>
-                        </button>
+                        </div>
                       </th>
                     </tr>
                   </thead>
diff --git a/workbench/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap b/workbench/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap
index af8fc1f50e..1999a6b457 100644
--- a/workbench/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap
+++ b/workbench/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap
@@ -127,721 +127,409 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                 >
                   <tr>
                     <td
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 27px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
-                        >
-                          <span
-                            class="euiTableCellContent__text"
-                          />
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
-                        </span>
-                      </button>
+                          class="euiTableCellContent__text"
+                        />
+                      </div>
                     </td>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="category"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="category"
-                          >
-                            category
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          category
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="currency"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="currency"
-                          >
-                            currency
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          currency
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="customer_first_name"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_first_name"
-                          >
-                            customer_first_name
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          customer_first_name
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="customer_full_name"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_full_name"
-                          >
-                            customer_full_name
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          customer_full_name
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="customer_gender"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_gender"
-                          >
-                            customer_gender
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          customer_gender
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="customer_id"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_id"
-                          >
-                            customer_id
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          customer_id
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="customer_last_name"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_last_name"
-                          >
-                            customer_last_name
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          customer_last_name
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="customer_phone"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_phone"
-                          >
-                            customer_phone
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          customer_phone
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="day_of_week"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="day_of_week"
-                          >
-                            day_of_week
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          day_of_week
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="day_of_week_i"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="day_of_week_i"
-                          >
-                            day_of_week_i
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          day_of_week_i
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="email"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="email"
-                          >
-                            email
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          email
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="manufacturer"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="manufacturer"
-                          >
-                            manufacturer
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          manufacturer
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="order_date"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="order_date"
-                          >
-                            order_date
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          order_date
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="order_id"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="order_id"
-                          >
-                            order_id
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          order_id
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="products"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="products"
-                          >
-                            products
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          products
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="sku"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="sku"
-                          >
-                            sku
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          sku
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="taxful_total_price"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="taxful_total_price"
-                          >
-                            taxful_total_price
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          taxful_total_price
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="taxless_total_price"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="taxless_total_price"
-                          >
-                            taxless_total_price
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          taxless_total_price
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="total_quantity"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="total_quantity"
-                          >
-                            total_quantity
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          total_quantity
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="total_unique_products"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="total_unique_products"
-                          >
-                            total_unique_products
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          total_unique_products
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="type"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="type"
-                          >
-                            type
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          type
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="user"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="user"
-                          >
-                            user
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          user
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="geoip"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="geoip"
-                          >
-                            geoip
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          geoip
                         </span>
-                      </button>
+                      </div>
                     </th>
                   </tr>
                 </thead>
@@ -5109,721 +4797,409 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                 >
                   <tr>
                     <td
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 27px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
-                        >
-                          <span
-                            class="euiTableCellContent__text"
-                          />
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
-                        </span>
-                      </button>
+                          class="euiTableCellContent__text"
+                        />
+                      </div>
                     </td>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="category"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="category"
-                          >
-                            category
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          category
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="currency"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="currency"
-                          >
-                            currency
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          currency
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="customer_first_name"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_first_name"
-                          >
-                            customer_first_name
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          customer_first_name
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="customer_full_name"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_full_name"
-                          >
-                            customer_full_name
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          customer_full_name
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="customer_gender"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_gender"
-                          >
-                            customer_gender
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          customer_gender
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="customer_id"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_id"
-                          >
-                            customer_id
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          customer_id
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="customer_last_name"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_last_name"
-                          >
-                            customer_last_name
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          customer_last_name
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
-                        >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_phone"
-                          >
-                            customer_phone
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          class="euiTableCellContent__text"
+                          title="customer_phone"
+                        >
+                          customer_phone
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="day_of_week"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="day_of_week"
-                          >
-                            day_of_week
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          day_of_week
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="day_of_week_i"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="day_of_week_i"
-                          >
-                            day_of_week_i
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          day_of_week_i
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="email"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="email"
-                          >
-                            email
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          email
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="manufacturer"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="manufacturer"
-                          >
-                            manufacturer
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          manufacturer
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="order_date"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="order_date"
-                          >
-                            order_date
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          order_date
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="order_id"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="order_id"
-                          >
-                            order_id
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          order_id
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="products"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="products"
-                          >
-                            products
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          products
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="sku"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="sku"
-                          >
-                            sku
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          sku
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="taxful_total_price"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="taxful_total_price"
-                          >
-                            taxful_total_price
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          taxful_total_price
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="taxless_total_price"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="taxless_total_price"
-                          >
-                            taxless_total_price
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          taxless_total_price
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="total_quantity"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="total_quantity"
-                          >
-                            total_quantity
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          total_quantity
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="total_unique_products"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="total_unique_products"
-                          >
-                            total_unique_products
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          total_unique_products
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="type"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="type"
-                          >
-                            type
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          type
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="user"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="user"
-                          >
-                            user
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          user
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="geoip"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="geoip"
-                          >
-                            geoip
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          geoip
                         </span>
-                      </button>
+                      </div>
                     </th>
                   </tr>
                 </thead>
@@ -10243,721 +9619,409 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                 >
                   <tr>
                     <td
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 27px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
-                        >
-                          <span
-                            class="euiTableCellContent__text"
-                          />
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
-                        </span>
-                      </button>
+                          class="euiTableCellContent__text"
+                        />
+                      </div>
                     </td>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="category"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="category"
-                          >
-                            category
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          category
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="currency"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="currency"
-                          >
-                            currency
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          currency
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="customer_first_name"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_first_name"
-                          >
-                            customer_first_name
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          customer_first_name
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="customer_full_name"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_full_name"
-                          >
-                            customer_full_name
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          customer_full_name
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="customer_gender"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_gender"
-                          >
-                            customer_gender
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          customer_gender
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="customer_id"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_id"
-                          >
-                            customer_id
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          customer_id
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="customer_last_name"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_last_name"
-                          >
-                            customer_last_name
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          customer_last_name
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="customer_phone"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="customer_phone"
-                          >
-                            customer_phone
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          customer_phone
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="day_of_week"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="day_of_week"
-                          >
-                            day_of_week
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          day_of_week
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="day_of_week_i"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="day_of_week_i"
-                          >
-                            day_of_week_i
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          day_of_week_i
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="email"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="email"
-                          >
-                            email
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          email
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="manufacturer"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="manufacturer"
-                          >
-                            manufacturer
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          manufacturer
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="order_date"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="order_date"
-                          >
-                            order_date
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          order_date
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="order_id"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="order_id"
-                          >
-                            order_id
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          order_id
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="products"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="products"
-                          >
-                            products
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          products
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="sku"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="sku"
-                          >
-                            sku
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          sku
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="taxful_total_price"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="taxful_total_price"
-                          >
-                            taxful_total_price
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          taxful_total_price
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="taxless_total_price"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="taxless_total_price"
-                          >
-                            taxless_total_price
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          taxless_total_price
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="total_quantity"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="total_quantity"
-                          >
-                            total_quantity
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          total_quantity
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="total_unique_products"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="total_unique_products"
-                          >
-                            total_unique_products
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          total_unique_products
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="type"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="type"
-                          >
-                            type
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          type
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="user"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="user"
-                          >
-                            user
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          user
                         </span>
-                      </button>
+                      </div>
                     </th>
                     <th
-                      aria-live="polite"
-                      aria-sort="none"
                       class="euiTableHeaderCell"
                       role="columnheader"
                       scope="col"
                       style="width: 155px;"
                     >
-                      <button
-                        class="euiTableHeaderButton"
-                        data-test-subj="tableHeaderSortButton"
-                        type="button"
+                      <div
+                        class="euiTableCellContent"
                       >
                         <span
-                          class="euiTableCellContent"
+                          class="euiTableCellContent__text"
+                          title="geoip"
                         >
-                          <span
-                            class="euiTableCellContent__text"
-                            title="geoip"
-                          >
-                            geoip
-                          </span>
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            Click to sort in ascending order
-                          </span>
+                          geoip
                         </span>
-                      </button>
+                      </div>
                     </th>
                   </tr>
                 </thead>