DataTable: Add "SR only" text for sortable columns (#6109)

Author: TylerJDev

.changeset/dry-breads-attack.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+DataTable: Add visually hidden text to sortable DataTable column buttons

packages/react/src/DataTable/Table.tsx

@@ -150,14 +150,17 @@ function TableSortHeader({align, children, direction, onToggleSort, ...rest}: Ta
       >
         {children}
         {direction === SortDirection.NONE || direction === SortDirection.ASC ? (
-          <SortAscIcon
-            className={clsx(
-              'TableSortIcon',
-              'TableSortIcon--ascending',
-              classes.TableSortIcon,
-              classes['TableSortIcon--ascending'],
-            )}
-          />
+          <>
+            <SortAscIcon
+              className={clsx(
+                'TableSortIcon',
+                'TableSortIcon--ascending',
+                classes.TableSortIcon,
+                classes['TableSortIcon--ascending'],
+              )}
+            />
+            {direction === SortDirection.NONE ? <VisuallyHidden>sort ascending</VisuallyHidden> : null}
+          </>
         ) : null}
         {direction === SortDirection.DESC ? (
           <SortDescIcon

packages/react/src/DataTable/__tests__/DataTable.test.tsx

@@ -826,7 +826,7 @@ describe('DataTable', () => {
 
       // When interacting with Column B, sort order should reset to ASC
       await user.click(screen.getByText('Column B'))
-      expect(getSortHeader('Column A')).not.toHaveAttribute('aria-sort')
+      expect(getSortHeader('Column A sort ascending')).not.toHaveAttribute('aria-sort')
       expect(getSortHeader('Column B')).toHaveAttribute('aria-sort', 'ascending')
       expect(getRowOrder()).toEqual([
         [3, 1],