@digital-ai/dot-components 2.7.4 → 2.8.0

package/CHANGE_LOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [2.8.0](https://www.npmjs.com/package/@digital-ai/dot-components) (05/09/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.7.4...2.8.0)
+
+**Features:**
+
+- S-92379: `DotAutoComplete`: expose `filterOptions` prop [\#1479](https://github.com/digital-ai/dot-components/pull/1479) ([dmiletic85](https://github.com/dmiletic85))
+
+**Fixed bugs:**
+
+- D-24399: Add filled pill css and include a few sample icon choices in stories [\#1477](https://github.com/digital-ai/dot-components/pull/1477) ([jmcnally](https://github.com/jmcnally))
+
+**Misc:**
+
+- S-91986: `aria-role` on missing components [\#1482](https://github.com/digital-ai/dot-components/pull/1482) ([CWSites](https://github.com/CWSites))
+
 ## [2.7.4](https://www.npmjs.com/package/@digital-ai/dot-components) (05/04/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.7.3...2.7.4)
@@ -418,7 +434,6 @@
 
 **Fixed bugs:**
 
-- S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
 - S-84151: fix e2e tests for Release 2.0 [\#1146](https://github.com/digital-ai/dot-components/pull/1146) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
@@ -449,6 +464,7 @@
 
 **Fixed bugs:**
 
+- S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
 - D-20931: `DotAccordion` - display top border correctly when expanded [\#1232](https://github.com/digital-ai/dot-components/pull/1232) ([CWSites](https://github.com/CWSites))
 - D-22087: `DotRadioGroup` / `DotCheckboxGroup` helper texts do not follow the same styles as other helper texts [\#1225](https://github.com/digital-ai/dot-components/pull/1225) ([dmiletic85](https://github.com/dmiletic85))
 
@@ -528,7 +544,6 @@
 
 **Fixed bugs:**
 
-- D-21245: make sure `data-testid` is passed to nested lists [\#1182](https://github.com/digital-ai/dot-components/pull/1182) ([CWSites](https://github.com/CWSites))
 - D-21267: adjust color of helper text [\#1174](https://github.com/digital-ai/dot-components/pull/1174) ([CWSites](https://github.com/CWSites))
 
 ## [1.17.1](https://www.npmjs.com/package/@digital-ai/dot-components) (05/19/2022)
@@ -537,6 +552,7 @@
 
 **Fixed bugs:**
 
+- D-21245: make sure `data-testid` is passed to nested lists [\#1182](https://github.com/digital-ai/dot-components/pull/1182) ([CWSites](https://github.com/CWSites))
 - D-21287: `DotButtonToggle`: Button size is not respected after tooltip change [\#1171](https://github.com/digital-ai/dot-components/pull/1171) ([dmiletic85](https://github.com/dmiletic85))
 
 ## [1.17.0](https://www.npmjs.com/package/@digital-ai/dot-components) (05/18/2022)
@@ -547,10 +563,6 @@
 
 - S-84947: `DotButtonToggle`: Add tooltip support [\#1166](https://github.com/digital-ai/dot-components/pull/1166) ([dmiletic85](https://github.com/dmiletic85))
 
-**Fixed bugs:**
-
-- D-21265: `helperText` on input fields shouldn't be bold [\#1167](https://github.com/digital-ai/dot-components/pull/1167) ([dmiletic85](https://github.com/dmiletic85))
-
 **Misc:**
 
 - update release template with task for marking stories as done [\#1161](https://github.com/digital-ai/dot-components/pull/1161) ([CWSites](https://github.com/CWSites))
@@ -965,7 +977,6 @@
 
 - \#841 Fix DotDynamicForm initial form state for controls with initialValue false [\#842](https://github.com/digital-ai/dot-components/pull/842) ([selsemore](https://github.com/selsemore))
 - D-19189: Extended sidenav drawer should collapse when another drawer option is clicked [\#830](https://github.com/digital-ai/dot-components/pull/830) ([dmiletic85](https://github.com/dmiletic85))
-- D-19177: `Go back` item in `DotSidebar` is not aligned with rest of items [\#826](https://github.com/digital-ai/dot-components/pull/826) ([dmiletic85](https://github.com/dmiletic85))
 
 **Misc:**
 
@@ -984,6 +995,7 @@
 **Fixed bugs:**
 
 - D-19151: `DotBadge` generates console warnings [\#827](https://github.com/digital-ai/dot-components/pull/827) ([dmiletic85](https://github.com/dmiletic85))
+- D-19177: `Go back` item in `DotSidebar` is not aligned with rest of items [\#826](https://github.com/digital-ai/dot-components/pull/826) ([dmiletic85](https://github.com/dmiletic85))
 
 ## [1.3.4](https://www.npmjs.com/package/@digital-ai/dot-components) (11/30/2021)
 
@@ -1150,6 +1162,10 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.0.12...1.1.0)
 
+**Fixed bugs:**
+
+- D-18665: AppToolbar z-index update [\#685](https://github.com/digital-ai/dot-components/pull/685) ([CWSites](https://github.com/CWSites))
+
 **Misc:**
 
 - MINOR release [\#695](https://github.com/digital-ai/dot-components/pull/695) ([CWSites](https://github.com/CWSites))
@@ -1168,7 +1184,6 @@
 
 - D-18817: set mainMenuItems to `null` by default [\#688](https://github.com/digital-ai/dot-components/pull/688) ([CWSites](https://github.com/CWSites))
 - D-18664: update link to allow for keypress [\#686](https://github.com/digital-ai/dot-components/pull/686) ([CWSites](https://github.com/CWSites))
-- D-18665: AppToolbar z-index update [\#685](https://github.com/digital-ai/dot-components/pull/685) ([CWSites](https://github.com/CWSites))
 - D-18663: Update AutoComplete value typing [\#684](https://github.com/digital-ai/dot-components/pull/684) ([CWSites](https://github.com/CWSites))
 
 **Misc:**

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useState, useEffect, useRef, useMemo, useContext, createContext, forwardRef, Fragment, useCallback, createElement, useLayoutEffect } from 'react';
+import { useEffect, useState, useRef, useMemo, useContext, createContext, forwardRef, Fragment, useCallback, createElement, useLayoutEffect } from 'react';
 import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Alert, Fade, StyledEngineProvider, Avatar, Button, darken, Link, List, ListItem, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItemIcon, Collapse, ListSubheader, Divider, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, RadioGroup, Radio, Switch, Skeleton, Snackbar, ButtonGroup, Stepper, Step, StepLabel, StepContent, TablePagination, TableContainer, TableCell, TableRow, TableBody, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress } from '@mui/material';
 import '@digital-ai/dot-icons';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
@@ -21,6 +21,7 @@ function useStylesWithRootClass(name, className, ...args) {
 
 const DotTooltip = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'tooltip',
   children,
   className,
   'data-testid': dataTestId,
@@ -39,6 +40,7 @@ const DotTooltip = ({
     onClose: onClose,
     open: open,
     placement: _placement,
+    role: _ariaRole,
     title: title
   }, {
     children: jsx("span", {
@@ -55,6 +57,7 @@ const StyledIcon = styled(Icon).withConfig({
 
 const DotIcon = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'img',
   className,
   'data-testid': dataTestId,
   fontSize: _fontSize = 'medium',
@@ -72,11 +75,13 @@ const DotIcon = ({
         root: rootClasses
       },
       "data-testid": dataTestId,
-      fontSize: _fontSize
+      fontSize: _fontSize,
+      role: _ariaRole
     }, {
       children: 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);
@@ -84,6 +89,8 @@ const DotIcon = ({
 
 const DotTypography = ({
   ariaLabel,
+  ariaLevel,
+  ariaRole,
   className,
   'data-testid': dataTestId,
   children,
@@ -93,14 +100,21 @@ const DotTypography = ({
   variant
 }) => {
   const rootClasses = useStylesWithRootClass('dot-typography', className);
+  useEffect(() => {
+    if (ariaRole === 'heading' && !ariaLevel) {
+      console.warn('please include ariaLevel when using ariaRole="heading"');
+    }
+  }, []);
   return jsx(Typography, Object.assign({
     "aria-label": ariaLabel,
+    "aria-level": ariaLevel,
     classes: {
       root: rootClasses
     },
     component: component,
     "data-testid": dataTestId,
     noWrap: noWrap,
+    role: ariaRole,
     style: {
       marginBottom: noMarginBottom ? 0 : undefined
     },
@@ -1655,6 +1669,7 @@ const AvatarContent = ({
 const DotAvatar = ({
   alt,
   ariaLabel,
+  ariaRole: _ariaRole = 'img',
   className,
   component: _component = 'div',
   color,
@@ -1691,6 +1706,7 @@ const DotAvatar = ({
       component: onClick ? 'button' : _component,
       "data-testid": dataTestId,
       onClick: event => onClick ? onClick(event) : null,
+      role: onClick ? 'button' : _ariaRole,
       src: _type === 'image' ? imageSrc : null,
       style: style,
       tabIndex: tooltip ? _tabIndex : undefined,
@@ -1700,9 +1716,9 @@ const DotAvatar = ({
         "data-testid": dataTestId,
         iconId: iconId,
         imageSrc: imageSrc,
+        size: _size,
         text: _text,
-        type: _type,
-        size: _size
+        type: _type
       }, void 0)
     }), void 0)
   }), void 0);
@@ -1719,6 +1735,7 @@ const StyledButton = styled(Button).withConfig({
 /** This component wraps the Button component from @material-ui. */
 const DotButton = /*#__PURE__*/forwardRef(({
   ariaLabel,
+  ariaRole: _ariaRole = 'button',
   autoFocus: _autoFocus = false,
   children,
   className,
@@ -1775,6 +1792,7 @@ const DotButton = /*#__PURE__*/forwardRef(({
       onClick: event => onClick && onClick(event),
       onKeyDown: onKeyDown,
       ref: ref,
+      role: _ariaRole,
       size: _size,
       startIcon: startIcon,
       tabIndex: tabIndex,
@@ -1794,6 +1812,7 @@ const StyledLink = styled(Link).withConfig({
 
 const DotLink = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'link',
   children,
   className,
   color: _color = 'primary',
@@ -1831,6 +1850,7 @@ const DotLink = ({
       onMouseEnter: onMouseEnter,
       onPointerDown: onPointerDown,
       rel: _rel,
+      role: _ariaRole,
       tabIndex: _tabIndex,
       target: target,
       underline: underline
@@ -2126,6 +2146,7 @@ const DotMenuList = /*#__PURE__*/forwardRef(({
 const DotMenu = ({
   anchorEl,
   ariaLabel,
+  ariaRole: _ariaRole = 'menu',
   className,
   'data-testid': dataTestId,
   dense: _dense = true,
@@ -2223,6 +2244,7 @@ const DotMenu = ({
               onSelect: onSelect,
               selectedKey: selectedKey
             }, void 0),
+            ariaRole: _ariaRole,
             selectedKey: selectedKey
           }, void 0)
         }), void 0)
@@ -2269,6 +2291,7 @@ const StyledIconButton = styled(IconButton).withConfig({
 
 const DotIconButton = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'button',
   className,
   color: _color = 'inherit',
   'data-testid': dataTestId,
@@ -2296,6 +2319,7 @@ const DotIconButton = ({
       disableRipple: _disableRipple,
       disabled: _disabled,
       onClick: event => onClick && onClick(event),
+      role: _ariaRole,
       size: _size
     }, {
       children: jsx(DotIcon, {
@@ -2318,8 +2342,10 @@ const DotDrawerHeader = ({
   const rootClasses = useStylesWithRootClass(rootClassName$T, className);
   return jsxs(StyleDrawerHeader, Object.assign({
     "aria-label": ariaLabel,
+    "aria-level": 2,
     className: rootClasses,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    role: "heading"
   }, {
     children: [children, variant !== 'permanent' && jsx(DotIconButton, {
       className: "close-button",
@@ -2337,6 +2363,7 @@ const StyleDrawerBody = styled.div.withConfig({
 
 const DotDrawerBody = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'region',
   children,
   className,
   'data-testid': dataTestId,
@@ -2348,7 +2375,8 @@ const DotDrawerBody = ({
   return jsxs(StyleDrawerBody, Object.assign({
     "aria-label": ariaLabel,
     className: rootClasses,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    role: _ariaRole
   }, {
     children: [children, !headerExists && variant !== 'permanent' && jsx(DotIconButton, {
       className: "dot-drawer-close-button",
@@ -2368,6 +2396,7 @@ const StyleDrawerFooter = styled.div.withConfig({
 
 const DotDrawerFooter = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'region',
   children,
   className,
   'data-testid': dataTestId
@@ -2376,7 +2405,8 @@ const DotDrawerFooter = ({
   return jsx(StyleDrawerFooter, Object.assign({
     "aria-label": ariaLabel,
     className: rootClasses,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    role: _ariaRole
   }, {
     children: children
   }), void 0);
@@ -2385,6 +2415,7 @@ const DotDrawerFooter = ({
 const DotDrawer = ({
   anchor: _anchor = 'right',
   ariaLabel,
+  ariaRole: _ariaRole = 'presentation',
   className,
   children,
   'data-testid': dataTestId,
@@ -2414,7 +2445,9 @@ const DotDrawer = ({
   const bodyTestId = drawerBodyProps ? drawerBodyProps[`data-testid`] : 'drawer-body';
   return jsxs(StyledDrawer, Object.assign({
     ModalProps: ModalProps,
-    PaperProps: PaperProps,
+    PaperProps: Object.assign(Object.assign({}, PaperProps), {
+      role: _ariaRole
+    }),
     anchor: _anchor,
     "aria-label": ariaLabel,
     classes: {
@@ -2425,6 +2458,7 @@ const DotDrawer = ({
     height: height,
     onClose: handleClose,
     open: open,
+    role: _ariaRole,
     variant: _variant,
     width: _width
   }, {
@@ -2483,6 +2517,7 @@ const DotListDivider = ({
 };
 const DotList = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'list',
   children,
   className,
   component: _component = 'ul',
@@ -2512,6 +2547,7 @@ const DotList = ({
     dense: _dense,
     disablePadding: _disablePadding,
     ref: listRef,
+    role: _ariaRole,
     style: {
       width: listWidth
     }
@@ -2568,6 +2604,7 @@ const DotList = ({
 };
 const DotListItem = ({
   ariaLabel,
+  ariaRole: _ariaRole2 = 'listitem',
   className,
   component: _component2 = 'li',
   'data-testid': dataTestId,
@@ -2634,6 +2671,7 @@ const DotListItem = ({
         divider: _divider,
         href: onClick ? null : href,
         onClick: onClick || !href ? handleClick : null,
+        role: onClick ? 'button' : _ariaRole2,
         selected: isFlyout ? isOpened : selected,
         target: target
       }, {
@@ -2984,6 +3022,7 @@ const StyledSearchInput = styled.span.withConfig({
 
 function SearchInput({
   'data-testid': dataTestId,
+  ariaRole = 'searchbox',
   autoFocus = true,
   className,
   disabled = false,
@@ -3028,6 +3067,7 @@ function SearchInput({
       title: tooltip
     }, {
       children: jsx(DotInputText, {
+        ariaRole: ariaRole,
         "data-testid": dataTestId,
         autoFocus: autoFocus,
         className: "search-text",
@@ -3504,7 +3544,8 @@ const DotAppSwitcherView = ({
     if (selectedAppType && appTypeMap && appTypeLabels) {
       const labelConfig = appTypeLabels.get(selectedAppType);
       return jsxs("div", Object.assign({
-        className: "content"
+        className: "content",
+        role: "contentinfo"
       }, {
         children: [jsx("span", {
           children: jsx(DotButton, Object.assign({
@@ -3520,7 +3561,9 @@ const DotAppSwitcherView = ({
             }, void 0)
           }), void 0)
         }, void 0), jsx("div", Object.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 && jsx("div", Object.assign({
@@ -3533,14 +3576,16 @@ const DotAppSwitcherView = ({
             value: searchText
           }, void 0)
         }), void 0), jsx("div", Object.assign({
-          className: "product-applications"
+          className: "product-applications",
+          role: "list"
         }, {
           children: filteredAppInstances()
         }), void 0)]
       }), void 0);
     } else {
       return jsxs("div", Object.assign({
-        className: "content"
+        className: "content",
+        role: "contentinfo"
       }, {
         children: [jsx(DotList, {
           items: appTypeMenuItems === null || appTypeMenuItems === void 0 ? void 0 : appTypeMenuItems.map(item => ({
@@ -3554,7 +3599,9 @@ const DotAppSwitcherView = ({
   const header = {
     className: 'app-switcher-header',
     children: jsxs("div", Object.assign({
+      "aria-level": 1,
       className: "app-switcher-header-title",
+      role: "heading",
       style: {
         marginTop: _yOffset + 'px',
         width: '80%'
@@ -3566,6 +3613,8 @@ const DotAppSwitcherView = ({
         type: "image",
         variant: "circular"
       }, void 0), jsx(DotTypography, Object.assign({
+        ariaRole: "heading",
+        ariaLevel: 1,
         className: "app-switcher-label"
       }, {
         children: "App switcher"
@@ -4307,6 +4356,7 @@ const DotAutoComplete = ({
   disablePortal: _disablePortal = true,
   endAdornmentTooltip,
   error: _error = false,
+  filterOptions,
   filterSelectedOptions: _filterSelectedOptions = true,
   freesolo: _freesolo = true,
   checkIfOptionDisabled,
@@ -4528,6 +4578,7 @@ const DotAutoComplete = ({
     "data-testid": dataTestId,
     defaultValue: defaultValue,
     disabled: _disabled,
+    filterOptions: filterOptions,
     filterSelectedOptions: _filterSelectedOptions,
     freeSolo: _freesolo,
     getOptionLabel: option => parseAutoCompleteValue(option),
@@ -4969,7 +5020,9 @@ const DotBreadcrumbs = ({
       itemsAfterCollapse: itemsAfterCollapse,
       maxItems: getMaxItems(adjustMaxItems, maxVisibleItems, maxItems),
       ref: breadcrumbRef,
+      role: "navigation",
       separator: jsx(DotIcon, {
+        ariaRole: "presentation",
         className: "separator",
         iconId: "chevron-right"
       }, void 0)
@@ -6252,6 +6305,7 @@ function DotRadioButton({
   return jsx(StyledFormControlLabel, {
     className: rootClasses,
     control: radioControl,
+    "aria-label": value,
     label: label || radioControl,
     labelPlacement: labelPlacement,
     value: value
@@ -6260,6 +6314,7 @@ function DotRadioButton({
 
 const DotRadioGroup = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'radiogroup',
   className,
   'data-testid': dataTestId,
   defaultValue,
@@ -6338,6 +6393,7 @@ const DotRadioGroup = ({
         defaultValue: defaultValue,
         name: name,
         onChange: handleChange,
+        role: _ariaRole,
         row: row,
         value: selectedValue
       }, {
@@ -7054,6 +7110,7 @@ const checkIfEmptyValue = inputValue => inputValue.trim() === '';
  */
 const DotInlineEdit = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'combobox',
   bindings,
   charactersLimit,
   className,
@@ -7186,7 +7243,8 @@ const DotInlineEdit = ({
       children: viewModeChildren
     }), void 0) : jsx("div", Object.assign({
       className: viewModeClasses,
-      "data-testid": dataTestId && `${dataTestId}-view-mode-wrapper`
+      "data-testid": dataTestId && `${dataTestId}-view-mode-wrapper`,
+      role: "presentation"
     }, {
       children: viewModeChildren
     }), void 0);
@@ -7258,6 +7316,7 @@ const DotInlineEdit = ({
     onMouseOut: () => handleShowTooltip(false),
     onKeyDown: !readOnly ? event => handleKeyPress(event) : undefined,
     ref: inlineEditRef,
+    role: _ariaRole,
     tabIndex: !readOnly ? _tabIndex : undefined,
     typography: _typography
   }, {
@@ -7344,19 +7403,23 @@ const StyledPill = styled(Chip).withConfig({
   componentId: "l7oxi2-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{background-color:", ";color:", ";border-color:", ";&.error{background-color:", ";border-color:", ";.dot-icon{color:", ";}color:", ";}&.success{background-color:", ";border-color:", ";.dot-icon{color:", ";}color:", ";}&.warning{background-color:", ";border-color:", ";.dot-icon{color:", ";}color:", ";}&.in-progress{background-color:", ";border-color:", ";.dot-icon{color:", ";}color:", ";}"], rootClassName$n, ({
+}) => css(["&.", "{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}&.MuiChip-outlined{&.error{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.success{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.warning{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.in-progress{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}}&.MuiChip-filled{&.error{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.success{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.warning{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.in-progress{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}}}"], rootClassName$n, ({
   backgroundcolor
 }) => {
   return backgroundcolor || theme.palette.grey[200];
+}, ({
+  bordercolor
+}) => {
+  return bordercolor ? bordercolor : theme.palette.layer.n700;
 }, ({
   labelcolor
 }) => {
   return labelcolor ? labelcolor : theme.palette.layer.n700;
 }, ({
-  bordercolor
+  labelcolor
 }) => {
-  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));
+  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));
 
 const DotPill = ({
   ariaLabel,
@@ -9179,6 +9242,7 @@ const joinAcceptedAndRejectedFiles = (filesAccepted, filesRejected) => mapAccept
 const DotFileUpload = ({
   accept,
   ariaLabel,
+  ariaRole: _ariaRole = 'region',
   buttonOnly: _buttonOnly = false,
   className,
   'data-testid': dataTestId,
@@ -9242,7 +9306,8 @@ const DotFileUpload = ({
     uploadedFiles
   });
   return jsxs(StyledFileUploadContainer, Object.assign({
-    className: containerClassName$2
+    className: containerClassName$2,
+    role: _ariaRole
   }, {
     children: [jsxs(StyledFileUpload, Object.assign({}, getRootProps(), {
       "aria-label": ariaLabel,