@deque/cauldron-react 4.2.1-canary.d1539456 → 4.3.0-canary.acd760d8

package/lib/components/Table/TableHeader.d.ts

@@ -6,9 +6,11 @@ interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
     sortDirection?: SortDirection;
     onSort?: () => void;
     className?: string;
+    sortAscendingAnnouncement?: string;
+    sortDescendingAnnouncemen?: string;
 }
 declare const TableHeader: {
-    ({ children, sortDirection, onSort, className, ...other }: TableHeaderProps): JSX.Element;
+    ({ children, sortDirection, onSort, className, sortAscendingAnnouncement, sortDescendingAnnouncemen, ...other }: TableHeaderProps): JSX.Element;
     displayName: string;
     propTypes: {
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;

package/lib/index.js

@@ -8123,13 +8123,26 @@ TableHead.propTypes = {
 };
 
 var TableHeader = function (_a) {
-    var children = _a.children, sortDirection = _a.sortDirection, onSort = _a.onSort, className = _a.className, other = tslib.__rest(_a, ["children", "sortDirection", "onSort", "className"]);
+    var children = _a.children, sortDirection = _a.sortDirection, onSort = _a.onSort, className = _a.className, _b = _a.sortAscendingAnnouncement, sortAscendingAnnouncement = _b === void 0 ? 'sorted ascending' : _b, _c = _a.sortDescendingAnnouncemen, sortDescendingAnnouncemen = _c === void 0 ? 'sorted descending' : _c, other = tslib.__rest(_a, ["children", "sortDirection", "onSort", "className", "sortAscendingAnnouncement", "sortDescendingAnnouncemen"]);
+    // When the sort direction changes, we want to announce the change in a live region
+    // because changes to the sort value is not widely supported yet
+    // see: https://a11ysupport.io/tech/aria/aria-sort_attribute
+    var _d = tslib.__read(React.useState(''), 2), announcement = _d[0], setAnnouncement = _d[1];
+    React.useEffect(function () {
+        if (sortDirection !== 'none') {
+            setAnnouncement(sortDirection === 'ascending'
+                ? sortAscendingAnnouncement
+                : sortDescendingAnnouncemen);
+        }
+    }, [sortDirection]);
     return (React__default.createElement("th", tslib.__assign({ "aria-sort": sortDirection, className: classNames('TableHeader', className, {
             'TableHeader--sort-ascending': sortDirection === 'ascending',
             'TableHeader--sort-descending': sortDirection === 'descending'
         }) }, other), !!onSort && !!sortDirection ? (React__default.createElement("button", { onClick: onSort, className: "TableHeader__sort-button", type: "button" },
         children,
-        React__default.createElement("span", { "aria-hidden": "true" }, sortDirection === 'none' ? (React__default.createElement(Icon, { type: "sort-triangle" })) : sortDirection === 'ascending' ? (React__default.createElement(Icon, { type: "triangle-up" })) : (React__default.createElement(Icon, { type: "triangle-down" }))))) : (children)));
+        React__default.createElement("span", { "aria-hidden": "true" }, sortDirection === 'none' ? (React__default.createElement(Icon, { type: "sort-triangle" })) : sortDirection === 'ascending' ? (React__default.createElement(Icon, { type: "triangle-up" })) : (React__default.createElement(Icon, { type: "triangle-down" }))),
+        React__default.createElement(Offscreen, null,
+            React__default.createElement("span", { role: "status", "aria-live": "polite" }, announcement)))) : (children)));
 };
 TableHeader.displayName = 'TableHeader';
 TableHeader.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "4.2.1-canary.d1539456",
+  "version": "4.3.0-canary.acd760d8",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"