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

package/lib/components/Code/index.d.ts

@@ -4,6 +4,7 @@ interface Props extends SyntaxHighlighterProps {
     children: React.ReactNode;
     language?: 'javascript' | 'css' | 'html' | 'yaml';
     className?: string;
+    tabIndex?: number;
 }
 declare const Code: React.ComponentType<Props>;
 export default Code;

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/components/TwoColumnPanel/TwoColumnPanel.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
+import SkipLink from '../SkipLink';
 interface TwoColumnPanelProps extends React.HTMLAttributes<HTMLDivElement> {
     initialCollapsed?: boolean;
     showCollapsedPanelLabel?: string;
     hideCollapsedPanelLabel?: string;
+    skipLink?: SkipLink;
 }
 declare const TwoColumnPanel: React.ForwardRefExoticComponent<TwoColumnPanelProps & React.RefAttributes<HTMLDivElement>>;
 export default TwoColumnPanel;

package/lib/index.js

@@ -7984,8 +7984,8 @@ SyntaxHighlighter.registerLanguage('css', css_1);
 SyntaxHighlighter.registerLanguage('html', xml_1);
 SyntaxHighlighter.registerLanguage('yaml', yaml_1);
 var Code = function (_a) {
-    var children = _a.children, className = _a.className, props = tslib.__rest(_a, ["children", "className"]);
-    return (React__default.createElement(SyntaxHighlighter, tslib.__assign({}, props, { useInlineStyles: false, className: classNames('Code', className) }), children));
+    var children = _a.children, className = _a.className, tabIndex = _a.tabIndex, props = tslib.__rest(_a, ["children", "className", "tabIndex"]);
+    return (React__default.createElement(SyntaxHighlighter, tslib.__assign({}, props, { useInlineStyles: false, className: classNames('Code', className), tabIndex: tabIndex }), children));
 };
 Code.displayName = 'Code';
 Code.propTypes = {
@@ -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 = {
@@ -8543,11 +8556,23 @@ var BreadcrumbLink = React.forwardRef(function (_a, ref) {
     return (React__default.createElement(ElementType, tslib.__assign({ className: classNames('Link', 'Breadcrumb__Link', className), ref: ref }, props), children));
 });
 
+var ColumnLeft = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
+    return (React__default.createElement("section", tslib.__assign({ className: classNames('TwoColumnPanel__Left', className) }, props, { ref: ref }), children));
+});
+ColumnLeft.displayName = 'ColumnLeft';
+
+var ColumnRight = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
+    return (React__default.createElement("section", tslib.__assign({ className: classNames('TwoColumnPanel__Right', className) }, props, { ref: ref }), children));
+});
+ColumnRight.displayName = 'ColumnRight';
+
 var TwoColumnPanel = React.forwardRef(function (_a, ref) {
-    var className = _a.className, children = _a.children, _b = _a.initialCollapsed, initialCollapsed = _b === void 0 ? false : _b, _c = _a.showCollapsedPanelLabel, showCollapsedPanelLabel = _c === void 0 ? 'Show Panel' : _c, _d = _a.hideCollapsedPanelLabel, hideCollapsedPanelLabel = _d === void 0 ? 'Hide Panel' : _d, props = tslib.__rest(_a, ["className", "children", "initialCollapsed", "showCollapsedPanelLabel", "hideCollapsedPanelLabel"]);
-    var _e = tslib.__read(React.useState(initialCollapsed), 2), isCollapsed = _e[0], setCollapsed = _e[1];
-    var _f = tslib.__read(React.useState(false), 2), isFocusTrap = _f[0], setIsFocusTrap = _f[1];
-    var _g = tslib.__read(React.useState(!initialCollapsed), 2), showPanel = _g[0], setShowPanel = _g[1];
+    var className = _a.className, children = _a.children, _b = _a.initialCollapsed, initialCollapsed = _b === void 0 ? false : _b, _c = _a.showCollapsedPanelLabel, showCollapsedPanelLabel = _c === void 0 ? 'Show Panel' : _c, _d = _a.hideCollapsedPanelLabel, hideCollapsedPanelLabel = _d === void 0 ? 'Hide Panel' : _d, _e = _a.skipLink, skipLink = _e === void 0 ? null : _e, props = tslib.__rest(_a, ["className", "children", "initialCollapsed", "showCollapsedPanelLabel", "hideCollapsedPanelLabel", "skipLink"]);
+    var _f = tslib.__read(React.useState(initialCollapsed), 2), isCollapsed = _f[0], setCollapsed = _f[1];
+    var _g = tslib.__read(React.useState(false), 2), isFocusTrap = _g[0], setIsFocusTrap = _g[1];
+    var _h = tslib.__read(React.useState(!initialCollapsed), 2), showPanel = _h[0], setShowPanel = _h[1];
     var togglePanel = function () {
         if (isCollapsed) {
             setShowPanel(true);
@@ -8674,6 +8699,7 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
                 fallbackFocus: columnLeftRef.current
             }, containerElements: [columnLeftRef.current] }),
         React__default.createElement(ClickOutsideListener, { onClickOutside: handleClickOutside, target: columnLeftRef.current }),
+        isCollapsed ? null : skipLink,
         showPanel ? ColumnLeftComponent : null,
         ColumnRightComponent));
 });
@@ -8691,18 +8717,6 @@ var ColumnGroupHeader = React.forwardRef(function (_a, ref) {
 });
 ColumnGroupHeader.displayName = 'ColumnGroupHeader';
 
-var ColumnLeft = React.forwardRef(function (_a, ref) {
-    var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
-    return (React__default.createElement("section", tslib.__assign({ className: classNames('TwoColumnPanel__Left', className) }, props, { ref: ref }), children));
-});
-ColumnLeft.displayName = 'ColumnLeft';
-
-var ColumnRight = React.forwardRef(function (_a, ref) {
-    var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
-    return (React__default.createElement("section", tslib.__assign({ className: classNames('TwoColumnPanel__Right', className) }, props, { ref: ref }), children));
-});
-ColumnRight.displayName = 'ColumnRight';
-
 var ColumnList = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
     return (React__default.createElement("div", tslib.__assign({ className: classNames('TwoColumnPanel__List', className) }, props, { ref: ref }), children));

package/package.json

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