clean up even more things!! 🧹

i can't be stopped. no one can stop me
elastic · Apr 5, 2024 · 3aa3ba1 · 3aa3ba1
1 parent e171721
commit 3aa3ba1
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 56 deletions.
diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -161,7 +161,6 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </th>
         <th
-          aria-live="polite"
           aria-sort="ascending"
           class="euiTableHeaderCell emotion-euiTableHeaderCell"
           data-test-subj="tableHeaderCell_name_0"

diff --git a/src/components/table/__snapshots__/table_header_cell.test.tsx.snap b/src/components/table/__snapshots__/table_header_cell.test.tsx.snap
@@ -89,7 +89,6 @@ exports[`EuiTableHeaderCell sorting does not render a button with readOnly 1`] =
   <thead>
     <tr>
       <th
-        aria-live="polite"
         aria-sort="descending"
         class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"
@@ -120,7 +119,6 @@ exports[`EuiTableHeaderCell sorting renders a button with onSort 1`] = `
   <thead>
     <tr>
       <th
-        aria-live="polite"
         aria-sort="descending"
         class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"
@@ -157,7 +155,6 @@ exports[`EuiTableHeaderCell sorting renders a sort arrow upwards isSortAscending
   <thead>
     <tr>
       <th
-        aria-live="polite"
         aria-sort="ascending"
         class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"
@@ -188,7 +185,6 @@ exports[`EuiTableHeaderCell sorting renders a sort arrow with isSorted 1`] = `
   <thead>
     <tr>
       <th
-        aria-live="polite"
         aria-sort="descending"
         class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"
@@ -219,7 +215,6 @@ exports[`EuiTableHeaderCell sorting renders with a sortable icon if \`onSort\` i
   <thead>
     <tr>
       <th
-        aria-live="polite"
         aria-sort="none"
         class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"

diff --git a/src/components/table/table_header_cell.tsx b/src/components/table/table_header_cell.tsx
@@ -142,67 +142,50 @@ export const EuiTableHeaderCell: FunctionComponent<EuiTableHeaderCellProps> = ({
   const CellComponent = children ? 'th' : 'td';
   const cellScope = CellComponent === 'th' ? scope ?? 'col' : undefined; // `scope` is only valid on `th` elements
 
-  const cellContents = (
-    <CellContents
-      css={styles.euiTableHeaderCell__content}
-      align={align}
-      description={description}
-      canSort={onSort && !readOnly}
-      isSorted={isSorted}
-      isSortAscending={isSortAscending}
-    >
-      {children}
-    </CellContents>
-  );
-
-  if (onSort || isSorted) {
-    const buttonClasses = classNames('euiTableHeaderButton', {
-      'euiTableHeaderButton-isSorted': isSorted,
-    });
-
-    let ariaSortValue: HTMLAttributes<any>['aria-sort'] = 'none';
-    if (isSorted) {
-      ariaSortValue = isSortAscending ? 'ascending' : 'descending';
-    }
-
-    return (
-      <CellComponent
-        css={styles.euiTableHeaderCell}
-        className={classes}
-        scope={cellScope}
-        role="columnheader"
-        aria-sort={ariaSortValue}
-        aria-live="polite"
-        style={inlineStyles}
-        {...rest}
-      >
-        {onSort && !readOnly ? (
-          <button
-            type="button"
-            css={styles.euiTableHeaderCell__button}
-            className={buttonClasses}
-            onClick={onSort}
-            data-test-subj="tableHeaderSortButton"
-          >
-            {cellContents}
-          </button>
-        ) : (
-          cellContents
-        )}
-      </CellComponent>
-    );
+  const canSort = !!(onSort && !readOnly);
+  let ariaSortValue: HTMLAttributes<HTMLTableCellElement>['aria-sort'];
+  if (isSorted) {
+    ariaSortValue = isSortAscending ? 'ascending' : 'descending';
+  } else if (canSort) {
+    ariaSortValue = 'none';
   }
 
+  const cellContentsProps = {
+    css: styles.euiTableHeaderCell__content,
+    align,
+    description,
+    canSort,
+    isSorted,
+    isSortAscending,
+    children,
+  };
+
   return (
     <CellComponent
       css={styles.euiTableHeaderCell}
       className={classes}
       scope={cellScope}
       role="columnheader"
+      aria-sort={ariaSortValue}
+      // aria-live="polite" TODO: this doesn't seem to do anything - ask Trevor
       style={inlineStyles}
       {...rest}
     >
-      {cellContents}
+      {canSort ? (
+        <button
+          type="button"
+          css={styles.euiTableHeaderCell__button}
+          className={classNames('euiTableHeaderButton', {
+            'euiTableHeaderButton-isSorted': isSorted,
+          })}
+          onClick={onSort}
+          data-test-subj="tableHeaderSortButton"
+        >
+          <CellContents {...cellContentsProps} />
+        </button>
+      ) : (
+        <CellContents {...cellContentsProps} />
+      )}
     </CellComponent>
   );
 };