@instructure/ui-table 11.7.2-snapshot-50 → 11.7.2-snapshot-52

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.2-snapshot-50](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-50) (2026-04-21)
+## [11.7.2-snapshot-52](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-52) (2026-04-22)
 
-**Note:** Version bump only for package @instructure/ui-table
+
+### Features
+
+* **ui-table:** add screen reader announcements for column sorting ([6b23662](https://github.com/instructure/instructure-ui/commit/6b236623f3818007f17aa73a124ec5627467ece6))
 
 
 

package/es/Table/v1/index.js

@@ -51,21 +51,49 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
   constructor(...args) {
     super(...args);
     this.ref = null;
+    // Reference to hidden aria-live region for announcing caption changes to screen readers
+    this._liveRegionRef = null;
+    // Timeout for delayed announcement (workaround for Safari/VoiceOver caption update bug)
+    this._announcementTimeout = void 0;
     this.handleRef = el => {
-      const elementRef = this.props.elementRef;
+      var _this$props$elementRe, _this$props;
       this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
     };
   }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    var _this$props$makeStyle, _this$props2;
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+  }
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props3;
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    // Announce caption changes for screen readers (especially VoiceOver)
+    // Safari/VoiceOver has a known bug where dynamic <caption> updates aren't announced,
+    // 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
+    const sortingChanged = (prevSortInfo === null || prevSortInfo === void 0 ? void 0 : prevSortInfo.header) !== (currentSortInfo === null || currentSortInfo === void 0 ? void 0 : currentSortInfo.header) || (prevSortInfo === null || prevSortInfo === void 0 ? void 0 : prevSortInfo.direction) !== (currentSortInfo === null || currentSortInfo === void 0 ? void 0 : currentSortInfo.direction);
+    if (sortingChanged && currentSortInfo && this._liveRegionRef) {
+      // Clear any pending announcement
+      clearTimeout(this._announcementTimeout);
+      // Clear the live region first (part of the clear-then-set pattern)
+      this._liveRegionRef.textContent = '';
+      // Wait 100ms before setting new content to ensure screen readers detect the change
+      this._announcementTimeout = setTimeout(() => {
+        if (this._liveRegionRef) {
+          const currentCaption = this.getCaptionText(this.props);
+          // Append non-breaking space (\u00A0) to force Safari/VoiceOver to treat
+          // repeated captions as different announcements
+          this._liveRegionRef.textContent = currentCaption + '\u00A0';
+        }
+      }, 100);
+    }
   }
-  componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  componentWillUnmount() {
+    // Clean up pending announcement timeout
+    clearTimeout(this._announcementTimeout);
   }
   getHeaders() {
     const _Children$toArray = Children.toArray(this.props.children),
@@ -81,27 +109,64 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
       return colHeader.props.children;
     });
   }
+  getSortedHeaderInfo(props) {
+    const _Children$toArray5 = Children.toArray(props.children),
+      _Children$toArray6 = _slicedToArray(_Children$toArray5, 1),
+      headChild = _Children$toArray6[0];
+    const _Children$toArray7 = Children.toArray(/*#__PURE__*/isValidElement(headChild) ? headChild.props.children : []),
+      _Children$toArray8 = _slicedToArray(_Children$toArray7, 1),
+      firstRow = _Children$toArray8[0];
+    const colHeaders = Children.toArray(/*#__PURE__*/isValidElement(firstRow) ? firstRow.props.children : []);
+    // Find the column with an active sort direction
+    for (const colHeader of colHeaders) {
+      if (/*#__PURE__*/isValidElement(colHeader) && colHeader.props.sortDirection && colHeader.props.sortDirection !== 'none') {
+        var _colHeader$props$chil, _colHeader$props$chil2, _colHeader$props$chil3;
+        // Extract header text (may be nested in child components)
+        const headerText = typeof colHeader.props.children === 'string' ? colHeader.props.children : (_colHeader$props$chil = (_colHeader$props$chil2 = colHeader.props.children) === null || _colHeader$props$chil2 === void 0 ? void 0 : (_colHeader$props$chil3 = _colHeader$props$chil2.props) === null || _colHeader$props$chil3 === void 0 ? void 0 : _colHeader$props$chil3.children) !== null && _colHeader$props$chil !== void 0 ? _colHeader$props$chil : '';
+        return {
+          header: headerText,
+          direction: colHeader.props.sortDirection
+        };
+      }
+    }
+    return null;
+  }
+  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();
+  }
   render() {
-    const _this$props3 = this.props,
-      margin = _this$props3.margin,
-      layout = _this$props3.layout,
-      caption = _this$props3.caption,
-      children = _this$props3.children,
-      hover = _this$props3.hover,
-      styles = _this$props3.styles,
-      minWidth = _this$props3.minWidth;
+    const _this$props4 = this.props,
+      margin = _this$props4.margin,
+      layout = _this$props4.layout,
+      caption = _this$props4.caption,
+      children = _this$props4.children,
+      hover = _this$props4.hover,
+      styles = _this$props4.styles,
+      minWidth = _this$props4.minWidth;
     const isStacked = layout === 'stacked';
-    const headers = isStacked ? this.getHeaders() : void 0;
+    const captionText = this.getCaptionText(this.props);
     if (!caption) {
       error(false, `[Table] required prop caption is not set.`);
     }
-    return _jsx(TableContext.Provider, {
+    return _jsxs(TableContext.Provider, {
       value: {
-        isStacked: isStacked,
+        isStacked,
         hover: hover,
-        headers: headers
+        headers: isStacked ? this.getHeaders() : void 0
       },
-      children: _jsxs(View
+      children: [_jsx("div", {
+        ref: el => {
+          this._liveRegionRef = el;
+        },
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        role: "status",
+        css: styles === null || styles === void 0 ? void 0 : styles.liveRegion
+      }), _jsxs(View
       // All HTML props, except the ones accepted by `View` and `Table`
       , {
         ...View.omitViewProps(omitProps(this.props, Table.allowedProps), Table),
@@ -111,20 +176,15 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
         elementRef: this.handleRef,
         css: styles === null || styles === void 0 ? void 0 : styles.table,
         role: isStacked ? 'table' : void 0,
-        "aria-label": isStacked ? caption : void 0,
-        children: [!isStacked && _jsx("caption", {
+        "aria-label": captionText,
+        children: [!isStacked && caption && _jsx("caption", {
           children: _jsx(ScreenReaderContent, {
-            children: caption
+            children: captionText
           })
-        }), Children.map(children, child => {
-          if (/*#__PURE__*/isValidElement(child)) {
-            return safeCloneElement(child, {
-              key: child.props.name
-            });
-          }
-          return child;
-        })]
-      })
+        }), Children.map(children, child => /*#__PURE__*/isValidElement(child) ? safeCloneElement(child, {
+          key: child.props.name
+        }) : child)]
+      })]
     });
   }
 }, _Table.displayName = "Table", _Table.componentId = 'Table', _Table.allowedProps = allowedProps, _Table.defaultProps = {

package/es/Table/v1/styles.js

@@ -52,6 +52,14 @@ const generateStyle = (componentTheme, props) => {
       caption: {
         textAlign: 'start'
       }
+    },
+    liveRegion: {
+      label: 'table__liveRegion',
+      position: 'absolute',
+      left: '-10000px',
+      width: '1px',
+      height: '1px',
+      overflow: 'hidden'
     }
   };
 };

package/es/Table/v2/index.js

@@ -50,21 +50,49 @@ let Table = (_dec = withStyle(generateStyle), _dec(_class = (_Table = class Tabl
   constructor(...args) {
     super(...args);
     this.ref = null;
+    // Reference to hidden aria-live region for announcing caption changes to screen readers
+    this._liveRegionRef = null;
+    // Timeout for delayed announcement (workaround for Safari/VoiceOver caption update bug)
+    this._announcementTimeout = void 0;
     this.handleRef = el => {
-      const elementRef = this.props.elementRef;
+      var _this$props$elementRe, _this$props;
       this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
     };
   }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    var _this$props$makeStyle, _this$props2;
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+  }
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props3;
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    // Announce caption changes for screen readers (especially VoiceOver)
+    // Safari/VoiceOver has a known bug where dynamic <caption> updates aren't announced,
+    // 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
+    const sortingChanged = (prevSortInfo === null || prevSortInfo === void 0 ? void 0 : prevSortInfo.header) !== (currentSortInfo === null || currentSortInfo === void 0 ? void 0 : currentSortInfo.header) || (prevSortInfo === null || prevSortInfo === void 0 ? void 0 : prevSortInfo.direction) !== (currentSortInfo === null || currentSortInfo === void 0 ? void 0 : currentSortInfo.direction);
+    if (sortingChanged && currentSortInfo && this._liveRegionRef) {
+      // Clear any pending announcement
+      clearTimeout(this._announcementTimeout);
+      // Clear the live region first (part of the clear-then-set pattern)
+      this._liveRegionRef.textContent = '';
+      // Wait 100ms before setting new content to ensure screen readers detect the change
+      this._announcementTimeout = setTimeout(() => {
+        if (this._liveRegionRef) {
+          const currentCaption = this.getCaptionText(this.props);
+          // Append non-breaking space (\u00A0) to force Safari/VoiceOver to treat
+          // repeated captions as different announcements
+          this._liveRegionRef.textContent = currentCaption + '\u00A0';
+        }
+      }, 100);
+    }
   }
-  componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  componentWillUnmount() {
+    // Clean up pending announcement timeout
+    clearTimeout(this._announcementTimeout);
   }
   getHeaders() {
     const _Children$toArray = Children.toArray(this.props.children),
@@ -80,27 +108,64 @@ let Table = (_dec = withStyle(generateStyle), _dec(_class = (_Table = class Tabl
       return colHeader.props.children;
     });
   }
+  getSortedHeaderInfo(props) {
+    const _Children$toArray5 = Children.toArray(props.children),
+      _Children$toArray6 = _slicedToArray(_Children$toArray5, 1),
+      headChild = _Children$toArray6[0];
+    const _Children$toArray7 = Children.toArray(/*#__PURE__*/isValidElement(headChild) ? headChild.props.children : []),
+      _Children$toArray8 = _slicedToArray(_Children$toArray7, 1),
+      firstRow = _Children$toArray8[0];
+    const colHeaders = Children.toArray(/*#__PURE__*/isValidElement(firstRow) ? firstRow.props.children : []);
+    // Find the column with an active sort direction
+    for (const colHeader of colHeaders) {
+      if (/*#__PURE__*/isValidElement(colHeader) && colHeader.props.sortDirection && colHeader.props.sortDirection !== 'none') {
+        var _colHeader$props$chil, _colHeader$props$chil2, _colHeader$props$chil3;
+        // Extract header text (may be nested in child components)
+        const headerText = typeof colHeader.props.children === 'string' ? colHeader.props.children : (_colHeader$props$chil = (_colHeader$props$chil2 = colHeader.props.children) === null || _colHeader$props$chil2 === void 0 ? void 0 : (_colHeader$props$chil3 = _colHeader$props$chil2.props) === null || _colHeader$props$chil3 === void 0 ? void 0 : _colHeader$props$chil3.children) !== null && _colHeader$props$chil !== void 0 ? _colHeader$props$chil : '';
+        return {
+          header: headerText,
+          direction: colHeader.props.sortDirection
+        };
+      }
+    }
+    return null;
+  }
+  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();
+  }
   render() {
-    const _this$props3 = this.props,
-      margin = _this$props3.margin,
-      layout = _this$props3.layout,
-      caption = _this$props3.caption,
-      children = _this$props3.children,
-      hover = _this$props3.hover,
-      styles = _this$props3.styles,
-      minWidth = _this$props3.minWidth;
+    const _this$props4 = this.props,
+      margin = _this$props4.margin,
+      layout = _this$props4.layout,
+      caption = _this$props4.caption,
+      children = _this$props4.children,
+      hover = _this$props4.hover,
+      styles = _this$props4.styles,
+      minWidth = _this$props4.minWidth;
     const isStacked = layout === 'stacked';
-    const headers = isStacked ? this.getHeaders() : void 0;
+    const captionText = this.getCaptionText(this.props);
     if (!caption) {
       error(false, `[Table] required prop caption is not set.`);
     }
-    return _jsx(TableContext.Provider, {
+    return _jsxs(TableContext.Provider, {
       value: {
-        isStacked: isStacked,
+        isStacked,
         hover: hover,
-        headers: headers
+        headers: isStacked ? this.getHeaders() : void 0
       },
-      children: _jsxs(View
+      children: [_jsx("div", {
+        ref: el => {
+          this._liveRegionRef = el;
+        },
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        role: "status",
+        css: styles === null || styles === void 0 ? void 0 : styles.liveRegion
+      }), _jsxs(View
       // All HTML props, except the ones accepted by `View` and `Table`
       , {
         ...View.omitViewProps(omitProps(this.props, Table.allowedProps), Table),
@@ -110,20 +175,15 @@ let Table = (_dec = withStyle(generateStyle), _dec(_class = (_Table = class Tabl
         elementRef: this.handleRef,
         css: styles === null || styles === void 0 ? void 0 : styles.table,
         role: isStacked ? 'table' : void 0,
-        "aria-label": isStacked ? caption : void 0,
-        children: [!isStacked && _jsx("caption", {
+        "aria-label": captionText,
+        children: [!isStacked && caption && _jsx("caption", {
           children: _jsx(ScreenReaderContent, {
-            children: caption
+            children: captionText
           })
-        }), Children.map(children, child => {
-          if (/*#__PURE__*/isValidElement(child)) {
-            return safeCloneElement(child, {
-              key: child.props.name
-            });
-          }
-          return child;
-        })]
-      })
+        }), Children.map(children, child => /*#__PURE__*/isValidElement(child) ? safeCloneElement(child, {
+          key: child.props.name
+        }) : child)]
+      })]
     });
   }
 }, _Table.displayName = "Table", _Table.componentId = 'Table', _Table.allowedProps = allowedProps, _Table.defaultProps = {

package/es/Table/v2/styles.js

@@ -52,6 +52,14 @@ const generateStyle = (componentTheme, props, _sharedTokens) => {
       caption: {
         textAlign: 'start'
       }
+    },
+    liveRegion: {
+      label: 'table__liveRegion',
+      position: 'absolute',
+      left: '-10000px',
+      width: '1px',
+      height: '1px',
+      overflow: 'hidden'
     }
   };
 };

package/lib/Table/v1/index.js

@@ -57,21 +57,49 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyleLegacy)(_styles.defaul
   constructor(...args) {
     super(...args);
     this.ref = null;
+    // Reference to hidden aria-live region for announcing caption changes to screen readers
+    this._liveRegionRef = null;
+    // Timeout for delayed announcement (workaround for Safari/VoiceOver caption update bug)
+    this._announcementTimeout = void 0;
     this.handleRef = el => {
-      const elementRef = this.props.elementRef;
+      var _this$props$elementRe, _this$props;
       this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
     };
   }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    var _this$props$makeStyle, _this$props2;
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+  }
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props3;
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    // Announce caption changes for screen readers (especially VoiceOver)
+    // Safari/VoiceOver has a known bug where dynamic <caption> updates aren't announced,
+    // 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
+    const sortingChanged = (prevSortInfo === null || prevSortInfo === void 0 ? void 0 : prevSortInfo.header) !== (currentSortInfo === null || currentSortInfo === void 0 ? void 0 : currentSortInfo.header) || (prevSortInfo === null || prevSortInfo === void 0 ? void 0 : prevSortInfo.direction) !== (currentSortInfo === null || currentSortInfo === void 0 ? void 0 : currentSortInfo.direction);
+    if (sortingChanged && currentSortInfo && this._liveRegionRef) {
+      // Clear any pending announcement
+      clearTimeout(this._announcementTimeout);
+      // Clear the live region first (part of the clear-then-set pattern)
+      this._liveRegionRef.textContent = '';
+      // Wait 100ms before setting new content to ensure screen readers detect the change
+      this._announcementTimeout = setTimeout(() => {
+        if (this._liveRegionRef) {
+          const currentCaption = this.getCaptionText(this.props);
+          // Append non-breaking space (\u00A0) to force Safari/VoiceOver to treat
+          // repeated captions as different announcements
+          this._liveRegionRef.textContent = currentCaption + '\u00A0';
+        }
+      }, 100);
+    }
   }
-  componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  componentWillUnmount() {
+    // Clean up pending announcement timeout
+    clearTimeout(this._announcementTimeout);
   }
   getHeaders() {
     const _Children$toArray = _react.Children.toArray(this.props.children),
@@ -87,27 +115,64 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyleLegacy)(_styles.defaul
       return colHeader.props.children;
     });
   }
+  getSortedHeaderInfo(props) {
+    const _Children$toArray5 = _react.Children.toArray(props.children),
+      _Children$toArray6 = (0, _slicedToArray2.default)(_Children$toArray5, 1),
+      headChild = _Children$toArray6[0];
+    const _Children$toArray7 = _react.Children.toArray(/*#__PURE__*/(0, _react.isValidElement)(headChild) ? headChild.props.children : []),
+      _Children$toArray8 = (0, _slicedToArray2.default)(_Children$toArray7, 1),
+      firstRow = _Children$toArray8[0];
+    const colHeaders = _react.Children.toArray(/*#__PURE__*/(0, _react.isValidElement)(firstRow) ? firstRow.props.children : []);
+    // Find the column with an active sort direction
+    for (const colHeader of colHeaders) {
+      if (/*#__PURE__*/(0, _react.isValidElement)(colHeader) && colHeader.props.sortDirection && colHeader.props.sortDirection !== 'none') {
+        var _colHeader$props$chil, _colHeader$props$chil2, _colHeader$props$chil3;
+        // Extract header text (may be nested in child components)
+        const headerText = typeof colHeader.props.children === 'string' ? colHeader.props.children : (_colHeader$props$chil = (_colHeader$props$chil2 = colHeader.props.children) === null || _colHeader$props$chil2 === void 0 ? void 0 : (_colHeader$props$chil3 = _colHeader$props$chil2.props) === null || _colHeader$props$chil3 === void 0 ? void 0 : _colHeader$props$chil3.children) !== null && _colHeader$props$chil !== void 0 ? _colHeader$props$chil : '';
+        return {
+          header: headerText,
+          direction: colHeader.props.sortDirection
+        };
+      }
+    }
+    return null;
+  }
+  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();
+  }
   render() {
-    const _this$props3 = this.props,
-      margin = _this$props3.margin,
-      layout = _this$props3.layout,
-      caption = _this$props3.caption,
-      children = _this$props3.children,
-      hover = _this$props3.hover,
-      styles = _this$props3.styles,
-      minWidth = _this$props3.minWidth;
+    const _this$props4 = this.props,
+      margin = _this$props4.margin,
+      layout = _this$props4.layout,
+      caption = _this$props4.caption,
+      children = _this$props4.children,
+      hover = _this$props4.hover,
+      styles = _this$props4.styles,
+      minWidth = _this$props4.minWidth;
     const isStacked = layout === 'stacked';
-    const headers = isStacked ? this.getHeaders() : void 0;
+    const captionText = this.getCaptionText(this.props);
     if (!caption) {
       (0, _console.error)(false, `[Table] required prop caption is not set.`);
     }
-    return (0, _jsxRuntime.jsx)(_TableContext.default.Provider, {
+    return (0, _jsxRuntime.jsxs)(_TableContext.default.Provider, {
       value: {
-        isStacked: isStacked,
+        isStacked,
         hover: hover,
-        headers: headers
+        headers: isStacked ? this.getHeaders() : void 0
       },
-      children: (0, _jsxRuntime.jsxs)(_v11_.View
+      children: [(0, _jsxRuntime.jsx)("div", {
+        ref: el => {
+          this._liveRegionRef = el;
+        },
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        role: "status",
+        css: styles === null || styles === void 0 ? void 0 : styles.liveRegion
+      }), (0, _jsxRuntime.jsxs)(_v11_.View
       // All HTML props, except the ones accepted by `View` and `Table`
       , {
         ..._v11_.View.omitViewProps((0, _omitProps.omitProps)(this.props, Table.allowedProps), Table),
@@ -117,20 +182,15 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyleLegacy)(_styles.defaul
         elementRef: this.handleRef,
         css: styles === null || styles === void 0 ? void 0 : styles.table,
         role: isStacked ? 'table' : void 0,
-        "aria-label": isStacked ? caption : void 0,
-        children: [!isStacked && (0, _jsxRuntime.jsx)("caption", {
+        "aria-label": captionText,
+        children: [!isStacked && caption && (0, _jsxRuntime.jsx)("caption", {
           children: (0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
-            children: caption
+            children: captionText
           })
-        }), _react.Children.map(children, child => {
-          if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
-            return (0, _safeCloneElement.safeCloneElement)(child, {
-              key: child.props.name
-            });
-          }
-          return child;
-        })]
-      })
+        }), _react.Children.map(children, child => /*#__PURE__*/(0, _react.isValidElement)(child) ? (0, _safeCloneElement.safeCloneElement)(child, {
+          key: child.props.name
+        }) : child)]
+      })]
     });
   }
 }, _Table.displayName = "Table", _Table.componentId = 'Table', _Table.allowedProps = _props.allowedProps, _Table.defaultProps = {

package/lib/Table/v1/styles.js

@@ -58,6 +58,14 @@ const generateStyle = (componentTheme, props) => {
       caption: {
         textAlign: 'start'
       }
+    },
+    liveRegion: {
+      label: 'table__liveRegion',
+      position: 'absolute',
+      left: '-10000px',
+      width: '1px',
+      height: '1px',
+      overflow: 'hidden'
     }
   };
 };