add tests + fix bugs

Author: aresnik11

packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx

@@ -63,18 +63,18 @@ export const TableHeaderRow: HeaderComponent = ({
           const renderKey = prefixId(`header-col-${rowProperty}`);
           const columnText = String(header || key);
           const sortDirection = headerRowDirections?.[rowProperty] ?? 'none';
+          const ariaSortDirection =
+            sortDirection === 'none'
+              ? 'none'
+              : sortDirection === 'asc'
+              ? 'ascending'
+              : 'descending';
 
           return (
             <ListCol
               key={renderKey}
               {...colProps}
-              aria-sort={
-                !sortable || sortDirection === 'none'
-                  ? 'none'
-                  : sortDirection === 'asc'
-                  ? 'ascending'
-                  : 'descending'
-              }
+              aria-sort={sortable ? ariaSortDirection : undefined}
               columnHeader
               dataTablePadding={dataTablePadding}
             >

packages/gamut/src/DataList/__tests__/DataGrid.test.tsx

@@ -232,10 +232,10 @@ describe('DataGrid', () => {
       it('renders the column header with an ascending label when sorted', () => {
         renderView({
           columns: [{ key: 'name', sortable: true }],
-          query: { sort: {} },
+          query: { sort: { name: 'asc' } },
         });
 
-        expect(screen.queryByText('ascending')).toBeNull();
+        screen.getByLabelText('ascending');
       });
       it('renders the column header with an descending label when sorted', () => {
         renderView({
@@ -328,6 +328,68 @@ describe('DataGrid', () => {
           },
         });
       });
+
+      it('sets aria-sort="ascending" on column header when sorted ascending', () => {
+        renderView({
+          columns: [{ key: 'name', sortable: true }],
+          query: { sort: { name: 'asc' } },
+        });
+
+        const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+        expect(nameHeader.tagName).toBe('TH');
+        expect(nameHeader).toHaveAttribute('aria-sort', 'ascending');
+      });
+
+      it('sets aria-sort="descending" on column header when sorted descending', () => {
+        renderView({
+          columns: [{ key: 'name', sortable: true }],
+          query: { sort: { name: 'desc' } },
+        });
+
+        const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+        expect(nameHeader.tagName).toBe('TH');
+        expect(nameHeader).toHaveAttribute('aria-sort', 'descending');
+      });
+
+      it('sets aria-sort="none" on column header when not sorted', () => {
+        renderView({
+          columns: [{ key: 'name', sortable: true }],
+          query: { sort: {} },
+        });
+
+        const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+        expect(nameHeader.tagName).toBe('TH');
+        expect(nameHeader).toHaveAttribute('aria-sort', 'none');
+      });
+
+      it('does not set aria-sort attribute on non-sortable column headers', () => {
+        renderView({
+          columns: [{ key: 'name', sortable: false }],
+          query: { sort: {} },
+        });
+
+        const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+        expect(nameHeader.tagName).toBe('TH');
+        expect(nameHeader).not.toHaveAttribute('aria-sort');
+      });
+
+      it('sets correct aria-sort values on multiple sortable columns', () => {
+        renderView({
+          columns: [
+            { key: 'name', sortable: true },
+            { key: 'sin', sortable: true },
+          ],
+          query: { sort: { name: 'asc', sin: 'desc' } },
+        });
+
+        const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+        const sinHeader = screen.getByRole('columnheader', { name: /sin/i });
+
+        expect(nameHeader.tagName).toBe('TH');
+        expect(sinHeader.tagName).toBe('TH');
+        expect(nameHeader).toHaveAttribute('aria-sort', 'ascending');
+        expect(sinHeader).toHaveAttribute('aria-sort', 'descending');
+      });
     });
 
     describe('Filtering', () => {

packages/gamut/src/List/ListCol.tsx

@@ -27,7 +27,7 @@ export const ListCol = forwardRef<HTMLDivElement, ListColProps>(
       <ColEl
         {...activeVariants}
         {...rest}
-        aria-sort={!sticky && ariaSort ? ariaSort : undefined}
+        aria-sort={!sticky ? ariaSort : undefined}
         as={colEl}
         columnHeader={columnHeader}
         delimiter={sticky && activeVariants.variant === 'table'}

packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.stories.tsx

@@ -92,7 +92,6 @@ const meta: Meta<typeof DataTable> = {
         header: 'Rank',
         key: 'a very important role',
         size: 'lg',
-        sortable: true,
       },
       { header: 'Ship', key: 'ship', size: 'lg', sortable: true },
       { header: 'Age', key: 'age', size: 'sm', sortable: true },