@digital-ai/dot-components 2.7.4 → 2.8.0

package/index.umd.js

@@ -150,14 +150,16 @@
 
     var DotTooltip = function DotTooltip(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'tooltip' : _b,
         children = _a.children,
         className = _a.className,
         dataTestId = _a["data-testid"],
         leaveDelay = _a.leaveDelay,
         onClose = _a.onClose,
         open = _a.open,
-        _b = _a.placement,
-        placement = _b === void 0 ? 'bottom' : _b,
+        _c = _a.placement,
+        placement = _c === void 0 ? 'bottom' : _c,
         title = _a.title;
       var rootClasses = useStylesWithRootClass('dot-tooltip', className);
       return title ? jsxRuntime.jsx(material.Tooltip, __assign({
@@ -168,6 +170,7 @@
         onClose: onClose,
         open: open,
         placement: placement,
+        role: ariaRole,
         title: title
       }, {
         children: jsxRuntime.jsx("span", {
@@ -187,10 +190,12 @@
 
     var DotIcon = function DotIcon(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'img' : _b,
         className = _a.className,
         dataTestId = _a["data-testid"],
-        _b = _a.fontSize,
-        fontSize = _b === void 0 ? 'medium' : _b,
+        _c = _a.fontSize,
+        fontSize = _c === void 0 ? 'medium' : _c,
         iconId = _a.iconId,
         tooltip = _a.tooltip;
       var rootClasses = useStylesWithRootClass(rootClassName$15, className);
@@ -204,11 +209,13 @@
             root: rootClasses
           },
           "data-testid": dataTestId,
-          fontSize: fontSize
+          fontSize: fontSize,
+          role: ariaRole
         }, {
           children: jsxRuntime.jsx("i", {
             className: "icon-" + iconId + " dot-i",
-            "data-testid": dataTestId && dataTestId + "-i"
+            "data-testid": dataTestId && dataTestId + "-i",
+            role: ariaRole
           }, void 0)
         }), void 0)
       }), void 0);
@@ -216,6 +223,8 @@
 
     var DotTypography = function DotTypography(_a) {
       var ariaLabel = _a.ariaLabel,
+        ariaLevel = _a.ariaLevel,
+        ariaRole = _a.ariaRole,
         className = _a.className,
         dataTestId = _a["data-testid"],
         children = _a.children,
@@ -224,14 +233,21 @@
         noWrap = _a.noWrap,
         variant = _a.variant;
       var rootClasses = useStylesWithRootClass('dot-typography', className);
+      React.useEffect(function () {
+        if (ariaRole === 'heading' && !ariaLevel) {
+          console.warn('please include ariaLevel when using ariaRole="heading"');
+        }
+      }, []);
       return jsxRuntime.jsx(material.Typography, __assign({
         "aria-label": ariaLabel,
+        "aria-level": ariaLevel,
         classes: {
           root: rootClasses
         },
         component: component,
         "data-testid": dataTestId,
         noWrap: noWrap,
+        role: ariaRole,
         style: {
           marginBottom: noMarginBottom ? 0 : undefined
         },
@@ -1872,25 +1888,27 @@
     var DotAvatar = function DotAvatar(_a) {
       var alt = _a.alt,
         ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'img' : _b,
         className = _a.className,
-        _b = _a.component,
-        component = _b === void 0 ? 'div' : _b,
+        _c = _a.component,
+        component = _c === void 0 ? 'div' : _c,
         color = _a.color,
         dataTestId = _a["data-testid"],
         iconId = _a.iconId,
         imageSrc = _a.imageSrc,
         onClick = _a.onClick,
-        _c = _a.size,
-        size = _c === void 0 ? 'medium' : _c,
-        _d = _a.tabIndex,
-        tabIndex = _d === void 0 ? 0 : _d,
-        _e = _a.text,
-        text = _e === void 0 ? alt : _e,
-        _f = _a.type,
-        type = _f === void 0 ? 'image' : _f,
+        _d = _a.size,
+        size = _d === void 0 ? 'medium' : _d,
+        _e = _a.tabIndex,
+        tabIndex = _e === void 0 ? 0 : _e,
+        _f = _a.text,
+        text = _f === void 0 ? alt : _f,
+        _g = _a.type,
+        type = _g === void 0 ? 'image' : _g,
         tooltip = _a.tooltip,
-        _g = _a.variant,
-        variant = _g === void 0 ? 'circular' : _g,
+        _h = _a.variant,
+        variant = _h === void 0 ? 'circular' : _h,
         style = _a.style;
       var rootClasses = useStylesWithRootClass(rootClassName$10, className);
       var getAvatarColor = function getAvatarColor() {
@@ -1915,6 +1933,7 @@
           onClick: function (event) {
             return onClick ? onClick(event) : null;
           },
+          role: onClick ? 'button' : ariaRole,
           src: type === 'image' ? imageSrc : null,
           style: style,
           tabIndex: tooltip ? tabIndex : undefined,
@@ -1924,9 +1943,9 @@
             "data-testid": dataTestId,
             iconId: iconId,
             imageSrc: imageSrc,
+            size: size,
             text: text,
-            type: type,
-            size: size
+            type: type
           }, void 0)
         }), void 0)
       }), void 0);
@@ -1945,29 +1964,31 @@
     /** This component wraps the Button component from @material-ui. */
     var DotButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       var ariaLabel = _a.ariaLabel,
-        _b = _a.autoFocus,
-        autoFocus = _b === void 0 ? false : _b,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'button' : _b,
+        _c = _a.autoFocus,
+        autoFocus = _c === void 0 ? false : _c,
         children = _a.children,
         className = _a.className,
         dataTestId = _a["data-testid"],
-        _c = _a.disabled,
-        disabled = _c === void 0 ? false : _c,
-        _d = _a.disableRipple,
-        disableRipple = _d === void 0 ? false : _d,
+        _d = _a.disabled,
+        disabled = _d === void 0 ? false : _d,
+        _e = _a.disableRipple,
+        disableRipple = _e === void 0 ? false : _e,
         endIcon = _a.endIcon,
-        _e = _a.fullWidth,
-        fullWidth = _e === void 0 ? false : _e,
-        _f = _a.isSubmit,
-        isSubmit = _f === void 0 ? false : _f,
+        _f = _a.fullWidth,
+        fullWidth = _f === void 0 ? false : _f,
+        _g = _a.isSubmit,
+        isSubmit = _g === void 0 ? false : _g,
         onClick = _a.onClick,
         onKeyDown = _a.onKeyDown,
-        _g = _a.size,
-        size = _g === void 0 ? 'medium' : _g,
+        _h = _a.size,
+        size = _h === void 0 ? 'medium' : _h,
         startIcon = _a.startIcon,
         tabIndex = _a.tabIndex,
         tooltip = _a.tooltip,
-        _h = _a.type,
-        type = _h === void 0 ? 'primary' : _h;
+        _j = _a.type,
+        type = _j === void 0 ? 'primary' : _j;
       var rootClasses = useStylesWithRootClass(rootClassName$$, className);
       var color;
       var variant;
@@ -2009,6 +2030,7 @@
           },
           onKeyDown: onKeyDown,
           ref: ref,
+          role: ariaRole,
           size: size,
           startIcon: startIcon,
           tabIndex: tabIndex,
@@ -2031,19 +2053,21 @@
 
     var DotLink = function DotLink(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'link' : _b,
         children = _a.children,
         className = _a.className,
-        _b = _a.color,
-        color = _b === void 0 ? 'primary' : _b,
+        _c = _a.color,
+        color = _c === void 0 ? 'primary' : _c,
         dataTestId = _a["data-testid"],
         href = _a.href,
         onClick = _a.onClick,
         onMouseEnter = _a.onMouseEnter,
         onPointerDown = _a.onPointerDown,
-        _c = _a.rel,
-        rel = _c === void 0 ? 'noreferrer' : _c,
-        _d = _a.tabIndex,
-        tabIndex = _d === void 0 ? 0 : _d,
+        _d = _a.rel,
+        rel = _d === void 0 ? 'noreferrer' : _d,
+        _e = _a.tabIndex,
+        tabIndex = _e === void 0 ? 0 : _e,
         target = _a.target,
         tooltip = _a.tooltip,
         underline = _a.underline;
@@ -2070,6 +2094,7 @@
           onMouseEnter: onMouseEnter,
           onPointerDown: onPointerDown,
           rel: rel,
+          role: ariaRole,
           tabIndex: tabIndex,
           target: target,
           underline: underline
@@ -2390,25 +2415,27 @@
     var DotMenu = function DotMenu(_a) {
       var anchorEl = _a.anchorEl,
         ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'menu' : _b,
         className = _a.className,
         dataTestId = _a["data-testid"],
-        _b = _a.dense,
-        dense = _b === void 0 ? true : _b,
+        _c = _a.dense,
+        dense = _c === void 0 ? true : _c,
         disablePortal = _a.disablePortal,
         id = _a.id,
-        _c = _a.loading,
-        loading = _c === void 0 ? false : _c,
-        _d = _a.maxVisibleItems,
-        maxVisibleItems = _d === void 0 ? DEFAULT_MAX_VISIBLE_ITEMS : _d,
+        _d = _a.loading,
+        loading = _d === void 0 ? false : _d,
+        _e = _a.maxVisibleItems,
+        maxVisibleItems = _e === void 0 ? DEFAULT_MAX_VISIBLE_ITEMS : _e,
         menuItemHeight = _a.menuItemHeight,
-        _e = _a.menuItems,
-        menuItems = _e === void 0 ? [] : _e,
-        _f = _a.menuPlacement,
-        menuPlacement = _f === void 0 ? 'bottom' : _f,
+        _f = _a.menuItems,
+        menuItems = _f === void 0 ? [] : _f,
+        _g = _a.menuPlacement,
+        menuPlacement = _g === void 0 ? 'bottom' : _g,
         onLeave = _a.onLeave,
         onSelect = _a.onSelect,
-        _g = _a.open,
-        open = _g === void 0 ? false : _g,
+        _h = _a.open,
+        open = _h === void 0 ? false : _h,
         selectedKey = _a.selectedKey;
       var rootClasses = useStylesWithRootClass(rootClassName$W, className, loading ? 'loading' : '');
       var isSubmenu = checkIfSubmenu(anchorEl);
@@ -2493,6 +2520,7 @@
                       selectedKey: selectedKey
                     }, void 0);
                   },
+                  ariaRole: ariaRole,
                   selectedKey: selectedKey
                 }, void 0)
               }), void 0)
@@ -2549,21 +2577,23 @@
 
     var DotIconButton = function DotIconButton(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'button' : _b,
         className = _a.className,
-        _b = _a.color,
-        color = _b === void 0 ? 'inherit' : _b,
+        _c = _a.color,
+        color = _c === void 0 ? 'inherit' : _c,
         dataTestId = _a["data-testid"],
-        _c = _a.disabled,
-        disabled = _c === void 0 ? false : _c,
-        _d = _a.disableRipple,
-        disableRipple = _d === void 0 ? false : _d,
+        _d = _a.disabled,
+        disabled = _d === void 0 ? false : _d,
+        _e = _a.disableRipple,
+        disableRipple = _e === void 0 ? false : _e,
         iconId = _a.iconId,
-        _e = _a.iconSize,
-        iconSize = _e === void 0 ? 'small' : _e,
+        _f = _a.iconSize,
+        iconSize = _f === void 0 ? 'small' : _f,
         onClick = _a.onClick,
         tooltip = _a.tooltip,
-        _f = _a.size,
-        size = _f === void 0 ? 'medium' : _f;
+        _g = _a.size,
+        size = _g === void 0 ? 'medium' : _g;
       var rippleClassName = disableRipple ? 'ripple-disabled' : '';
       var rootClasses = useStylesWithRootClass(rootClassName$S, rippleClassName, className);
       return jsxRuntime.jsx(DotTooltip, __assign({
@@ -2582,6 +2612,7 @@
           onClick: function (event) {
             return onClick && onClick(event);
           },
+          role: ariaRole,
           size: size
         }, {
           children: jsxRuntime.jsx(DotIcon, {
@@ -2603,8 +2634,10 @@
       var rootClasses = useStylesWithRootClass(rootClassName$T, className);
       return jsxRuntime.jsxs(StyleDrawerHeader, __assign({
         "aria-label": ariaLabel,
+        "aria-level": 2,
         className: rootClasses,
-        "data-testid": dataTestId
+        "data-testid": dataTestId,
+        role: "heading"
       }, {
         children: [children, variant !== 'permanent' && jsxRuntime.jsx(DotIconButton, {
           className: "close-button",
@@ -2625,6 +2658,8 @@
 
     var DotDrawerBody = function DotDrawerBody(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'region' : _b,
         children = _a.children,
         className = _a.className,
         dataTestId = _a["data-testid"],
@@ -2635,7 +2670,8 @@
       return jsxRuntime.jsxs(StyleDrawerBody, __assign({
         "aria-label": ariaLabel,
         className: rootClasses,
-        "data-testid": dataTestId
+        "data-testid": dataTestId,
+        role: ariaRole
       }, {
         children: [children, !headerExists && variant !== 'permanent' && jsxRuntime.jsx(DotIconButton, {
           className: "dot-drawer-close-button",
@@ -2657,6 +2693,8 @@
 
     var DotDrawerFooter = function DotDrawerFooter(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'region' : _b,
         children = _a.children,
         className = _a.className,
         dataTestId = _a["data-testid"];
@@ -2664,7 +2702,8 @@
       return jsxRuntime.jsx(StyleDrawerFooter, __assign({
         "aria-label": ariaLabel,
         className: rootClasses,
-        "data-testid": dataTestId
+        "data-testid": dataTestId,
+        role: ariaRole
       }, {
         children: children
       }), void 0);
@@ -2674,6 +2713,8 @@
       var _b = _a.anchor,
         anchor = _b === void 0 ? 'right' : _b,
         ariaLabel = _a.ariaLabel,
+        _c = _a.ariaRole,
+        ariaRole = _c === void 0 ? 'presentation' : _c,
         className = _a.className,
         children = _a.children,
         dataTestId = _a["data-testid"],
@@ -2685,10 +2726,10 @@
         onClose = _a.onClose,
         open = _a.open,
         PaperProps = _a.PaperProps,
-        _c = _a.variant,
-        variant = _c === void 0 ? 'temporary' : _c,
-        _d = _a.width,
-        width = _d === void 0 ? '256px' : _d;
+        _d = _a.variant,
+        variant = _d === void 0 ? 'temporary' : _d,
+        _e = _a.width,
+        width = _e === void 0 ? '256px' : _e;
       React.useEffect(function () {
         if (children !== undefined && drawerBodyProps !== undefined) {
           console.warn('Please use `children` or `drawerBodyProps`. If both are used, `children` is ignored.');
@@ -2704,7 +2745,9 @@
       var bodyTestId = drawerBodyProps ? drawerBodyProps["data-testid"] : 'drawer-body';
       return jsxRuntime.jsxs(StyledDrawer, __assign({
         ModalProps: ModalProps,
-        PaperProps: PaperProps,
+        PaperProps: __assign(__assign({}, PaperProps), {
+          role: ariaRole
+        }),
         anchor: anchor,
         "aria-label": ariaLabel,
         classes: {
@@ -2715,6 +2758,7 @@
         height: height,
         onClose: handleClose,
         open: open,
+        role: ariaRole,
         variant: variant,
         width: width
       }, {
@@ -2774,31 +2818,33 @@
     };
     var DotList = function DotList(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'list' : _b,
         children = _a.children,
         className = _a.className,
-        _b = _a.component,
-        component = _b === void 0 ? 'ul' : _b,
+        _c = _a.component,
+        component = _c === void 0 ? 'ul' : _c,
         dataTestId = _a["data-testid"],
-        _c = _a.dense,
-        dense = _c === void 0 ? false : _c,
-        _d = _a.disablePadding,
-        disablePadding = _d === void 0 ? false : _d,
-        _e = _a.items,
-        items = _e === void 0 ? [] : _e,
-        _f = _a.menuPlacement,
-        menuPlacement = _f === void 0 ? 'right-start' : _f,
-        _g = _a.nestedDrawerLeftSpacing,
-        nestedDrawerLeftSpacing = _g === void 0 ? 240 : _g,
-        _h = _a.nestedListType,
-        nestedListType = _h === void 0 ? 'expandable' : _h,
-        _j = _a.width,
-        width = _j === void 0 ? 240 : _j;
+        _d = _a.dense,
+        dense = _d === void 0 ? false : _d,
+        _e = _a.disablePadding,
+        disablePadding = _e === void 0 ? false : _e,
+        _f = _a.items,
+        items = _f === void 0 ? [] : _f,
+        _g = _a.menuPlacement,
+        menuPlacement = _g === void 0 ? 'right-start' : _g,
+        _h = _a.nestedDrawerLeftSpacing,
+        nestedDrawerLeftSpacing = _h === void 0 ? 240 : _h,
+        _j = _a.nestedListType,
+        nestedListType = _j === void 0 ? 'expandable' : _j,
+        _k = _a.width,
+        width = _k === void 0 ? 240 : _k;
       var rootClasses = useStylesWithRootClass(rootClassName$Z, className);
       var listWidth = typeof width === 'number' ? width + "px" : width;
       var listRef = React.useRef();
-      var _k = React.useState(null),
-        listItemIndex = _k[0],
-        setListItemIndex = _k[1];
+      var _l = React.useState(null),
+        listItemIndex = _l[0],
+        setListItemIndex = _l[1];
       var updateSelectedListItem = function updateSelectedListItem(currentIndex) {
         currentIndex === listItemIndex ? setListItemIndex(null) : setListItemIndex(currentIndex);
       };
@@ -2812,6 +2858,7 @@
         dense: dense,
         disablePadding: disablePadding,
         ref: listRef,
+        role: ariaRole,
         style: {
           width: listWidth
         }
@@ -2868,19 +2915,21 @@
     };
     var DotListItem = function DotListItem(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'listitem' : _b,
         className = _a.className,
-        _b = _a.component,
-        component = _b === void 0 ? 'li' : _b,
+        _c = _a.component,
+        component = _c === void 0 ? 'li' : _c,
         dataTestId = _a["data-testid"],
-        _c = _a.divider,
-        divider = _c === void 0 ? false : _c,
+        _d = _a.divider,
+        divider = _d === void 0 ? false : _d,
         endIcon = _a.endIcon,
         href = _a.href,
         isOpened = _a.isOpened,
         onClick = _a.onClick,
         onMenuLeave = _a.onMenuLeave,
-        _d = _a.items,
-        items = _d === void 0 ? [] : _d,
+        _e = _a.items,
+        items = _e === void 0 ? [] : _e,
         menuPlacement = _a.menuPlacement,
         nestedDrawerLeftSpacing = _a.nestedDrawerLeftSpacing,
         nestedListType = _a.nestedListType,
@@ -2891,13 +2940,13 @@
         target = _a.target,
         text = _a.text,
         tooltip = _a.tooltip,
-        _e = _a.tooltipPlacement,
-        tooltipPlacement = _e === void 0 ? DEFAULT_TOOLTIP_PLACEMENT : _e;
+        _f = _a.tooltipPlacement,
+        tooltipPlacement = _f === void 0 ? DEFAULT_TOOLTIP_PLACEMENT : _f;
       var hasChildren = items.length > 0;
       var isFlyout = nestedListType === 'menu' && hasChildren;
-      var _f = React.useState(null),
-        anchorEl = _f[0],
-        setAnchorEl = _f[1];
+      var _g = React.useState(null),
+        anchorEl = _g[0],
+        setAnchorEl = _g[1];
       var showEndIcon = endIcon || hasChildren;
       var rootClasses = useStylesWithRootClass(listItemRootClass, className, isOpened ? 'open' : '');
       var toggleOpen = function toggleOpen(event) {
@@ -2945,6 +2994,7 @@
             divider: divider,
             href: onClick ? null : href,
             onClick: onClick || !href ? handleClick : null,
+            role: onClick ? 'button' : ariaRole,
             selected: isFlyout ? isOpened : selected,
             target: target
           }, {
@@ -3313,22 +3363,24 @@
 
     function SearchInput(_a) {
       var dataTestId = _a["data-testid"],
-        _b = _a.autoFocus,
-        autoFocus = _b === void 0 ? true : _b,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'searchbox' : _b,
+        _c = _a.autoFocus,
+        autoFocus = _c === void 0 ? true : _c,
         className = _a.className,
-        _c = _a.disabled,
-        disabled = _c === void 0 ? false : _c,
+        _d = _a.disabled,
+        disabled = _d === void 0 ? false : _d,
         onChange = _a.onChange,
         onClear = _a.onClear,
-        _d = _a.placeholder,
-        placeholder = _d === void 0 ? 'Search' : _d,
-        _e = _a.tooltip,
-        tooltip = _e === void 0 ? null : _e,
+        _e = _a.placeholder,
+        placeholder = _e === void 0 ? 'Search' : _e,
+        _f = _a.tooltip,
+        tooltip = _f === void 0 ? null : _f,
         value = _a.value;
       var rootClasses = useStylesWithRootClass(rootClassName$P, className);
-      var _f = React.useState(value),
-        searchText = _f[0],
-        setSearchText = _f[1];
+      var _g = React.useState(value),
+        searchText = _g[0],
+        setSearchText = _g[1];
       var previousSearchText = '';
       var handleChange = React.useCallback(function (event) {
         previousSearchText = event.target.value;
@@ -3362,6 +3414,7 @@
           title: tooltip
         }, {
           children: jsxRuntime.jsx(DotInputText, {
+            ariaRole: ariaRole,
             "data-testid": dataTestId,
             autoFocus: autoFocus,
             className: "search-text",
@@ -3882,7 +3935,8 @@
         if (selectedAppType && appTypeMap && appTypeLabels) {
           var labelConfig = appTypeLabels.get(selectedAppType);
           return jsxRuntime.jsxs("div", __assign({
-            className: "content"
+            className: "content",
+            role: "contentinfo"
           }, {
             children: [jsxRuntime.jsx("span", {
               children: jsxRuntime.jsx(DotButton, __assign({
@@ -3898,7 +3952,9 @@
                 }, void 0)
               }), void 0)
             }, void 0), jsxRuntime.jsx("div", __assign({
-              className: "product-heading"
+              "aria-level": 2,
+              className: "product-heading",
+              role: "heading"
             }, {
               children: createAppTypeLabel(selectedAppType, labelConfig.logo, labelConfig.singleTypeApps)
             }), void 0), ((_a = appTypeMap === null || appTypeMap === void 0 ? void 0 : appTypeMap.get(selectedAppType)) === null || _a === void 0 ? void 0 : _a.length) >= searchInstancesThreshold && jsxRuntime.jsx("div", __assign({
@@ -3911,14 +3967,16 @@
                 value: searchText
               }, void 0)
             }), void 0), jsxRuntime.jsx("div", __assign({
-              className: "product-applications"
+              className: "product-applications",
+              role: "list"
             }, {
               children: filteredAppInstances()
             }), void 0)]
           }), void 0);
         } else {
           return jsxRuntime.jsxs("div", __assign({
-            className: "content"
+            className: "content",
+            role: "contentinfo"
           }, {
             children: [jsxRuntime.jsx(DotList, {
               items: appTypeMenuItems === null || appTypeMenuItems === void 0 ? void 0 : appTypeMenuItems.map(function (item) {
@@ -3934,7 +3992,9 @@
       var header = {
         className: 'app-switcher-header',
         children: jsxRuntime.jsxs("div", __assign({
+          "aria-level": 1,
           className: "app-switcher-header-title",
+          role: "heading",
           style: {
             marginTop: yOffset + 'px',
             width: '80%'
@@ -3946,6 +4006,8 @@
             type: "image",
             variant: "circular"
           }, void 0), jsxRuntime.jsx(DotTypography, __assign({
+            ariaRole: "heading",
+            ariaLevel: 1,
             className: "app-switcher-label"
           }, {
             children: "App switcher"
@@ -4744,6 +4806,7 @@
         endAdornmentTooltip = _a.endAdornmentTooltip,
         _e = _a.error,
         error = _e === void 0 ? false : _e,
+        filterOptions = _a.filterOptions,
         _f = _a.filterSelectedOptions,
         filterSelectedOptions = _f === void 0 ? true : _f,
         _g = _a.freesolo,
@@ -4981,6 +5044,7 @@
         "data-testid": dataTestId,
         defaultValue: defaultValue,
         disabled: disabled,
+        filterOptions: filterOptions,
         filterSelectedOptions: filterSelectedOptions,
         freeSolo: freesolo,
         getOptionLabel: function (option) {
@@ -5446,7 +5510,9 @@
           itemsAfterCollapse: itemsAfterCollapse,
           maxItems: getMaxItems(adjustMaxItems, maxVisibleItems, maxItems),
           ref: breadcrumbRef,
+          role: "navigation",
           separator: jsxRuntime.jsx(DotIcon, {
+            ariaRole: "presentation",
             className: "separator",
             iconId: "chevron-right"
           }, void 0)
@@ -6799,6 +6865,7 @@
       return jsxRuntime.jsx(StyledFormControlLabel, {
         className: rootClasses,
         control: radioControl,
+        "aria-label": value,
         label: label || radioControl,
         labelPlacement: labelPlacement,
         value: value
@@ -6807,6 +6874,8 @@
 
     var DotRadioGroup = function DotRadioGroup(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'radiogroup' : _b,
         className = _a.className,
         dataTestId = _a["data-testid"],
         defaultValue = _a.defaultValue,
@@ -6816,22 +6885,22 @@
         helperText = _a.helperText,
         groupLabel = _a.groupLabel,
         name = _a.name,
-        _b = _a.labelPlacement,
-        labelPlacement = _b === void 0 ? 'end' : _b,
+        _c = _a.labelPlacement,
+        labelPlacement = _c === void 0 ? 'end' : _c,
         onChange = _a.onChange,
         value = _a.value,
         options = _a.options,
         startIcon = _a.startIcon,
         required = _a.required,
         row = _a.row,
-        _c = _a.size,
-        size = _c === void 0 ? 'medium' : _c;
+        _d = _a.size,
+        size = _d === void 0 ? 'medium' : _d;
       var placement = "" + placementClassName + labelPlacement;
       var rootClasses = useStylesWithRootClass(rootClassName$A, className, placement);
       var radioValue = value || defaultValue;
-      var _d = React.useState(radioValue),
-        selectedValue = _d[0],
-        setSelectedValue = _d[1];
+      var _e = React.useState(radioValue),
+        selectedValue = _e[0],
+        setSelectedValue = _e[1];
       /* This will ensure that value can be updated from the outside */
       React.useEffect(function () {
         setSelectedValue(radioValue);
@@ -6887,6 +6956,7 @@
             defaultValue: defaultValue,
             name: name,
             onChange: handleChange,
+            role: ariaRole,
             row: row,
             value: selectedValue
           }, {
@@ -7600,39 +7670,41 @@
      */
     var DotInlineEdit = function DotInlineEdit(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'combobox' : _b,
         bindings = _a.bindings,
         charactersLimit = _a.charactersLimit,
         className = _a.className,
         dataTestId = _a["data-testid"],
-        _b = _a.fullWidth,
-        fullWidth = _b === void 0 ? true : _b,
+        _c = _a.fullWidth,
+        fullWidth = _c === void 0 ? true : _c,
         hideActionButtons = _a.hideActionButtons,
         name = _a.name,
         onChange = _a.onChange,
         onEditStateChange = _a.onEditStateChange,
         readOnly = _a.readOnly,
         selectTextOnEdit = _a.selectTextOnEdit,
-        _c = _a.startEditable,
-        startEditable = _c === void 0 ? false : _c,
-        _d = _a.tabIndex,
-        tabIndex = _d === void 0 ? 0 : _d,
+        _d = _a.startEditable,
+        startEditable = _d === void 0 ? false : _d,
+        _e = _a.tabIndex,
+        tabIndex = _e === void 0 ? 0 : _e,
         tooltip = _a.tooltip,
-        _e = _a.typography,
-        typography = _e === void 0 ? 'body1' : _e,
-        _f = _a.value,
-        value = _f === void 0 ? '' : _f;
-      var _g = React.useState(false),
-        editing = _g[0],
-        setEditing = _g[1];
+        _f = _a.typography,
+        typography = _f === void 0 ? 'body1' : _f,
+        _g = _a.value,
+        value = _g === void 0 ? '' : _g;
       var _h = React.useState(false),
-        showTooltip = _h[0],
-        setShowTooltip = _h[1];
-      var _j = React.useState(''),
-        originalValue = _j[0],
-        setOriginalValue = _j[1];
-      var _k = React.useState(value),
-        inputValue = _k[0],
-        setInputValue = _k[1];
+        editing = _h[0],
+        setEditing = _h[1];
+      var _j = React.useState(false),
+        showTooltip = _j[0],
+        setShowTooltip = _j[1];
+      var _k = React.useState(''),
+        originalValue = _k[0],
+        setOriginalValue = _k[1];
+      var _l = React.useState(value),
+        inputValue = _l[0],
+        setInputValue = _l[1];
       var inputRef = React.useRef();
       var inlineEditRef = React.useRef();
       React.useEffect(function () {
@@ -7789,7 +7861,8 @@
           children: viewModeChildren
         }), void 0) : jsxRuntime.jsx("div", __assign({
           className: viewModeClasses,
-          "data-testid": dataTestId && dataTestId + "-view-mode-wrapper"
+          "data-testid": dataTestId && dataTestId + "-view-mode-wrapper",
+          role: "presentation"
         }, {
           children: viewModeChildren
         }), void 0);
@@ -7873,6 +7946,7 @@
           return handleKeyPress(event);
         } : undefined,
         ref: inlineEditRef,
+        role: ariaRole,
         tabIndex: !readOnly ? tabIndex : undefined,
         typography: typography
       }, {
@@ -7969,16 +8043,19 @@
       componentId: "l7oxi2-0"
     })(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n    &.", " {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      &.error {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.success {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.warning {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.in-progress {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n  "], ["\n    &.", " {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      &.error {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.success {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.warning {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.in-progress {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n  "])), rootClassName$n, function (_a) {
+      return styled.css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n    &.", " {\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n      .dot-icon {\n        color: ", ";\n      }\n\n      &.MuiChip-outlined {\n        &.error {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.success {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.warning {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.in-progress {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n      }\n\n      &.MuiChip-filled {\n        &.error {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.success {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.warning {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.in-progress {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n      .dot-icon {\n        color: ", ";\n      }\n\n      &.MuiChip-outlined {\n        &.error {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.success {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.warning {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.in-progress {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n      }\n\n      &.MuiChip-filled {\n        &.error {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.success {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.warning {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.in-progress {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n      }\n    }\n  "])), rootClassName$n, function (_a) {
         var backgroundcolor = _a.backgroundcolor;
         return backgroundcolor || theme.palette.grey[200];
+      }, function (_a) {
+        var bordercolor = _a.bordercolor;
+        return bordercolor ? bordercolor : theme.palette.layer.n700;
       }, function (_a) {
         var labelcolor = _a.labelcolor;
         return labelcolor ? labelcolor : theme.palette.layer.n700;
       }, function (_a) {
-        var bordercolor = _a.bordercolor;
-        return bordercolor ? bordercolor : theme.palette.layer.n700;
-      }, theme.palette.error[100], theme.palette.error.main, theme.palette.error.main, theme.palette.layer.n700, theme.palette.success[100], theme.palette.success.main, theme.palette.success.main, theme.palette.layer.n700, theme.palette.warning[100], theme.palette.warning.main, theme.palette.warning.main, theme.palette.layer.n700, theme.palette.primary[100], theme.palette.primary.main, theme.palette.primary.main, theme.palette.layer.n700);
+        var labelcolor = _a.labelcolor;
+        return labelcolor ? labelcolor : theme.palette.layer.n700;
+      }, theme.palette.error[100], theme.palette.error.main, theme.palette.layer.n700, theme.palette.error.main, theme.palette.success[100], theme.palette.success.main, theme.palette.layer.n700, theme.palette.success.main, theme.palette.warning[100], theme.palette.warning.main, theme.palette.layer.n700, theme.palette.warning.main, theme.palette.primary[100], theme.palette.primary.main, theme.palette.layer.n700, theme.palette.primary.main, theme.palette.error.main, theme.palette.error.main, theme.palette.layer.n0, theme.palette.layer.n0, theme.palette.success.main, theme.palette.success.main, theme.palette.layer.n0, theme.palette.layer.n0, theme.palette.warning.main, theme.palette.warning.main, theme.palette.layer.n700, theme.palette.layer.n700, theme.palette.primary.main, theme.palette.primary.main, theme.palette.layer.n0, theme.palette.layer.n0);
     });
     var templateObject_1$n, templateObject_2$m;
 
@@ -9987,8 +10064,10 @@
     var DotFileUpload = function DotFileUpload(_a) {
       var accept = _a.accept,
         ariaLabel = _a.ariaLabel,
-        _b = _a.buttonOnly,
-        buttonOnly = _b === void 0 ? false : _b,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'region' : _b,
+        _c = _a.buttonOnly,
+        buttonOnly = _c === void 0 ? false : _c,
         className = _a.className,
         dataTestId = _a["data-testid"],
         disabled = _a.disabled,
@@ -9998,12 +10077,12 @@
         onChange = _a.onChange,
         onDragEnter = _a.onDragEnter,
         onFileClick = _a.onFileClick;
-      var _c = React.useState([]),
-        uploadedFiles = _c[0],
-        setUploadedFiles = _c[1];
-      var _d = React.useState(false),
-        hasMaxFilesError = _d[0],
-        setHasMaxFilesError = _d[1];
+      var _d = React.useState([]),
+        uploadedFiles = _d[0],
+        setUploadedFiles = _d[1];
+      var _e = React.useState(false),
+        hasMaxFilesError = _e[0],
+        setHasMaxFilesError = _e[1];
       var isUploadDisabled = disabled || maxFiles && uploadedFiles.length >= maxFiles;
       var rootClasses = useStylesWithRootClass(rootClassName$6, className, !buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
       var maxFilesClasses = useStylesWithRootClass('dot-max-files-message', hasMaxFilesError ? 'dot-max-files-reached' : '');
@@ -10028,7 +10107,7 @@
       var onDrop = React.useCallback(function (acceptedFiles, fileRejections) {
         hideFilesList ? setNewlyUploadedFiles(acceptedFiles, fileRejections) : parseFiles(acceptedFiles, fileRejections);
       }, [hideFilesList, setNewlyUploadedFiles, parseFiles]);
-      var _e = reactDropzone.useDropzone({
+      var _f = reactDropzone.useDropzone({
           accept: accept,
           disabled: isUploadDisabled,
           maxSize: maxSize * 1000000,
@@ -10037,10 +10116,10 @@
           onDragEnter: onDragEnter,
           onDrop: onDrop
         }),
-        getRootProps = _e.getRootProps,
-        getInputProps = _e.getInputProps,
-        isDragActive = _e.isDragActive,
-        open = _e.open;
+        getRootProps = _f.getRootProps,
+        getInputProps = _f.getInputProps,
+        isDragActive = _f.isDragActive,
+        open = _f.open;
       var deleteFile = function deleteFile(fileIndexToBeRemoved) {
         uploadedFiles.splice(fileIndexToBeRemoved, 1);
         setUploadedFiles(__spreadArray([], uploadedFiles));
@@ -10053,7 +10132,8 @@
         uploadedFiles: uploadedFiles
       });
       return jsxRuntime.jsxs(StyledFileUploadContainer, __assign({
-        className: containerClassName$2
+        className: containerClassName$2,
+        role: ariaRole
       }, {
         children: [jsxRuntime.jsxs(StyledFileUpload, __assign({}, getRootProps(), {
           "aria-label": ariaLabel,