move aria-sort

Author: aresnik11

packages/gamut/src/DataList/Controls/SortControl.tsx

@@ -62,13 +62,6 @@ export const SortControl: React.FC<SortControlProps> = ({
   return (
     <SortAnchor
       aria-label={`sort by ${columnKey}`}
-      aria-sort={
-        direction === 'none'
-          ? 'none'
-          : direction === 'asc'
-          ? 'ascending'
-          : 'descending'
-      }
       display="inline-flex"
       variant="interface"
       onClick={() =>

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

@@ -10,6 +10,7 @@ import {
   SortControl,
 } from '../../Controls';
 import { useControlContext } from '../../hooks/useListControls';
+import { useListState } from '../../hooks/useListState';
 import { ColumnConfig, Query } from '../../types';
 import { StyledHeaderRow } from './elements';
 
@@ -35,6 +36,7 @@ export const TableHeaderRow: HeaderComponent = ({
     useControlContext();
   const { variant, listType } = useListContext();
   const dataTablePadding = listType === 'table' && variant === 'table';
+  const headerRowDirections = useListState().query?.sort;
 
   return (
     <StyledHeaderRow
@@ -60,11 +62,19 @@ export const TableHeaderRow: HeaderComponent = ({
           const rowProperty = key as string;
           const renderKey = prefixId(`header-col-${rowProperty}`);
           const columnText = String(header || key);
+          const sortDirection = headerRowDirections?.[rowProperty] ?? 'none';
 
           return (
             <ListCol
               key={renderKey}
               {...colProps}
+              aria-sort={
+                !sortable || sortDirection === 'none'
+                  ? 'none'
+                  : sortDirection === 'asc'
+                  ? 'ascending'
+                  : 'descending'
+              }
               columnHeader
               dataTablePadding={dataTablePadding}
             >

packages/gamut/src/List/ListCol.tsx

@@ -8,31 +8,40 @@ export interface ListColProps
   extends PublicListProps<ComponentProps<typeof ColEl>> {}
 
 export const ListCol = forwardRef<HTMLDivElement, ListColProps>(
-  ({ type, ...rest }, ref) => {
+  ({ type, columnHeader, 'aria-sort': ariaSort, ...rest }, ref) => {
     const { listType, scrollable, ...activeVariants } = useListContext();
     const isOl = listType === 'ol';
     const isTable = listType === 'table';
     const isHeader = type === 'header';
     const sticky = isHeader && scrollable;
     const isOrderedHeader = isOl && isHeader;
+
     const colEl =
-      isTable && !sticky && isHeader ? 'th' : !isTable || sticky ? 'div' : 'td';
+      isTable && !sticky && (isHeader || columnHeader)
+        ? 'th'
+        : !isTable || sticky
+        ? 'div'
+        : 'td';
 
     const col = (
       <ColEl
         {...activeVariants}
         {...rest}
+        aria-sort={!sticky && ariaSort ? ariaSort : undefined}
         as={colEl}
+        columnHeader={columnHeader}
         delimiter={sticky && activeVariants.variant === 'table'}
         lastChildPadding={!(type === 'expandControl')}
         ref={ref}
         sticky={sticky}
         type={isOrderedHeader ? 'orderedHeader' : type}
       />
     );
+
     if (sticky) {
       return (
         <StickyHeaderColWrapper
+          aria-sort={ariaSort}
           as={isTable ? 'th' : 'div'}
           data-testid="header-container"
         >

packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.mdx

@@ -184,8 +184,6 @@ The example below demonstrates the difference between default container query be
 
 ## Playground
 
-If you are using a story named 'Default', you can forgo the `of` prop.
-
 <Canvas sourceState="shown" of={DataTableStories.Default} />
 
 <Controls />