@instructure/ui-table 11.7.4-snapshot-102 → 11.7.4-snapshot-103

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-102](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-102) (2026-07-14)
+## [11.7.4-snapshot-103](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-103) (2026-07-14)
 
-**Note:** Version bump only for package @instructure/ui-table
+
+### Bug Fixes
+
+* **ui-table:** fix caption for table to be responsive to sorting ([aac2b17](https://github.com/instructure/instructure-ui/commit/aac2b1790f970a1e8e2d959723eb0e4248105dd2))
 
 
 

package/README.md

@@ -29,7 +29,7 @@ import { Table } from '@instructure/ui-table'
 
 const MyTable = () => {
   return (
-    <Table caption='Top rated movies'>
+    <Table caption={() => 'Top rated movies'}>
       <Table.Head>
         <Table.Row>
           <Table.ColHeader>Rank</Table.ColHeader>

package/es/Table/v1/index.js

@@ -80,9 +80,13 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
     // so we use an aria-live region as a workaround
     const prevSortInfo = this.getSortedHeaderInfo(prevProps);
     const currentSortInfo = this.getSortedHeaderInfo(this.props);
-    // Only announce if sorting actually changed
+    // Only announce if sorting actually changed. A plain ReactNode caption
+    // ignores the sort state (see `getCaptionText`), so we only announce sort
+    // changes when `caption` is a function that can describe them.
     const sortingChanged = prevSortInfo?.header !== currentSortInfo?.header || prevSortInfo?.direction !== currentSortInfo?.direction;
-    if (sortingChanged && currentSortInfo && this._liveRegionRef) {
+    if (sortingChanged && currentSortInfo &&
+    // typeof this.props.caption === 'function' &&
+    this._liveRegionRef) {
       // Clear any pending announcement
       clearTimeout(this._announcementTimeout);
       // Clear the live region first (part of the clear-then-set pattern)
@@ -130,10 +134,14 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
     return null;
   }
   getCaptionText(props) {
+    const {
+      caption
+    } = props;
     const sortInfo = this.getSortedHeaderInfo(props);
-    const caption = props.caption;
-    if (!sortInfo) return caption;
-    const sortText = ` Sorted by ${sortInfo.header} (${sortInfo.direction})`;
+    if (typeof caption === 'function') {
+      return caption(sortInfo?.header ?? '', sortInfo?.direction ?? 'none');
+    }
+    const sortText = ` Sorted by ${sortInfo?.header} (${sortInfo?.direction})`;
     return caption ? caption + sortText : sortText.trim();
   }
   render() {

package/es/Table/v2/index.js

@@ -130,16 +130,12 @@ let Table = (_dec = withStyleNew(generateStyle), _dec(_class = class Table exten
   }
   getCaptionText(props) {
     const sortInfo = this.getSortedHeaderInfo(props);
-    const caption = props.caption;
-    if (!sortInfo) return caption;
-    const sortText = ` Sorted by ${sortInfo.header} (${sortInfo.direction})`;
-    return caption ? caption + sortText : sortText.trim();
+    return props.caption(sortInfo?.header ?? '', sortInfo?.direction ?? 'none');
   }
   render() {
     const {
       margin,
       layout,
-      caption,
       children,
       hover,
       styles,
@@ -147,7 +143,7 @@ let Table = (_dec = withStyleNew(generateStyle), _dec(_class = class Table exten
     } = this.props;
     const isStacked = layout === 'stacked';
     const captionText = this.getCaptionText(this.props);
-    if (!caption) {
+    if (!captionText) {
       error(false, `[Table] required prop caption is not set.`);
     }
     return _jsxs(TableContext.Provider, {
@@ -175,7 +171,7 @@ let Table = (_dec = withStyleNew(generateStyle), _dec(_class = class Table exten
         css: styles?.table,
         role: isStacked ? 'table' : undefined,
         "aria-label": captionText,
-        children: [!isStacked && caption && _jsx("caption", {
+        children: [!isStacked && captionText && _jsx("caption", {
           children: _jsx(ScreenReaderContent, {
             children: captionText
           })

package/lib/Table/v1/index.js

@@ -86,9 +86,13 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyle)(_styles.default, _th
     // so we use an aria-live region as a workaround
     const prevSortInfo = this.getSortedHeaderInfo(prevProps);
     const currentSortInfo = this.getSortedHeaderInfo(this.props);
-    // Only announce if sorting actually changed
+    // Only announce if sorting actually changed. A plain ReactNode caption
+    // ignores the sort state (see `getCaptionText`), so we only announce sort
+    // changes when `caption` is a function that can describe them.
     const sortingChanged = prevSortInfo?.header !== currentSortInfo?.header || prevSortInfo?.direction !== currentSortInfo?.direction;
-    if (sortingChanged && currentSortInfo && this._liveRegionRef) {
+    if (sortingChanged && currentSortInfo &&
+    // typeof this.props.caption === 'function' &&
+    this._liveRegionRef) {
       // Clear any pending announcement
       clearTimeout(this._announcementTimeout);
       // Clear the live region first (part of the clear-then-set pattern)
@@ -136,10 +140,14 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyle)(_styles.default, _th
     return null;
   }
   getCaptionText(props) {
+    const {
+      caption
+    } = props;
     const sortInfo = this.getSortedHeaderInfo(props);
-    const caption = props.caption;
-    if (!sortInfo) return caption;
-    const sortText = ` Sorted by ${sortInfo.header} (${sortInfo.direction})`;
+    if (typeof caption === 'function') {
+      return caption(sortInfo?.header ?? '', sortInfo?.direction ?? 'none');
+    }
+    const sortText = ` Sorted by ${sortInfo?.header} (${sortInfo?.direction})`;
     return caption ? caption + sortText : sortText.trim();
   }
   render() {

package/lib/Table/v2/index.js

@@ -136,16 +136,12 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyleNew)(_styles.default),
   }
   getCaptionText(props) {
     const sortInfo = this.getSortedHeaderInfo(props);
-    const caption = props.caption;
-    if (!sortInfo) return caption;
-    const sortText = ` Sorted by ${sortInfo.header} (${sortInfo.direction})`;
-    return caption ? caption + sortText : sortText.trim();
+    return props.caption(sortInfo?.header ?? '', sortInfo?.direction ?? 'none');
   }
   render() {
     const {
       margin,
       layout,
-      caption,
       children,
       hover,
       styles,
@@ -153,7 +149,7 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyleNew)(_styles.default),
     } = this.props;
     const isStacked = layout === 'stacked';
     const captionText = this.getCaptionText(this.props);
-    if (!caption) {
+    if (!captionText) {
       (0, _console.error)(false, `[Table] required prop caption is not set.`);
     }
     return (0, _jsxRuntime.jsxs)(_TableContext.default.Provider, {
@@ -181,7 +177,7 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyleNew)(_styles.default),
         css: styles?.table,
         role: isStacked ? 'table' : undefined,
         "aria-label": captionText,
-        children: [!isStacked && caption && (0, _jsxRuntime.jsx)("caption", {
+        children: [!isStacked && captionText && (0, _jsxRuntime.jsx)("caption", {
           children: (0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
             children: captionText
           })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-table",
-  "version": "11.7.4-snapshot-102",
+  "version": "11.7.4-snapshot-103",
   "description": "A styled HTML table component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,25 +15,25 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/console": "11.7.4-snapshot-102",
-    "@instructure/emotion": "11.7.4-snapshot-102",
-    "@instructure/ui-a11y-content": "11.7.4-snapshot-102",
-    "@instructure/ui-icons": "11.7.4-snapshot-102",
-    "@instructure/shared-types": "11.7.4-snapshot-102",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-102",
-    "@instructure/ui-simple-select": "11.7.4-snapshot-102",
-    "@instructure/ui-themes": "11.7.4-snapshot-102",
-    "@instructure/ui-utils": "11.7.4-snapshot-102",
-    "@instructure/ui-view": "11.7.4-snapshot-102"
+    "@instructure/console": "11.7.4-snapshot-103",
+    "@instructure/emotion": "11.7.4-snapshot-103",
+    "@instructure/shared-types": "11.7.4-snapshot-103",
+    "@instructure/ui-a11y-content": "11.7.4-snapshot-103",
+    "@instructure/ui-icons": "11.7.4-snapshot-103",
+    "@instructure/ui-simple-select": "11.7.4-snapshot-103",
+    "@instructure/ui-themes": "11.7.4-snapshot-103",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-103",
+    "@instructure/ui-view": "11.7.4-snapshot-103",
+    "@instructure/ui-utils": "11.7.4-snapshot-103"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^4.1.9",
-    "@instructure/ui-axe-check": "11.7.4-snapshot-102",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-102",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-102"
+    "@instructure/ui-axe-check": "11.7.4-snapshot-103",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-103",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-103"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Table/v1/index.tsx

@@ -93,11 +93,18 @@ class Table extends Component<TableProps> {
     // so we use an aria-live region as a workaround
     const prevSortInfo = this.getSortedHeaderInfo(prevProps)
     const currentSortInfo = this.getSortedHeaderInfo(this.props)
-    // Only announce if sorting actually changed
+    // Only announce if sorting actually changed. A plain ReactNode caption
+    // ignores the sort state (see `getCaptionText`), so we only announce sort
+    // changes when `caption` is a function that can describe them.
     const sortingChanged =
       prevSortInfo?.header !== currentSortInfo?.header ||
       prevSortInfo?.direction !== currentSortInfo?.direction
-    if (sortingChanged && currentSortInfo && this._liveRegionRef) {
+    if (
+      sortingChanged &&
+      currentSortInfo &&
+      // typeof this.props.caption === 'function' &&
+      this._liveRegionRef
+    ) {
       // Clear any pending announcement
       clearTimeout(this._announcementTimeout)
       // Clear the live region first (part of the clear-then-set pattern)
@@ -154,7 +161,7 @@ class Table extends Component<TableProps> {
         const headerText =
           typeof colHeader.props.children === 'string'
             ? colHeader.props.children
-            : colHeader.props.children?.props?.children ?? ''
+            : (colHeader.props.children?.props?.children ?? '')
         return { header: headerText, direction: colHeader.props.sortDirection }
       }
     }
@@ -162,10 +169,13 @@ class Table extends Component<TableProps> {
   }
 
   getCaptionText(props: TableProps) {
+    const { caption } = props
     const sortInfo = this.getSortedHeaderInfo(props)
-    const caption = props.caption as string
-    if (!sortInfo) return caption
-    const sortText = ` Sorted by ${sortInfo.header} (${sortInfo.direction})`
+    if (typeof caption === 'function') {
+      return caption(sortInfo?.header ?? '', sortInfo?.direction ?? 'none')
+    }
+    const sortText = ` Sorted by ${sortInfo?.header} (${sortInfo?.direction})`
+
     return caption ? caption + sortText : sortText.trim()
   }
 

package/src/Table/v1/props.ts

@@ -31,12 +31,21 @@ import type { OtherHTMLAttributes, TableTheme } from '@instructure/shared-types'
 
 type RowChild = React.ReactElement<{ children: React.ReactElement }>
 
+type TableCaption = (
+  sortByHeader: string,
+  sortDirection: 'none' | 'ascending' | 'descending'
+) => string
+
 type TableOwnProps = {
   /**
    * Provide a screen reader friendly description. Anything passed to this
    * prop will be wrapped by `<ScreenReaderContent>` when it is rendered.
+   *
+   * A plain `ReactNode` (e.g. a string) is rendered as-is and the sort state
+   * is ignored. Pass a function (see {@link TableCaption}) to build a
+   * localized caption that also reflects the current sort state.
    */
-  caption: React.ReactNode
+  caption: React.ReactNode | TableCaption
   /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
@@ -92,6 +101,7 @@ const allowedProps: AllowedPropKeys = [
 export type {
   TableProps,
   TableStyle,
+  TableCaption,
   // children
   RowChild
 }

package/src/Table/v2/README.md

@@ -54,7 +54,7 @@ const Example = () => {
   return (
     <div>
       {renderOptions()}
-      <Table caption="Top rated movies" layout={layout} hover={hover}>
+      <Table caption={() => 'Top rated movies'} layout={layout} hover={hover}>
         <Table.Head>
           <Table.Row>
             <Table.ColHeader id="Rank">Rank</Table.ColHeader>
@@ -114,7 +114,7 @@ const Example = ({ headers, rows }) => {
     >
       {({ layout }) => (
         <div>
-          <Table caption="Top rated movies" layout={layout}>
+          <Table caption={() => 'Top rated movies'} layout={layout}>
             <Table.Head>
               <Table.Row>
                 {(headers || []).map(({ id, text, width, textAlign }) => (
@@ -298,7 +298,7 @@ const SortableTable = ({ caption, headers, rows }) => {
       summary="Set text-align for columns"
       background="default"
     >
-      <Table caption="Set text-align for columns">
+      <Table caption={() => 'Set text-align for columns'}>
         <Table.Head>{renderHeaderRow()}</Table.Head>
         <Table.Body>
           <Table.Row>
@@ -375,7 +375,11 @@ const SortableTable = ({ caption, headers, rows }) => {
 
 render(
   <SortableTable
-    caption="Top rated movies"
+    caption={(sortBy, sortDirection) =>
+      sortBy
+        ? `Top rated movies, sorted by ${sortBy} (${sortDirection})`
+        : 'Top rated movies'
+    }
     headers={[
       {
         id: 'rank',
@@ -682,7 +686,11 @@ const renderRating = (rating) => (
 
 render(
   <SortableTable
-    caption="Top rated movies"
+    caption={(sortBy, sortDirection) =>
+      sortBy
+        ? `Top rated movies, sorted by ${sortBy} (${sortDirection})`
+        : 'Top rated movies'
+    }
     headers={[
       {
         id: 'Rank',
@@ -809,7 +817,7 @@ const Example = () => {
   return (
     <div>
       {renderOptions()}
-      <Table caption="Top rated movies" layout={layout} hover={hover}>
+      <Table caption={() => 'Top rated movies'} layout={layout} hover={hover}>
         <Table.Head>
           <Table.Row>
             <Table.ColHeader id="Rank">Rank</Table.ColHeader>
@@ -918,7 +926,7 @@ const Example = () => {
   return (
     <div>
       {renderOptions()}
-      <Table caption="Top rated movies" layout={layout} hover={hover}>
+      <Table caption={() => 'Top rated movies'} layout={layout} hover={hover}>
         <Table.Head>
           <CustomTableRow>
             <CustomTableCell scope="col">Rank</CustomTableCell>
@@ -1062,7 +1070,7 @@ const Example = () => {
   return (
     <div>
       {renderOptions()}
-      <Table caption="Top rated movies" layout={layout} hover={hover}>
+      <Table caption={() => 'Top rated movies'} layout={layout} hover={hover}>
         <Table.Head>
           <CustomTableRow>
             <CustomTableCell scope="col">Rank</CustomTableCell>

package/src/Table/v2/index.tsx

@@ -162,19 +162,15 @@ class Table extends Component<TableProps> {
 
   getCaptionText(props: TableProps) {
     const sortInfo = this.getSortedHeaderInfo(props)
-    const caption = props.caption as string
-    if (!sortInfo) return caption
-    const sortText = ` Sorted by ${sortInfo.header} (${sortInfo.direction})`
-    return caption ? caption + sortText : sortText.trim()
+    return props.caption(sortInfo?.header ?? '', sortInfo?.direction ?? 'none')
   }
 
   render() {
-    const { margin, layout, caption, children, hover, styles, minWidth } =
-      this.props
+    const { margin, layout, children, hover, styles, minWidth } = this.props
     const isStacked = layout === 'stacked'
     const captionText = this.getCaptionText(this.props)
 
-    if (!caption) {
+    if (!captionText) {
       error(false, `[Table] required prop caption is not set.`)
     }
 
@@ -213,7 +209,7 @@ class Table extends Component<TableProps> {
           aria-label={captionText}
         >
           {/* Caption for visual display and semantic HTML */}
-          {!isStacked && caption && (
+          {!isStacked && captionText && (
             <caption>
               <ScreenReaderContent>{captionText}</ScreenReaderContent>
             </caption>

package/src/Table/v2/props.ts

@@ -32,12 +32,20 @@ import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type RowChild = React.ReactElement<{ children: React.ReactElement }>
 
+type TableCaption = (
+  sortByHeader: string,
+  sortDirection: 'none' | 'ascending' | 'descending'
+) => string
+
 type TableOwnProps = {
   /**
-   * Provide a screen reader friendly description. Anything passed to this
-   * prop will be wrapped by `<ScreenReaderContent>` when it is rendered.
+   * Provide a screen reader friendly description. The returned string is
+   * wrapped by `<ScreenReaderContent>` when it is rendered.
+   *
+   * This is a function so consumers can build a localized caption that also
+   * reflects the current sort state. See {@link TableCaption}.
    */
-  caption: React.ReactNode
+  caption: TableCaption
   /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
@@ -93,6 +101,7 @@ const allowedProps: AllowedPropKeys = [
 export type {
   TableProps,
   TableStyle,
+  TableCaption,
   // children
   RowChild
 }