@digital-ai/dot-components 2.14.1 → 2.15.0

package/CHANGE_LOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [2.15.0](https://www.npmjs.com/package/@digital-ai/dot-components) (09/18/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.14.1...2.15.0)
+
+**Misc:**
+
+- D-26605: addressing issues found during k6i-ui a11y updates [\#1612](https://github.com/digital-ai/dot-components/pull/1612) ([CWSites](https://github.com/CWSites))
+- S-95283 `DotDialog` style improvements [\#1606](https://github.com/digital-ai/dot-components/pull/1606) ([dmiletic85](https://github.com/dmiletic85))
+
 ## [2.14.1](https://www.npmjs.com/package/@digital-ai/dot-components) (09/01/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.14.0...2.14.1)
@@ -449,6 +458,7 @@
 
 - CI: bumps version to 2.2.1 \[skip ci\] \(\#1371\) [\#1372](https://github.com/digital-ai/dot-components/pull/1372) ([CWSites](https://github.com/CWSites))
 - resolving more warnings [\#1369](https://github.com/digital-ai/dot-components/pull/1369) ([CWSites](https://github.com/CWSites))
+- GitHub Action Troubleshooting [\#1368](https://github.com/digital-ai/dot-components/pull/1368) ([CWSites](https://github.com/CWSites))
 
 ## [2.2.1](https://www.npmjs.com/package/@digital-ai/dot-components) (02/08/2023)
 
@@ -468,7 +478,6 @@
 
 **Misc:**
 
-- GitHub Action Troubleshooting [\#1368](https://github.com/digital-ai/dot-components/pull/1368) ([CWSites](https://github.com/CWSites))
 - Upload drip echo icon [\#1366](https://github.com/digital-ai/dot-components/pull/1366) ([pauldigitalai](https://github.com/pauldigitalai))
 - S-90007 Add missing test [\#1362](https://github.com/digital-ai/dot-components/pull/1362) ([angel-git](https://github.com/angel-git))
 - icons-pin-update-Jan-27th [\#1354](https://github.com/digital-ai/dot-components/pull/1354) ([pauldigitalai](https://github.com/pauldigitalai))
@@ -585,10 +594,6 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.0.0-rc.3...1.21.5)
 
-**Fixed bugs:**
-
-- D-22889: `DotInputText` Fix multiline issues [\#1276](https://github.com/digital-ai/dot-components/pull/1276) ([dmiletic85](https://github.com/dmiletic85))
-
 **Misc:**
 
 - Changed Agility icons in dot font [\#1282](https://github.com/digital-ai/dot-components/pull/1282) ([pauldigitalai](https://github.com/pauldigitalai))
@@ -616,6 +621,10 @@
 
 - S-87871 Expose callback when sidebar collapses/expands [\#1274](https://github.com/digital-ai/dot-components/pull/1274) ([angel-git](https://github.com/angel-git))
 
+**Fixed bugs:**
+
+- D-22889: `DotInputText` Fix multiline issues [\#1276](https://github.com/digital-ai/dot-components/pull/1276) ([dmiletic85](https://github.com/dmiletic85))
+
 ## [1.21.3](https://www.npmjs.com/package/@digital-ai/dot-components) (09/28/2022)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.0.0-rc.2...1.21.3)
@@ -660,6 +669,7 @@
 
 - Release Candidate Workflow [\#1251](https://github.com/digital-ai/dot-components/pull/1251) ([CWSites](https://github.com/CWSites))
 - S-85001: add support for react 18 [\#1244](https://github.com/digital-ai/dot-components/pull/1244) ([CWSites](https://github.com/CWSites))
+- S-86694: Extract agility theme [\#1242](https://github.com/digital-ai/dot-components/pull/1242) ([CWSites](https://github.com/CWSites))
 
 ## [1.21.1](https://www.npmjs.com/package/@digital-ai/dot-components) (08/31/2022)
 
@@ -670,10 +680,6 @@
 - D-22238 Add focus state for Avatar With Tooltip [\#1248](https://github.com/digital-ai/dot-components/pull/1248) ([nikolinadapic](https://github.com/nikolinadapic))
 - S-87031: Extended DotPill props to support account list changes [\#1247](https://github.com/digital-ai/dot-components/pull/1247) ([ryangamble](https://github.com/ryangamble))
 
-**Misc:**
-
-- S-86694: Extract agility theme [\#1242](https://github.com/digital-ai/dot-components/pull/1242) ([CWSites](https://github.com/CWSites))
-
 ## [1.21.0](https://www.npmjs.com/package/@digital-ai/dot-components) (08/22/2022)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.20.0...1.21.0)
@@ -1070,7 +1076,6 @@
 **Misc:**
 
 - S-76846: storybook updates `develop` [\#935](https://github.com/digital-ai/dot-components/pull/935) ([CWSites](https://github.com/CWSites))
-- S-76846: Storybook updates [\#931](https://github.com/digital-ai/dot-components/pull/931) ([CWSites](https://github.com/CWSites))
 
 ## [1.6.1](https://www.npmjs.com/package/@digital-ai/dot-components) (01/10/2022)
 
@@ -1270,7 +1275,6 @@
 - S-80109: Expose built-in `leaveDelay`, `onClose`, `open` props on `DotTooltip` component [\#786](https://github.com/digital-ai/dot-components/pull/786) ([dmiletic85](https://github.com/dmiletic85))
 - S-76907: update ButtonToggle styles, update unit tests and add e2e tests [\#785](https://github.com/digital-ai/dot-components/pull/785) ([CWSites](https://github.com/CWSites))
 - S-80048: product wrapper demo [\#782](https://github.com/digital-ai/dot-components/pull/782) ([CWSites](https://github.com/CWSites))
-- S-79985: temporarily remove react-jsonschema-form from library [\#776](https://github.com/digital-ai/dot-components/pull/776) ([TheKeithStewart](https://github.com/TheKeithStewart))
 
 ## [1.3.2](https://www.npmjs.com/package/@digital-ai/dot-components) (11/05/2021)
 
@@ -1284,6 +1288,7 @@
 **Misc:**
 
 - Patch release [\#780](https://github.com/digital-ai/dot-components/pull/780) ([TheKeithStewart](https://github.com/TheKeithStewart))
+- S-79985: temporarily remove react-jsonschema-form from library [\#776](https://github.com/digital-ai/dot-components/pull/776) ([TheKeithStewart](https://github.com/TheKeithStewart))
 - Add submitButtonProps prop to DotJsonSchemaForm component [\#775](https://github.com/digital-ai/dot-components/pull/775) ([selsemore](https://github.com/selsemore))
 - S-76893: Webpack 4 - update peer dependencies [\#768](https://github.com/digital-ai/dot-components/pull/768) ([CWSites](https://github.com/CWSites))
 - S-79957: improve husky [\#765](https://github.com/digital-ai/dot-components/pull/765) ([CWSites](https://github.com/CWSites))

package/index.esm.js

@@ -33,8 +33,8 @@ const DotTooltip = ({
 }) => {
   const rootClasses = useStylesWithRootClass('dot-tooltip', className);
   return title ? jsx(Tooltip, Object.assign({
-    "aria-hidden": open ? false : true,
-    "aria-label": ariaLabel,
+    "aria-hidden": false,
+    "aria-label": ariaLabel || title.toString(),
     className: rootClasses,
     "data-testid": dataTestId,
     leaveDelay: leaveDelay,
@@ -44,9 +44,11 @@ const DotTooltip = ({
     role: _ariaRole,
     title: title
   }, {
-    children: jsx("span", {
+    children: jsx("span", Object.assign({
+      tabIndex: -1
+    }, {
       children: children
-    }, void 0)
+    }), void 0)
   }), void 0) : children;
 };
 
@@ -2544,10 +2546,11 @@ const DotListDivider = ({
 }) => {
   if (item.text) {
     return jsx(ListSubheader, Object.assign({
-      disableSticky: true,
-      role: "heading"
+      disableSticky: true
     }, {
       children: jsx(DotTypography, Object.assign({
+        ariaRole: "heading",
+        ariaLevel: 3,
         variant: "overline"
       }, {
         children: item.text
@@ -2627,6 +2630,7 @@ const DotList = ({
         }, `divider-${index}`);
       }
       return jsx(DotListItem, {
+        ariaLabel: item.text || item.primaryText,
         className: item.className,
         component: item.component,
         "data-testid": `${dataTestId}-item-${index}`,
@@ -2704,18 +2708,17 @@ const DotListItem = ({
     return endIcon;
   };
   const renderListItemLink = jsxs(DotLink, Object.assign({
-    href: href,
     className: listItemLinkClassName,
-    underline: "none",
-    target: target
+    href: href,
+    target: target,
+    underline: "none"
   }, {
     children: [startIcon && jsx(ListItemIcon, {
       children: startIcon
     }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
   }), void 0);
   return jsx(StyledListItem, Object.assign({
-    "aria-label": ariaLabel,
-    button: true,
+    "aria-label": ariaLabel || tooltip,
     classes: {
       root: rootClasses
     },
@@ -2724,7 +2727,7 @@ const DotListItem = ({
     divider: _divider,
     href: onClick ? null : href,
     onClick: onClick || !href ? handleClick : null,
-    role: onClick ? 'button' : _ariaRole2,
+    role: _ariaRole2,
     selected: isFlyout ? isOpened : selected,
     target: target
   }, {
@@ -3655,7 +3658,6 @@ const DotAppSwitcherView = ({
         role: "contentinfo"
       }, {
         children: [jsx(DotList, {
-          ariaRole: "presentation",
           items: appTypeMenuItems === null || appTypeMenuItems === void 0 ? void 0 : appTypeMenuItems.map(item => ({
             child: item.children
           })),
@@ -3691,17 +3693,19 @@ const DotAppSwitcherView = ({
   };
   return jsx(StyledAppSwitcher, Object.assign({
     ariaLabel: "App Switcher",
+    ariaRole: "dialog",
+    "aria-modal": "true",
     className: rootClasses,
+    drawerHeaderProps: header,
     ModalProps: {
       style: {
         zIndex: _zIndex
       }
     },
-    drawerHeaderProps: header,
-    variant: "temporary",
-    width: "340px",
     open: open,
-    onClose: closeHandler
+    onClose: closeHandler,
+    width: "340px",
+    variant: "temporary"
   }, {
     children: content()
   }), void 0);
@@ -4021,6 +4025,7 @@ const DotSidebar = ({
         onClick: backItem.onClick,
         tooltip: backItem.title || backItem.text
       }, void 0), jsx(DotTypography, Object.assign({
+        ariaLevel: 4,
         className: "back-button-text",
         variant: "h4",
         noWrap: true
@@ -5560,7 +5565,7 @@ const StyledDialog = styled(Dialog).withConfig({
   componentId: "sc-1tkr4ex-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{.MuiDialog-paper{min-width:280px;max-height:80vh;max-width:80vw;}.MuiDialogTitle-root,.dot-dialog-title{align-items:center;display:flex;flex-wrap:nowrap;padding:", ";h2{flex-grow:1;}.dot-icon-button{margin-left:", ";}}.dot-dialog-content{padding:", ";overflow-y:auto;}.dot-dialog-actions{padding:", ";.cancel-button{color:inherit;}}}"], rootClassName$x, theme.spacing(1, 2), theme.spacing(1), theme.spacing(1, 2), theme.spacing(1)));
+}) => css(["&.", "{.MuiDialog-paper{min-width:280px;max-height:80vh;max-width:80vw;}.MuiDialogTitle-root,.dot-dialog-title{align-items:center;display:flex;flex-wrap:nowrap;padding:", ";h2{flex-grow:1;}.dot-icon-button{margin-left:", ";}}.dot-dialog-content{padding:", ";overflow-y:auto;}.dot-dialog-actions{padding:", ";.cancel-button{color:inherit;}}}"], rootClassName$x, theme.spacing(2, 3), theme.spacing(1), theme.spacing(1, 3), theme.spacing(1, 3, 2, 3)));
 
 const DotDialog = ({
   ariaLabel,
@@ -5607,7 +5612,7 @@ const DotDialog = ({
   };
   return jsxs(StyledDialog, Object.assign({
     "aria-label": ariaLabel,
-    "aria-labelledby": "MuiDialogTitle-root",
+    "aria-labelledby": "dialogTitle",
     classes: {
       root: rootClasses
     },
@@ -5616,7 +5621,9 @@ const DotDialog = ({
     open: isOpen
   }, {
     children: [jsxs("div", Object.assign({
-      className: "dot-dialog-title"
+      id: "dialogTitle",
+      className: "dot-dialog-title",
+      tabIndex: -1
     }, {
       children: [renderNodeOrTypography(title, 'h2'), closeIconVisible && jsx(DotIconButton, {
         ariaLabel: "close dialog",

package/index.umd.js

@@ -163,8 +163,8 @@
         title = _a.title;
       var rootClasses = useStylesWithRootClass('dot-tooltip', className);
       return title ? jsxRuntime.jsx(material.Tooltip, __assign({
-        "aria-hidden": open ? false : true,
-        "aria-label": ariaLabel,
+        "aria-hidden": false,
+        "aria-label": ariaLabel || title.toString(),
         className: rootClasses,
         "data-testid": dataTestId,
         leaveDelay: leaveDelay,
@@ -174,9 +174,11 @@
         role: ariaRole,
         title: title
       }, {
-        children: jsxRuntime.jsx("span", {
+        children: jsxRuntime.jsx("span", __assign({
+          tabIndex: -1
+        }, {
           children: children
-        }, void 0)
+        }), void 0)
       }), void 0) : children;
     };
 
@@ -2848,10 +2850,11 @@
         index = _a.index;
       if (item.text) {
         return jsxRuntime.jsx(material.ListSubheader, __assign({
-          disableSticky: true,
-          role: "heading"
+          disableSticky: true
         }, {
           children: jsxRuntime.jsx(DotTypography, __assign({
+            ariaRole: "heading",
+            ariaLevel: 3,
             variant: "overline"
           }, {
             children: item.text
@@ -2941,6 +2944,7 @@
             }, "divider-" + index);
           }
           return jsxRuntime.jsx(DotListItem, {
+            ariaLabel: item.text || item.primaryText,
             className: item.className,
             component: item.component,
             "data-testid": dataTestId + "-item-" + index,
@@ -3030,18 +3034,17 @@
         return endIcon;
       };
       var renderListItemLink = jsxRuntime.jsxs(DotLink, __assign({
-        href: href,
         className: listItemLinkClassName,
-        underline: "none",
-        target: target
+        href: href,
+        target: target,
+        underline: "none"
       }, {
         children: [startIcon && jsxRuntime.jsx(material.ListItemIcon, {
           children: startIcon
         }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
       }), void 0);
       return jsxRuntime.jsx(StyledListItem, __assign({
-        "aria-label": ariaLabel,
-        button: true,
+        "aria-label": ariaLabel || tooltip,
         classes: {
           root: rootClasses
         },
@@ -3050,7 +3053,7 @@
         divider: divider,
         href: onClick ? null : href,
         onClick: onClick || !href ? handleClick : null,
-        role: onClick ? 'button' : ariaRole,
+        role: ariaRole,
         selected: isFlyout ? isOpened : selected,
         target: target
       }, {
@@ -4049,7 +4052,6 @@
             role: "contentinfo"
           }, {
             children: [jsxRuntime.jsx(DotList, {
-              ariaRole: "presentation",
               items: appTypeMenuItems === null || appTypeMenuItems === void 0 ? void 0 : appTypeMenuItems.map(function (item) {
                 return {
                   child: item.children
@@ -4087,17 +4089,19 @@
       };
       return jsxRuntime.jsx(StyledAppSwitcher, __assign({
         ariaLabel: "App Switcher",
+        ariaRole: "dialog",
+        "aria-modal": "true",
         className: rootClasses,
+        drawerHeaderProps: header,
         ModalProps: {
           style: {
             zIndex: zIndex
           }
         },
-        drawerHeaderProps: header,
-        variant: "temporary",
-        width: "340px",
         open: open,
-        onClose: closeHandler
+        onClose: closeHandler,
+        width: "340px",
+        variant: "temporary"
       }, {
         children: content()
       }), void 0);
@@ -4433,6 +4437,7 @@
             onClick: backItem.onClick,
             tooltip: backItem.title || backItem.text
           }, void 0), jsxRuntime.jsx(DotTypography, __assign({
+            ariaLevel: 4,
             className: "back-button-text",
             variant: "h4",
             noWrap: true
@@ -6079,7 +6084,7 @@
       componentId: "sc-1tkr4ex-0"
     })(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n    &.", " {\n      .MuiDialog-paper {\n        min-width: 280px;\n        max-height: 80vh;\n        max-width: 80vw;\n      }\n\n      .MuiDialogTitle-root,\n      .dot-dialog-title {\n        align-items: center;\n        display: flex;\n        flex-wrap: nowrap;\n        padding: ", ";\n\n        h2 {\n          flex-grow: 1;\n        }\n\n        .dot-icon-button {\n          margin-left: ", ";\n        }\n      }\n\n      .dot-dialog-content {\n        padding: ", ";\n        overflow-y: auto;\n      }\n\n      .dot-dialog-actions {\n        padding: ", ";\n\n        .cancel-button {\n          color: inherit;\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      .MuiDialog-paper {\n        min-width: 280px;\n        max-height: 80vh;\n        max-width: 80vw;\n      }\n\n      .MuiDialogTitle-root,\n      .dot-dialog-title {\n        align-items: center;\n        display: flex;\n        flex-wrap: nowrap;\n        padding: ", ";\n\n        h2 {\n          flex-grow: 1;\n        }\n\n        .dot-icon-button {\n          margin-left: ", ";\n        }\n      }\n\n      .dot-dialog-content {\n        padding: ", ";\n        overflow-y: auto;\n      }\n\n      .dot-dialog-actions {\n        padding: ", ";\n\n        .cancel-button {\n          color: inherit;\n        }\n      }\n    }\n  "])), rootClassName$x, theme.spacing(1, 2), theme.spacing(1), theme.spacing(1, 2), theme.spacing(1));
+      return styled.css(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n    &.", " {\n      .MuiDialog-paper {\n        min-width: 280px;\n        max-height: 80vh;\n        max-width: 80vw;\n      }\n\n      .MuiDialogTitle-root,\n      .dot-dialog-title {\n        align-items: center;\n        display: flex;\n        flex-wrap: nowrap;\n        padding: ", ";\n\n        h2 {\n          flex-grow: 1;\n        }\n\n        .dot-icon-button {\n          margin-left: ", ";\n        }\n      }\n\n      .dot-dialog-content {\n        padding: ", ";\n        overflow-y: auto;\n      }\n\n      .dot-dialog-actions {\n        padding: ", ";\n\n        .cancel-button {\n          color: inherit;\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      .MuiDialog-paper {\n        min-width: 280px;\n        max-height: 80vh;\n        max-width: 80vw;\n      }\n\n      .MuiDialogTitle-root,\n      .dot-dialog-title {\n        align-items: center;\n        display: flex;\n        flex-wrap: nowrap;\n        padding: ", ";\n\n        h2 {\n          flex-grow: 1;\n        }\n\n        .dot-icon-button {\n          margin-left: ", ";\n        }\n      }\n\n      .dot-dialog-content {\n        padding: ", ";\n        overflow-y: auto;\n      }\n\n      .dot-dialog-actions {\n        padding: ", ";\n\n        .cancel-button {\n          color: inherit;\n        }\n      }\n    }\n  "])), rootClassName$x, theme.spacing(2, 3), theme.spacing(1), theme.spacing(1, 3), theme.spacing(1, 3, 2, 3));
     });
     var templateObject_1$A, templateObject_2$z;
 
@@ -6133,7 +6138,7 @@
       };
       return jsxRuntime.jsxs(StyledDialog, __assign({
         "aria-label": ariaLabel,
-        "aria-labelledby": "MuiDialogTitle-root",
+        "aria-labelledby": "dialogTitle",
         classes: {
           root: rootClasses
         },
@@ -6142,7 +6147,9 @@
         open: isOpen
       }, {
         children: [jsxRuntime.jsxs("div", __assign({
-          className: "dot-dialog-title"
+          id: "dialogTitle",
+          className: "dot-dialog-title",
+          tabIndex: -1
         }, {
           children: [renderNodeOrTypography(title, 'h2'), closeIconVisible && jsxRuntime.jsx(DotIconButton, {
             ariaLabel: "close dialog",

package/lib/components/BaseButtonProps.d.ts

@@ -17,6 +17,8 @@ export interface BaseButtonProps extends CommonProps {
     onClick?: (event: MouseEvent<Element> | KeyboardEvent<Element>) => void;
     /** The size of the button */
     size?: ButtonSize;
+    /** Tab order for the button. */
+    tabIndex?: number;
     /** Help text to be displayed on hover  */
     tooltip?: string;
     /** The type of button */

package/lib/components/button/Button.d.ts

@@ -8,8 +8,6 @@ export interface ButtonProps extends BaseButtonProps {
     onKeyDown?: KeyboardEventHandler;
     /** Icon placed before the children. */
     startIcon?: ReactNode;
-    /** Tab order for the button. */
-    tabIndex?: number;
 }
 /** This component wraps the Button component from @material-ui. */
 export declare const DotButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "2.14.1",
+  "version": "2.15.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [