feat(ui-table): add column ordering to caption

INSTUI-4699

Author: joyenjoyer

packages/ui-table/src/Table/index.tsx

@@ -101,11 +101,43 @@ class Table extends Component<TableProps> {
     })
   }
 
+  getSortedHeaderInfo() {
+    const [headChild] = Children.toArray(this.props.children)
+    if (!headChild || !isValidElement(headChild)) return null
+    const [firstRow] = Children.toArray(headChild.props.children)
+    if (!firstRow || !isValidElement(firstRow)) return null
+    const colHeaders = Children.toArray(firstRow.props.children)
+    for (const colHeader of colHeaders) {
+      if (
+        isValidElement(colHeader) &&
+        colHeader.props.sortDirection &&
+        colHeader.props.sortDirection !== 'none'
+      ) {
+        const headerText =
+          typeof colHeader.props.children === 'string'
+            ? colHeader.props.children
+            : colHeader.props.children?.props?.children ?? ''
+        return {
+          header: headerText,
+          direction: colHeader.props.sortDirection
+        }
+      }
+    }
+    return null
+  }
+
   render() {
     const { margin, layout, caption, children, hover, styles } = this.props
     const isStacked = layout === 'stacked'
     const headers = isStacked ? this.getHeaders() : undefined
 
+    // Add sorting info to caption for screen readers
+    const sortedHeaderInfo = this.getSortedHeaderInfo()
+    let captionText = caption as string
+    if (sortedHeaderInfo) {
+      captionText += `Sorted by ${sortedHeaderInfo.header} (${sortedHeaderInfo.direction})`
+    }
+
     return (
       <TableContext.Provider
         value={{
@@ -124,11 +156,11 @@ class Table extends Component<TableProps> {
           elementRef={this.handleRef}
           css={styles?.table}
           role={isStacked ? 'table' : undefined}
-          aria-label={isStacked ? (caption as string) : undefined}
+          aria-label={isStacked ? captionText : undefined}
         >
           {!isStacked && (
             <caption>
-              <ScreenReaderContent>{caption}</ScreenReaderContent>
+              <ScreenReaderContent>{captionText}</ScreenReaderContent>
             </caption>
           )}
           {Children.map(children, (child) => {