baseui 0.0.0-next-31e82a8 → 0.0.0-next-e90bd38

package/data-table/column.js

@@ -11,6 +11,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _checkbox = require("../checkbox");
 
+var _locale = require("../locale");
+
 var _styles = require("../styles");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -52,6 +54,8 @@ function Column(options) {
     // todo(flow->ts) add proper type annotation
     // eslint-disable-next-line @typescript-eslint/no-explicit-any,react/display-name
     renderCell: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var locale = React.useContext(_locale.LocaleContext);
+
       var _useStyletron = (0, _styles.useStyletron)(),
           _useStyletron2 = _slicedToArray(_useStyletron, 2),
           css = _useStyletron2[0],
@@ -90,6 +94,7 @@ function Column(options) {
           paddingRight: theme.sizing.scale300
         })
       }, /*#__PURE__*/React.createElement(_checkbox.Checkbox, {
+        "aria-label": locale.datatable.selectRow,
         onChange: props.onSelect,
         checked: props.isSelected,
         overrides: {

package/data-table/header-cell.js

@@ -11,6 +11,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _checkbox = require("../checkbox");
 
+var _locale = require("../locale");
+
 var _styles = require("../styles");
 
 var _chevronDown = _interopRequireDefault(require("../icon/chevron-down"));
@@ -46,6 +48,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var locale = React.useContext(_locale.LocaleContext);
+
   var _useStyletron = (0, _styles.useStyletron)(),
       _useStyletron2 = _slicedToArray(_useStyletron, 2),
       css = _useStyletron2[0],
@@ -62,10 +66,9 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if ((0, _focusVisible.isFocusVisible)(event)) {
       setFocusVisible(true);
     }
-  }; // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+  };
 
-  var handleBlur = function handleBlur(event) {
+  var handleBlur = function handleBlur() {
     if (focusVisible !== false) {
       setFocusVisible(false);
     }
@@ -74,60 +77,64 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var backgroundColor = props.isHovered ? theme.colors.backgroundSecondary : theme.colors.backgroundPrimary;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    role: "button",
-    tabIndex: 0,
     className: css(_objectSpread(_objectSpread({}, theme.typography.font350), {}, {
       alignItems: 'center',
       backgroundColor: backgroundColor,
-      boxSizing: 'border-box',
       color: theme.colors.contentPrimary,
-      cursor: props.sortable ? 'pointer' : null,
       display: props.isMeasured ? 'inline-flex' : 'flex',
       flexGrow: 1,
       height: '100%',
-      paddingLeft: theme.sizing.scale500,
-      paddingRight: theme.sizing.scale500,
-      flexWrap: 'nowrap',
-      whiteSpace: 'nowrap',
-      outline: focusVisible ? "3px solid ".concat(theme.colors.accent) : 'none',
-      outlineOffset: '-3px'
-    })),
-    onMouseEnter: props.onMouseEnter,
-    onMouseLeave: props.onMouseLeave,
-    onKeyUp: function onKeyUp(event) {
-      if (event.key === 'Enter') {
-        props.onSort(props.index);
-      }
-    },
-    onClick: function onClick(event) {
-      // Avoid column sort if select-all checkbox click.
-      if (checkboxRef.current && checkboxRef.current.contains(event.target)) {
-        return;
-      }
-
-      if (props.sortable) {
-        props.onSort(props.index);
-      }
-    },
-    onFocus: handleFocus,
-    onBlur: handleBlur
+      paddingLeft: theme.sizing.scale500
+    }))
   }, props.isSelectable && /*#__PURE__*/React.createElement("span", {
     className: css({
       paddingRight: theme.sizing.scale300
     }),
     ref: checkboxRef
-  }, /*#__PURE__*/React.createElement(_checkbox.Checkbox // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  , {
-    onChange: function onChange(e) {
+  }, /*#__PURE__*/React.createElement(_checkbox.Checkbox, {
+    onChange: function onChange() {
       if (props.isSelectedAll || props.isSelectedIndeterminate) {
         props.onSelectNone();
       } else {
         props.onSelectAll();
       }
     },
+    "aria-label": locale.datatable.selectAllRows,
     checked: props.isSelectedAll || props.isSelectedIndeterminate,
     isIndeterminate: props.isSelectedIndeterminate
-  })), props.title, /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: css({
+      alignItems: 'center',
+      backgroundColor: 'transparent',
+      border: 'none',
+      boxSizing: 'border-box',
+      cursor: props.sortable ? 'pointer' : null,
+      display: 'flex',
+      flexGrow: 1,
+      height: '100%',
+      outline: focusVisible ? "3px solid ".concat(theme.colors.accent) : 'none',
+      outlineOffset: '-3px',
+      // paddingLeft: theme.sizing.scale500,
+      paddingRight: theme.sizing.scale500,
+      whiteSpace: 'nowrap'
+    }),
+    onMouseEnter: props.onMouseEnter,
+    onMouseLeave: props.onMouseLeave,
+    onKeyUp: function onKeyUp(event) {
+      if (event.key === 'Enter') {
+        props.onSort(props.index);
+      }
+    },
+    onClick: function onClick() {
+      if (props.sortable) {
+        props.onSort(props.index);
+      }
+    },
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    role: "button",
+    tabIndex: 0
+  }, props.title, /*#__PURE__*/React.createElement("div", {
     className: css({
       position: 'relative',
       width: '100%',
@@ -146,7 +153,7 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     color: props.sortDirection ? theme.colors.contentPrimary : theme.colors.contentSecondary
   }), (props.sortDirection === _constants.SORT_DIRECTIONS.ASC || !props.sortDirection) && /*#__PURE__*/React.createElement(_chevronUp.default, {
     color: props.sortDirection ? theme.colors.contentPrimary : theme.colors.contentSecondary
-  }))));
+  })))));
 });
 HeaderCell.displayName = 'HeaderCell';
 var _default = HeaderCell;

package/data-table/locale.d.ts

@@ -32,6 +32,8 @@ export declare type DataTableLocale = {
     booleanFilterFalse: string;
     booleanColumnTrueShort: string;
     booleanColumnFalseShort: string;
+    selectRow: string;
+    selectAllRows: string;
 };
 declare const locale: {
     emptyState: string;
@@ -67,5 +69,7 @@ declare const locale: {
     booleanFilterFalse: string;
     booleanColumnTrueShort: string;
     booleanColumnFalseShort: string;
+    selectRow: string;
+    selectAllRows: string;
 };
 export default locale;

package/data-table/locale.js

@@ -44,7 +44,9 @@ var locale = {
   booleanFilterTrue: 'true',
   booleanFilterFalse: 'false',
   booleanColumnTrueShort: 'T',
-  booleanColumnFalseShort: 'F'
+  booleanColumnFalseShort: 'F',
+  selectRow: 'Select row',
+  selectAllRows: 'Select all rows'
 };
 var _default = locale;
 exports.default = _default;

package/data-table/locale.js.flow

@@ -40,6 +40,8 @@ export type DataTableLocaleT = {|
   booleanFilterFalse: string,
   booleanColumnTrueShort: string,
   booleanColumnFalseShort: string,
+  selectRow: string,
+  selectAllRows: string,
 |};
 
 const locale = {
@@ -77,6 +79,9 @@ const locale = {
   booleanFilterFalse: 'false',
   booleanColumnTrueShort: 'T',
   booleanColumnFalseShort: 'F',
+  selectRow: 'Select row',
+  selectAllRows: 'Select all rows',
+
 };
 
 export default locale;

package/data-table/stateful-data-table.js

@@ -277,12 +277,12 @@ function StatefulDataTable(props) {
         title: title
       });
     }))), Boolean(selectedRowIds.size) && props.batchActions && /*#__PURE__*/React.createElement("div", {
-      style: {
+      className: css({
         display: 'flex',
         alignItems: 'center',
-        paddingTop: theme.sizing.scale400,
-        paddingBottom: theme.sizing.scale400
-      }
+        paddingTop: theme.sizing.scale300,
+        paddingBottom: theme.sizing.scale300
+      })
     }, props.batchActions.map(function (action) {
       function onClick(event) {
         action.onClick({

package/datepicker/datepicker.js

@@ -619,6 +619,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
+          accessibilityType: _popover.ACCESSIBILITY_TYPE.none,
           focusLock: false,
           autoFocus: false,
           mountNode: _this4.props.mountNode,

package/es/data-table/column.js

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { Checkbox } from '../checkbox';
+import { LocaleContext } from '../locale';
 import { useStyletron } from '../styles';
 
 function Column(options) {
@@ -21,6 +22,7 @@ function Column(options) {
     // todo(flow->ts) add proper type annotation
     // eslint-disable-next-line @typescript-eslint/no-explicit-any,react/display-name
     renderCell: /*#__PURE__*/React.forwardRef((props, ref) => {
+      const locale = React.useContext(LocaleContext);
       const [css, theme] = useStyletron();
       const ProvidedCell = options.renderCell;
       let cellBlockAlign = 'flex-start';
@@ -55,6 +57,7 @@ function Column(options) {
           paddingRight: theme.sizing.scale300
         })
       }, /*#__PURE__*/React.createElement(Checkbox, {
+        "aria-label": locale.datatable.selectRow,
         onChange: props.onSelect,
         checked: props.isSelected,
         overrides: {

package/es/data-table/header-cell.js

@@ -6,12 +6,14 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { Checkbox } from '../checkbox';
+import { LocaleContext } from '../locale';
 import { useStyletron } from '../styles';
 import ChevronDown from '../icon/chevron-down';
 import ChevronUp from '../icon/chevron-up';
 import { SORT_DIRECTIONS } from './constants';
 import { isFocusVisible } from '../utils/focusVisible';
 const HeaderCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const locale = React.useContext(LocaleContext);
   const [css, theme] = useStyletron();
   const [focusVisible, setFocusVisible] = React.useState(false);
   const checkboxRef = React.useRef(null);
@@ -20,10 +22,9 @@ const HeaderCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (isFocusVisible(event)) {
       setFocusVisible(true);
     }
-  }; // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+  };
 
-  const handleBlur = event => {
+  const handleBlur = () => {
     if (focusVisible !== false) {
       setFocusVisible(false);
     }
@@ -32,23 +33,46 @@ const HeaderCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const backgroundColor = props.isHovered ? theme.colors.backgroundSecondary : theme.colors.backgroundPrimary;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    role: "button",
-    tabIndex: 0,
     className: css({ ...theme.typography.font350,
       alignItems: 'center',
       backgroundColor,
-      boxSizing: 'border-box',
       color: theme.colors.contentPrimary,
-      cursor: props.sortable ? 'pointer' : null,
       display: props.isMeasured ? 'inline-flex' : 'flex',
       flexGrow: 1,
       height: '100%',
-      paddingLeft: theme.sizing.scale500,
-      paddingRight: theme.sizing.scale500,
-      flexWrap: 'nowrap',
-      whiteSpace: 'nowrap',
+      paddingLeft: theme.sizing.scale500
+    })
+  }, props.isSelectable && /*#__PURE__*/React.createElement("span", {
+    className: css({
+      paddingRight: theme.sizing.scale300
+    }),
+    ref: checkboxRef
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    onChange: () => {
+      if (props.isSelectedAll || props.isSelectedIndeterminate) {
+        props.onSelectNone();
+      } else {
+        props.onSelectAll();
+      }
+    },
+    "aria-label": locale.datatable.selectAllRows,
+    checked: props.isSelectedAll || props.isSelectedIndeterminate,
+    isIndeterminate: props.isSelectedIndeterminate
+  })), /*#__PURE__*/React.createElement("div", {
+    className: css({
+      alignItems: 'center',
+      backgroundColor: 'transparent',
+      border: 'none',
+      boxSizing: 'border-box',
+      cursor: props.sortable ? 'pointer' : null,
+      display: 'flex',
+      flexGrow: 1,
+      height: '100%',
       outline: focusVisible ? `3px solid ${theme.colors.accent}` : 'none',
-      outlineOffset: '-3px'
+      outlineOffset: '-3px',
+      // paddingLeft: theme.sizing.scale500,
+      paddingRight: theme.sizing.scale500,
+      whiteSpace: 'nowrap'
     }),
     onMouseEnter: props.onMouseEnter,
     onMouseLeave: props.onMouseLeave,
@@ -57,35 +81,16 @@ const HeaderCell = /*#__PURE__*/React.forwardRef((props, ref) => {
         props.onSort(props.index);
       }
     },
-    onClick: event => {
-      // Avoid column sort if select-all checkbox click.
-      if (checkboxRef.current && checkboxRef.current.contains(event.target)) {
-        return;
-      }
-
+    onClick: () => {
       if (props.sortable) {
         props.onSort(props.index);
       }
     },
     onFocus: handleFocus,
-    onBlur: handleBlur
-  }, props.isSelectable && /*#__PURE__*/React.createElement("span", {
-    className: css({
-      paddingRight: theme.sizing.scale300
-    }),
-    ref: checkboxRef
-  }, /*#__PURE__*/React.createElement(Checkbox // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  , {
-    onChange: e => {
-      if (props.isSelectedAll || props.isSelectedIndeterminate) {
-        props.onSelectNone();
-      } else {
-        props.onSelectAll();
-      }
-    },
-    checked: props.isSelectedAll || props.isSelectedIndeterminate,
-    isIndeterminate: props.isSelectedIndeterminate
-  })), props.title, /*#__PURE__*/React.createElement("div", {
+    onBlur: handleBlur,
+    role: "button",
+    tabIndex: 0
+  }, props.title, /*#__PURE__*/React.createElement("div", {
     className: css({
       position: 'relative',
       width: '100%',
@@ -104,7 +109,7 @@ const HeaderCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     color: props.sortDirection ? theme.colors.contentPrimary : theme.colors.contentSecondary
   }), (props.sortDirection === SORT_DIRECTIONS.ASC || !props.sortDirection) && /*#__PURE__*/React.createElement(ChevronUp, {
     color: props.sortDirection ? theme.colors.contentPrimary : theme.colors.contentSecondary
-  }))));
+  })))));
 });
 HeaderCell.displayName = 'HeaderCell';
 export default HeaderCell;

package/es/data-table/locale.js

@@ -37,6 +37,8 @@ const locale = {
   booleanFilterTrue: 'true',
   booleanFilterFalse: 'false',
   booleanColumnTrueShort: 'T',
-  booleanColumnFalseShort: 'F'
+  booleanColumnFalseShort: 'F',
+  selectRow: 'Select row',
+  selectAllRows: 'Select all rows'
 };
 export default locale;

package/es/data-table/stateful-data-table.js

@@ -190,12 +190,12 @@ export function StatefulDataTable(props) {
     rows: props.rows,
     title: title
   })))), Boolean(selectedRowIds.size) && props.batchActions && /*#__PURE__*/React.createElement("div", {
-    style: {
+    className: css({
       display: 'flex',
       alignItems: 'center',
-      paddingTop: theme.sizing.scale400,
-      paddingBottom: theme.sizing.scale400
-    }
+      paddingTop: theme.sizing.scale300,
+      paddingBottom: theme.sizing.scale300
+    })
   }, props.batchActions.map(action => {
     function onClick(event) {
       action.onClick({

package/es/datepicker/datepicker.js

@@ -10,7 +10,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { MaskedInput } from '../input';
-import { Popover, PLACEMENT } from '../popover';
+import { Popover, PLACEMENT, ACCESSIBILITY_TYPE } from '../popover';
 import Calendar from './calendar';
 import { getOverrides } from '../helpers/overrides';
 import getInterpolatedString from '../helpers/i18n-interpolation';
@@ -463,6 +463,7 @@ export default class Datepicker extends React.Component {
     const [EndDate, endDateProps] = getOverrides(overrides.EndDate, StyledEndDate);
     const [InputLabel, inputLabelProps] = getOverrides(overrides.InputLabel, StyledInputLabel);
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
+      accessibilityType: ACCESSIBILITY_TYPE.none,
       focusLock: false,
       autoFocus: false,
       mountNode: this.props.mountNode,

package/es/locale/es_AR.js

@@ -77,7 +77,9 @@ const es_AR = {
     booleanFilterTrue: 'verdadero',
     booleanFilterFalse: 'falso',
     booleanColumnTrueShort: 'V',
-    booleanColumnFalseShort: 'F'
+    booleanColumnFalseShort: 'F',
+    selectRow: 'Seleccionar fila',
+    selectAllRows: 'Seleccionar todas las filas'
   },
   buttongroup: {
     ariaLabel: 'grupo de botones'

package/es/locale/tr_TR.js

@@ -77,7 +77,9 @@ const tr_TR = {
     booleanFilterTrue: 'doğru',
     booleanFilterFalse: 'yanlış',
     booleanColumnTrueShort: 'D',
-    booleanColumnFalseShort: 'Y'
+    booleanColumnFalseShort: 'Y',
+    selectRow: 'satır seç',
+    selectAllRows: 'Tüm satırları seç'
   },
   buttongroup: {
     ariaLabel: 'buton grup'

package/es/popover/popover.js

@@ -151,7 +151,7 @@ class PopoverInner extends React.Component {
   componentDidUpdate(prevProps, prevState) {
     this.init(prevProps, prevState);
 
-    if (this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
+    if (this.props.accessibilityType !== ACCESSIBILITY_TYPE.tooltip && this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
       this.setState({
         autoFocusAfterPositioning: true
       });
@@ -270,10 +270,6 @@ class PopoverInner extends React.Component {
       isOpen
     } = this.props;
     const anchorProps = {
-      'aria-haspopup': true,
-      'aria-expanded': isOpen ? true : false,
-      // @ts-expect-error todo(flow->ts): should it be here?
-      key: 'popover-anchor',
       ref: this.anchorRef
     };
     const popoverId = this.getPopoverIdAttr();
@@ -281,6 +277,8 @@ class PopoverInner extends React.Component {
     if (this.isAccessibilityTypeMenu()) {
       const relationAttr = this.isClickTrigger() ? 'aria-controls' : 'aria-owns';
       anchorProps[relationAttr] = isOpen ? popoverId : null;
+      anchorProps['aria-haspopup'] = true;
+      anchorProps['aria-expanded'] = Boolean(isOpen);
     } else if (this.isAccessibilityTypeTooltip()) {
       anchorProps.id = this.getAnchorIdAttr();
       anchorProps['aria-describedby'] = isOpen ? popoverId : null;
@@ -307,7 +305,6 @@ class PopoverInner extends React.Component {
       bodyProps.id = popoverId;
     } else if (this.isAccessibilityTypeTooltip()) {
       bodyProps.id = popoverId;
-      bodyProps.role = 'tooltip';
     }
 
     if (this.isHoverTrigger()) {
@@ -371,7 +368,9 @@ class PopoverInner extends React.Component {
       return /*#__PURE__*/React.cloneElement(anchor, anchorProps);
     }
 
-    return /*#__PURE__*/React.createElement("span", anchorProps, anchor);
+    return /*#__PURE__*/React.createElement("span", _extends({
+      key: "popover-anchor"
+    }, anchorProps), anchor);
   }
 
   renderPopover(renderedContent) {
@@ -444,7 +443,7 @@ class PopoverInner extends React.Component {
           },
           onPopperUpdate: this.onPopperUpdate,
           placement: this.state.placement
-        }, this.props.focusLock ? /*#__PURE__*/React.createElement(FocusLock, {
+        }, this.props.focusLock && this.props.accessibilityType !== ACCESSIBILITY_TYPE.tooltip ? /*#__PURE__*/React.createElement(FocusLock, {
           disabled: !this.props.focusLock,
           noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
           ,

package/es/select/select-component.js

@@ -14,7 +14,7 @@ import DeleteAlt from '../icon/delete-alt';
 import TriangleDownIcon from '../icon/triangle-down';
 import SearchIconComponent from '../icon/search';
 import { LocaleContext } from '../locale';
-import { Popover, PLACEMENT } from '../popover';
+import { Popover, PLACEMENT, ACCESSIBILITY_TYPE } from '../popover';
 import { UIDConsumer } from 'react-uid';
 import AutosizeInput from './autosize-input';
 import { TYPE, STATE_CHANGE_TYPE, SIZE } from './constants';
@@ -693,9 +693,7 @@ class Select extends React.Component {
     }, "Loading"));
   }
 
-  renderValue(valueArray, // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  isOpen, // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  locale) {
+  renderValue(valueArray) {
     const {
       overrides = {}
     } = this.props;
@@ -752,13 +750,10 @@ class Select extends React.Component {
 
     if (!this.props.searchable) {
       return /*#__PURE__*/React.createElement(InputContainer, _extends({
-        role: "listbox",
         "aria-activedescendant": this.state.activeDescendant,
-        "aria-expanded": isOpen,
         "aria-describedby": this.props['aria-describedby'],
         "aria-errormessage": this.props['aria-errormessage'],
         "aria-disabled": this.props.disabled,
-        "aria-label": label,
         "aria-labelledby": this.props['aria-labelledby'],
         "aria-owns": this.state.isOpen ? listboxId : null,
         "aria-required": this.props.required || null,
@@ -1006,6 +1001,7 @@ class Select extends React.Component {
         if (!ref) return;
         this.anchor = ref.anchorRef;
       },
+      accessibilityType: ACCESSIBILITY_TYPE.none,
       autoFocus: false,
       focusLock: false,
       mountNode: this.props.mountNode,
@@ -1050,7 +1046,7 @@ class Select extends React.Component {
       onTouchEnd: this.handleTouchEnd,
       onTouchMove: this.handleTouchMove,
       onTouchStart: this.handleTouchStart
-    }, sharedProps, controlContainerProps), type === TYPE.search ? this.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), this.renderValue(valueArray, isOpen, locale), this.renderInput(listboxId), this.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof this.props.placeholder !== 'undefined' ? this.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), this.renderLoading(), this.renderClear(), type === TYPE.select ? this.renderArrow() : null))))));
+    }, sharedProps, controlContainerProps), type === TYPE.search ? this.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), this.renderValue(valueArray), this.renderInput(listboxId), this.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof this.props.placeholder !== 'undefined' ? this.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), this.renderLoading(), this.renderClear(), type === TYPE.select ? this.renderArrow() : null))))));
   }
 
 }

package/es/select/single-select.js

@@ -10,11 +10,11 @@ import * as React from 'react';
 import SelectComponent from './select-component';
 import Value from './value';
 
-function MultiSelect(props) {
+function SingleSelect(props) {
   return /*#__PURE__*/React.createElement(SelectComponent, _extends({}, props, {
     multi: false,
     valueComponent: Value
   }));
 }
 
-export default MultiSelect;
+export default SingleSelect;

package/es/select/value.js

@@ -16,7 +16,5 @@ export default function Value(props) {
     ...restProps
   } = props;
   const [SingleValue, singleValueProps] = getOverrides(overrides.SingleValue, StyledSingleValue);
-  return /*#__PURE__*/React.createElement(SingleValue, _extends({
-    "aria-selected": "true"
-  }, restProps, singleValueProps), props.children);
+  return /*#__PURE__*/React.createElement(SingleValue, _extends({}, restProps, singleValueProps), props.children);
 }

package/esm/data-table/column.js

@@ -24,6 +24,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { Checkbox } from '../checkbox';
+import { LocaleContext } from '../locale';
 import { useStyletron } from '../styles';
 
 function Column(options) {
@@ -43,6 +44,8 @@ function Column(options) {
     // todo(flow->ts) add proper type annotation
     // eslint-disable-next-line @typescript-eslint/no-explicit-any,react/display-name
     renderCell: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var locale = React.useContext(LocaleContext);
+
       var _useStyletron = useStyletron(),
           _useStyletron2 = _slicedToArray(_useStyletron, 2),
           css = _useStyletron2[0],
@@ -81,6 +84,7 @@ function Column(options) {
           paddingRight: theme.sizing.scale300
         })
       }, /*#__PURE__*/React.createElement(Checkbox, {
+        "aria-label": locale.datatable.selectRow,
         onChange: props.onSelect,
         checked: props.isSelected,
         overrides: {

package/esm/data-table/header-cell.js

@@ -24,12 +24,15 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { Checkbox } from '../checkbox';
+import { LocaleContext } from '../locale';
 import { useStyletron } from '../styles';
 import ChevronDown from '../icon/chevron-down';
 import ChevronUp from '../icon/chevron-up';
 import { SORT_DIRECTIONS } from './constants';
 import { isFocusVisible } from '../utils/focusVisible';
 var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var locale = React.useContext(LocaleContext);
+
   var _useStyletron = useStyletron(),
       _useStyletron2 = _slicedToArray(_useStyletron, 2),
       css = _useStyletron2[0],
@@ -46,10 +49,9 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (isFocusVisible(event)) {
       setFocusVisible(true);
     }
-  }; // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+  };
 
-  var handleBlur = function handleBlur(event) {
+  var handleBlur = function handleBlur() {
     if (focusVisible !== false) {
       setFocusVisible(false);
     }
@@ -58,60 +60,64 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var backgroundColor = props.isHovered ? theme.colors.backgroundSecondary : theme.colors.backgroundPrimary;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    role: "button",
-    tabIndex: 0,
     className: css(_objectSpread(_objectSpread({}, theme.typography.font350), {}, {
       alignItems: 'center',
       backgroundColor: backgroundColor,
-      boxSizing: 'border-box',
       color: theme.colors.contentPrimary,
-      cursor: props.sortable ? 'pointer' : null,
       display: props.isMeasured ? 'inline-flex' : 'flex',
       flexGrow: 1,
       height: '100%',
-      paddingLeft: theme.sizing.scale500,
-      paddingRight: theme.sizing.scale500,
-      flexWrap: 'nowrap',
-      whiteSpace: 'nowrap',
-      outline: focusVisible ? "3px solid ".concat(theme.colors.accent) : 'none',
-      outlineOffset: '-3px'
-    })),
-    onMouseEnter: props.onMouseEnter,
-    onMouseLeave: props.onMouseLeave,
-    onKeyUp: function onKeyUp(event) {
-      if (event.key === 'Enter') {
-        props.onSort(props.index);
-      }
-    },
-    onClick: function onClick(event) {
-      // Avoid column sort if select-all checkbox click.
-      if (checkboxRef.current && checkboxRef.current.contains(event.target)) {
-        return;
-      }
-
-      if (props.sortable) {
-        props.onSort(props.index);
-      }
-    },
-    onFocus: handleFocus,
-    onBlur: handleBlur
+      paddingLeft: theme.sizing.scale500
+    }))
   }, props.isSelectable && /*#__PURE__*/React.createElement("span", {
     className: css({
       paddingRight: theme.sizing.scale300
     }),
     ref: checkboxRef
-  }, /*#__PURE__*/React.createElement(Checkbox // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  , {
-    onChange: function onChange(e) {
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    onChange: function onChange() {
       if (props.isSelectedAll || props.isSelectedIndeterminate) {
         props.onSelectNone();
       } else {
         props.onSelectAll();
       }
     },
+    "aria-label": locale.datatable.selectAllRows,
     checked: props.isSelectedAll || props.isSelectedIndeterminate,
     isIndeterminate: props.isSelectedIndeterminate
-  })), props.title, /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: css({
+      alignItems: 'center',
+      backgroundColor: 'transparent',
+      border: 'none',
+      boxSizing: 'border-box',
+      cursor: props.sortable ? 'pointer' : null,
+      display: 'flex',
+      flexGrow: 1,
+      height: '100%',
+      outline: focusVisible ? "3px solid ".concat(theme.colors.accent) : 'none',
+      outlineOffset: '-3px',
+      // paddingLeft: theme.sizing.scale500,
+      paddingRight: theme.sizing.scale500,
+      whiteSpace: 'nowrap'
+    }),
+    onMouseEnter: props.onMouseEnter,
+    onMouseLeave: props.onMouseLeave,
+    onKeyUp: function onKeyUp(event) {
+      if (event.key === 'Enter') {
+        props.onSort(props.index);
+      }
+    },
+    onClick: function onClick() {
+      if (props.sortable) {
+        props.onSort(props.index);
+      }
+    },
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    role: "button",
+    tabIndex: 0
+  }, props.title, /*#__PURE__*/React.createElement("div", {
     className: css({
       position: 'relative',
       width: '100%',
@@ -130,7 +136,7 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     color: props.sortDirection ? theme.colors.contentPrimary : theme.colors.contentSecondary
   }), (props.sortDirection === SORT_DIRECTIONS.ASC || !props.sortDirection) && /*#__PURE__*/React.createElement(ChevronUp, {
     color: props.sortDirection ? theme.colors.contentPrimary : theme.colors.contentSecondary
-  }))));
+  })))));
 });
 HeaderCell.displayName = 'HeaderCell';
 export default HeaderCell;

package/esm/data-table/locale.js

@@ -37,6 +37,8 @@ var locale = {
   booleanFilterTrue: 'true',
   booleanFilterFalse: 'false',
   booleanColumnTrueShort: 'T',
-  booleanColumnFalseShort: 'F'
+  booleanColumnFalseShort: 'F',
+  selectRow: 'Select row',
+  selectAllRows: 'Select all rows'
 };
 export default locale;

package/esm/data-table/stateful-data-table.js

@@ -257,12 +257,12 @@ export function StatefulDataTable(props) {
         title: title
       });
     }))), Boolean(selectedRowIds.size) && props.batchActions && /*#__PURE__*/React.createElement("div", {
-      style: {
+      className: css({
         display: 'flex',
         alignItems: 'center',
-        paddingTop: theme.sizing.scale400,
-        paddingBottom: theme.sizing.scale400
-      }
+        paddingTop: theme.sizing.scale300,
+        paddingBottom: theme.sizing.scale300
+      })
     }, props.batchActions.map(function (action) {
       function onClick(event) {
         action.onClick({

package/esm/datepicker/datepicker.js

@@ -56,7 +56,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { MaskedInput } from '../input';
-import { Popover, PLACEMENT } from '../popover';
+import { Popover, PLACEMENT, ACCESSIBILITY_TYPE } from '../popover';
 import Calendar from './calendar';
 import { getOverrides } from '../helpers/overrides';
 import getInterpolatedString from '../helpers/i18n-interpolation';
@@ -600,6 +600,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
+          accessibilityType: ACCESSIBILITY_TYPE.none,
           focusLock: false,
           autoFocus: false,
           mountNode: _this4.props.mountNode,

package/esm/locale/es_AR.js

@@ -77,7 +77,9 @@ var es_AR = {
     booleanFilterTrue: 'verdadero',
     booleanFilterFalse: 'falso',
     booleanColumnTrueShort: 'V',
-    booleanColumnFalseShort: 'F'
+    booleanColumnFalseShort: 'F',
+    selectRow: 'Seleccionar fila',
+    selectAllRows: 'Seleccionar todas las filas'
   },
   buttongroup: {
     ariaLabel: 'grupo de botones'

package/esm/locale/tr_TR.js

@@ -77,7 +77,9 @@ var tr_TR = {
     booleanFilterTrue: 'doğru',
     booleanFilterFalse: 'yanlış',
     booleanColumnTrueShort: 'D',
-    booleanColumnFalseShort: 'Y'
+    booleanColumnFalseShort: 'Y',
+    selectRow: 'satır seç',
+    selectAllRows: 'Tüm satırları seç'
   },
   buttongroup: {
     ariaLabel: 'buton grup'

package/esm/popover/popover.js

@@ -197,7 +197,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps, prevState) {
       this.init(prevProps, prevState);
 
-      if (this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
+      if (this.props.accessibilityType !== ACCESSIBILITY_TYPE.tooltip && this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
         this.setState({
           autoFocusAfterPositioning: true
         });
@@ -329,10 +329,6 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
     value: function getAnchorProps() {
       var isOpen = this.props.isOpen;
       var anchorProps = {
-        'aria-haspopup': true,
-        'aria-expanded': isOpen ? true : false,
-        // @ts-expect-error todo(flow->ts): should it be here?
-        key: 'popover-anchor',
         ref: this.anchorRef
       };
       var popoverId = this.getPopoverIdAttr();
@@ -340,6 +336,8 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
       if (this.isAccessibilityTypeMenu()) {
         var relationAttr = this.isClickTrigger() ? 'aria-controls' : 'aria-owns';
         anchorProps[relationAttr] = isOpen ? popoverId : null;
+        anchorProps['aria-haspopup'] = true;
+        anchorProps['aria-expanded'] = Boolean(isOpen);
       } else if (this.isAccessibilityTypeTooltip()) {
         anchorProps.id = this.getAnchorIdAttr();
         anchorProps['aria-describedby'] = isOpen ? popoverId : null;
@@ -367,7 +365,6 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
         bodyProps.id = popoverId;
       } else if (this.isAccessibilityTypeTooltip()) {
         bodyProps.id = popoverId;
-        bodyProps.role = 'tooltip';
       }
 
       if (this.isHoverTrigger()) {
@@ -431,7 +428,9 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.cloneElement(anchor, anchorProps);
       }
 
-      return /*#__PURE__*/React.createElement("span", anchorProps, anchor);
+      return /*#__PURE__*/React.createElement("span", _extends({
+        key: "popover-anchor"
+      }, anchorProps), anchor);
     }
   }, {
     key: "renderPopover",
@@ -507,7 +506,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
             popperOptions: _objectSpread(_objectSpread({}, defaultPopperOptions), this.props.popperOptions),
             onPopperUpdate: this.onPopperUpdate,
             placement: this.state.placement
-          }, this.props.focusLock ? /*#__PURE__*/React.createElement(FocusLock, {
+          }, this.props.focusLock && this.props.accessibilityType !== ACCESSIBILITY_TYPE.tooltip ? /*#__PURE__*/React.createElement(FocusLock, {
             disabled: !this.props.focusLock,
             noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
             ,

package/esm/select/select-component.js

@@ -63,7 +63,7 @@ import DeleteAlt from '../icon/delete-alt';
 import TriangleDownIcon from '../icon/triangle-down';
 import SearchIconComponent from '../icon/search';
 import { LocaleContext } from '../locale';
-import { Popover, PLACEMENT } from '../popover';
+import { Popover, PLACEMENT, ACCESSIBILITY_TYPE } from '../popover';
 import { UIDConsumer } from 'react-uid';
 import AutosizeInput from './autosize-input';
 import { TYPE, STATE_CHANGE_TYPE, SIZE } from './constants';
@@ -818,9 +818,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderValue",
-    value: function renderValue(valueArray, // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    isOpen, // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    locale) {
+    value: function renderValue(valueArray) {
       var _this4 = this;
 
       var _this$props$overrides2 = this.props.overrides,
@@ -889,13 +887,10 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
       if (!this.props.searchable) {
         return /*#__PURE__*/React.createElement(InputContainer, _extends({
-          role: "listbox",
           "aria-activedescendant": this.state.activeDescendant,
-          "aria-expanded": isOpen,
           "aria-describedby": this.props['aria-describedby'],
           "aria-errormessage": this.props['aria-errormessage'],
           "aria-disabled": this.props.disabled,
-          "aria-label": label,
           "aria-labelledby": this.props['aria-labelledby'],
           "aria-owns": this.state.isOpen ? listboxId : null,
           "aria-required": this.props.required || null,
@@ -1189,6 +1184,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
               if (!ref) return;
               _this7.anchor = ref.anchorRef;
             },
+            accessibilityType: ACCESSIBILITY_TYPE.none,
             autoFocus: false,
             focusLock: false,
             mountNode: _this7.props.mountNode,
@@ -1235,7 +1231,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
             onTouchEnd: _this7.handleTouchEnd,
             onTouchMove: _this7.handleTouchMove,
             onTouchStart: _this7.handleTouchStart
-          }, sharedProps, controlContainerProps), type === TYPE.search ? _this7.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this7.renderValue(valueArray, isOpen, locale), _this7.renderInput(listboxId), _this7.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this7.props.placeholder !== 'undefined' ? _this7.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this7.renderLoading(), _this7.renderClear(), type === TYPE.select ? _this7.renderArrow() : null))));
+          }, sharedProps, controlContainerProps), type === TYPE.search ? _this7.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this7.renderValue(valueArray), _this7.renderInput(listboxId), _this7.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this7.props.placeholder !== 'undefined' ? _this7.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this7.renderLoading(), _this7.renderClear(), type === TYPE.select ? _this7.renderArrow() : null))));
         });
       });
     }

package/esm/select/single-select.js

@@ -10,11 +10,11 @@ import * as React from 'react';
 import SelectComponent from './select-component';
 import Value from './value';
 
-function MultiSelect(props) {
+function SingleSelect(props) {
   return /*#__PURE__*/React.createElement(SelectComponent, _extends({}, props, {
     multi: false,
     valueComponent: Value
   }));
 }
 
-export default MultiSelect;
+export default SingleSelect;

package/esm/select/value.js

@@ -38,7 +38,5 @@ export default function Value(props) {
       SingleValue = _getOverrides2[0],
       singleValueProps = _getOverrides2[1];
 
-  return /*#__PURE__*/React.createElement(SingleValue, _extends({
-    "aria-selected": "true"
-  }, restProps, singleValueProps), props.children);
+  return /*#__PURE__*/React.createElement(SingleValue, _extends({}, restProps, singleValueProps), props.children);
 }

package/locale/es_AR.js

@@ -84,7 +84,9 @@ var es_AR = {
     booleanFilterTrue: 'verdadero',
     booleanFilterFalse: 'falso',
     booleanColumnTrueShort: 'V',
-    booleanColumnFalseShort: 'F'
+    booleanColumnFalseShort: 'F',
+    selectRow: 'Seleccionar fila',
+    selectAllRows: 'Seleccionar todas las filas'
   },
   buttongroup: {
     ariaLabel: 'grupo de botones'

package/locale/tr_TR.js

@@ -84,7 +84,9 @@ var tr_TR = {
     booleanFilterTrue: 'doğru',
     booleanFilterFalse: 'yanlış',
     booleanColumnTrueShort: 'D',
-    booleanColumnFalseShort: 'Y'
+    booleanColumnFalseShort: 'Y',
+    selectRow: 'satır seç',
+    selectAllRows: 'Tüm satırları seç'
   },
   buttongroup: {
     ariaLabel: 'buton grup'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-31e82a8",
+  "version": "0.0.0-next-e90bd38",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -117,7 +117,7 @@
     "@typescript-eslint/parser": "^5.26.0",
     "@zeit/next-css": "^1.0.1",
     "@zeit/next-mdx": "^1.2.0",
-    "axe-core": "^4.2.2",
+    "axe-core": "^4.4.3",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "^24.0.0",

package/popover/popover.js

@@ -212,7 +212,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps, prevState) {
       this.init(prevProps, prevState);
 
-      if (this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
+      if (this.props.accessibilityType !== _constants.ACCESSIBILITY_TYPE.tooltip && this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
         this.setState({
           autoFocusAfterPositioning: true
         });
@@ -344,10 +344,6 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
     value: function getAnchorProps() {
       var isOpen = this.props.isOpen;
       var anchorProps = {
-        'aria-haspopup': true,
-        'aria-expanded': isOpen ? true : false,
-        // @ts-expect-error todo(flow->ts): should it be here?
-        key: 'popover-anchor',
         ref: this.anchorRef
       };
       var popoverId = this.getPopoverIdAttr();
@@ -355,6 +351,8 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
       if (this.isAccessibilityTypeMenu()) {
         var relationAttr = this.isClickTrigger() ? 'aria-controls' : 'aria-owns';
         anchorProps[relationAttr] = isOpen ? popoverId : null;
+        anchorProps['aria-haspopup'] = true;
+        anchorProps['aria-expanded'] = Boolean(isOpen);
       } else if (this.isAccessibilityTypeTooltip()) {
         anchorProps.id = this.getAnchorIdAttr();
         anchorProps['aria-describedby'] = isOpen ? popoverId : null;
@@ -382,7 +380,6 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
         bodyProps.id = popoverId;
       } else if (this.isAccessibilityTypeTooltip()) {
         bodyProps.id = popoverId;
-        bodyProps.role = 'tooltip';
       }
 
       if (this.isHoverTrigger()) {
@@ -446,7 +443,9 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.cloneElement(anchor, anchorProps);
       }
 
-      return /*#__PURE__*/React.createElement("span", anchorProps, anchor);
+      return /*#__PURE__*/React.createElement("span", _extends({
+        key: "popover-anchor"
+      }, anchorProps), anchor);
     }
   }, {
     key: "renderPopover",
@@ -526,7 +525,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
             popperOptions: _objectSpread(_objectSpread({}, defaultPopperOptions), this.props.popperOptions),
             onPopperUpdate: this.onPopperUpdate,
             placement: this.state.placement
-          }, this.props.focusLock ? /*#__PURE__*/React.createElement(_reactFocusLock.default, {
+          }, this.props.focusLock && this.props.accessibilityType !== _constants.ACCESSIBILITY_TYPE.tooltip ? /*#__PURE__*/React.createElement(_reactFocusLock.default, {
             disabled: !this.props.focusLock,
             noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
             ,

package/select/select-component.d.ts

@@ -145,7 +145,7 @@ declare class Select extends React.Component<SelectProps, SelectState> {
     shouldShowPlaceholder: () => boolean;
     shouldShowValue: () => boolean;
     renderLoading(): JSX.Element;
-    renderValue(valueArray: Value, isOpen: boolean, locale: Locale): React.ReactNode | undefined | null | Array<React.ReactNode | undefined | null>;
+    renderValue(valueArray: Value): React.ReactNode | undefined | null | Array<React.ReactNode | undefined | null>;
     renderInput(listboxId: string): JSX.Element;
     renderClear(): JSX.Element;
     renderArrow(): JSX.Element;

package/select/select-component.js

@@ -839,9 +839,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderValue",
-    value: function renderValue(valueArray, // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    isOpen, // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    locale) {
+    value: function renderValue(valueArray) {
       var _this4 = this;
 
       var _this$props$overrides2 = this.props.overrides,
@@ -910,13 +908,10 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
       if (!this.props.searchable) {
         return /*#__PURE__*/React.createElement(InputContainer, _extends({
-          role: "listbox",
           "aria-activedescendant": this.state.activeDescendant,
-          "aria-expanded": isOpen,
           "aria-describedby": this.props['aria-describedby'],
           "aria-errormessage": this.props['aria-errormessage'],
           "aria-disabled": this.props.disabled,
-          "aria-label": label,
           "aria-labelledby": this.props['aria-labelledby'],
           "aria-owns": this.state.isOpen ? listboxId : null,
           "aria-required": this.props.required || null,
@@ -1210,6 +1205,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
               if (!ref) return;
               _this7.anchor = ref.anchorRef;
             },
+            accessibilityType: _popover.ACCESSIBILITY_TYPE.none,
             autoFocus: false,
             focusLock: false,
             mountNode: _this7.props.mountNode,
@@ -1256,7 +1252,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
             onTouchEnd: _this7.handleTouchEnd,
             onTouchMove: _this7.handleTouchMove,
             onTouchStart: _this7.handleTouchStart
-          }, sharedProps, controlContainerProps), type === _constants.TYPE.search ? _this7.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this7.renderValue(valueArray, isOpen, locale), _this7.renderInput(listboxId), _this7.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this7.props.placeholder !== 'undefined' ? _this7.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this7.renderLoading(), _this7.renderClear(), type === _constants.TYPE.select ? _this7.renderArrow() : null))));
+          }, sharedProps, controlContainerProps), type === _constants.TYPE.search ? _this7.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this7.renderValue(valueArray), _this7.renderInput(listboxId), _this7.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this7.props.placeholder !== 'undefined' ? _this7.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this7.renderLoading(), _this7.renderClear(), type === _constants.TYPE.select ? _this7.renderArrow() : null))));
         });
       });
     }

package/select/single-select.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { SelectProps } from './types';
-declare function MultiSelect(props: Partial<SelectProps>): JSX.Element;
-export default MultiSelect;
+declare function SingleSelect(props: Partial<SelectProps>): JSX.Element;
+export default SingleSelect;

package/select/single-select.js

@@ -21,12 +21,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function MultiSelect(props) {
+function SingleSelect(props) {
   return /*#__PURE__*/React.createElement(_selectComponent.default, _extends({}, props, {
     multi: false,
     valueComponent: _value.default
   }));
 }
 
-var _default = MultiSelect;
+var _default = SingleSelect;
 exports.default = _default;

package/select/value.js

@@ -48,7 +48,5 @@ function Value(props) {
       SingleValue = _getOverrides2[0],
       singleValueProps = _getOverrides2[1];
 
-  return /*#__PURE__*/React.createElement(SingleValue, _extends({
-    "aria-selected": "true"
-  }, restProps, singleValueProps), props.children);
+  return /*#__PURE__*/React.createElement(SingleValue, _extends({}, restProps, singleValueProps), props.children);
 }