@zohodesk/components 1.0.0-alpha-252 → 1.0.0-alpha-254

package/lib/Card/props/propTypes.js

@@ -19,10 +19,10 @@ var CardContent_propTypes = {
   eleRef: _propTypes["default"].func,
   isScrollAttribute: _propTypes["default"].bool,
   onScroll: _propTypes["default"].func,
-  scroll: _propTypes["default"].PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  scroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both', 'none']),
   shrink: _propTypes["default"].bool,
   customClass: _propTypes["default"].string,
-  preventParentScroll: _propTypes["default"].PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+  preventParentScroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both'])
 };
 exports.CardContent_propTypes = CardContent_propTypes;
 var Card_propTypes = {

package/lib/DateTime/CalendarView.js

@@ -170,7 +170,8 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
       }();
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_DaysRow["default"], {
         dayNames: dayNames,
-        dayNamesShort: dayNamesShort
+        dayNamesShort: dayNamesShort,
+        ariaLabel: dayNamesShort
       }), /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(dataId, "_dateContainer"),
         className: "".concat(_DateTimeModule["default"].dateContainer, " ").concat(needBorder ? _DateTimeModule["default"].separator : '')
@@ -216,7 +217,8 @@ var Span = /*#__PURE__*/function (_React$PureComponent2) {
         dataId: dataId,
         className: "".concat(tdclass, " ").concat(isActive ? _DateTimeModule["default"].active : '', " ").concat(isToday ? _DateTimeModule["default"].today : ''),
         key: i,
-        onClick: this.handleSelectChild
+        onClick: this.handleSelectChild,
+        "aria-label": incremday
       }, incremday);
     }
   }]);

package/lib/DateTime/DateTime.module.css

@@ -74,6 +74,7 @@
   line-height: var(--zd_size24);
   color: var(--zdt_datetime_datestr_text);
   composes: semibold;
+  display: initial
 }
 
 .dateContainer {

package/lib/DateTime/DateTimePopupHeader.js

@@ -8,6 +8,7 @@ exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Layout = require("../Layout");
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+var _Heading = _interopRequireDefault(require("../Heading/Heading"));
 var _DateTimeModule = _interopRequireDefault(require("./DateTime.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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); }
@@ -48,12 +49,15 @@ var Span = /*#__PURE__*/function (_React$PureComponent) {
         children = _this$props2.children,
         dataId = _this$props2.dataId,
         _this$props2$classNam = _this$props2.className,
-        className = _this$props2$classNam === void 0 ? '' : _this$props2$classNam;
+        className = _this$props2$classNam === void 0 ? '' : _this$props2$classNam,
+        ariaLabel = _this$props2.ariaLabel;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": dataTitle,
         dataId: dataId,
         className: "".concat(_DateTimeModule["default"].thArrow, " ").concat(_DateTimeModule["default"].grid, " ").concat(className),
-        onClick: this.modifyCalendarChild
+        onClick: this.modifyCalendarChild,
+        "aria-label": ariaLabel,
+        tabindex: "0"
       }, children);
     }
   }]);
@@ -84,19 +88,26 @@ var DateTimePopupHeader = /*#__PURE__*/function (_PureComponent) {
         className: _DateTimeModule["default"].dateText,
         dataId: "selectYear",
         onClick: onOpenYearView
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DateTimeModule["default"].thMonYear
-      }, showMonthTxt), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+        className: _DateTimeModule["default"].thMonYear,
+        title: showMonthTxt,
+        tagName: "h2",
+        a11y: {
+          tabindex: '0'
+        }
+      }), /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-GN-dropdown",
         size: "12",
         iconClass: _DateTimeModule["default"].downArrow
-      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }), !isYearView ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Span, {
         dataTitle: prevMonthTitleText,
         dataId: "prevMonth",
         modifyCalendar: onModifyCalendar,
-        type: "previousMonth"
+        type: "previousMonth",
+        ariaLabel: "prevMonth",
+        tabindex: "0"
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-arrowLeft3",
         isBold: true
@@ -105,7 +116,9 @@ var DateTimePopupHeader = /*#__PURE__*/function (_PureComponent) {
         dataId: "nextMonth",
         modifyCalendar: onModifyCalendar,
         type: "nextMonth",
-        className: _DateTimeModule["default"].navigation
+        className: _DateTimeModule["default"].navigation,
+        ariaLabel: "nextMonth",
+        tabindex: "0"
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-arrowRight3",
         isBold: true

package/lib/DateTime/DateWidget.js

@@ -905,7 +905,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         positionsOffset = _this$props11.positionsOffset,
         targetOffset = _this$props11.targetOffset,
         isRestrictScroll = _this$props11.isRestrictScroll,
-        dropBoxPortalId = _this$props11.dropBoxPortalId;
+        dropBoxPortalId = _this$props11.dropBoxPortalId,
+        a11y = _this$props11.a11y;
       var _this$state5 = this.state,
         _this$state5$selected = _this$state5.selected,
         value = _this$state5$selected === void 0 ? '' : _this$state5$selected,
@@ -954,7 +955,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         },
         iconOnHover: iconOnHover,
         isFocus: isPopupReady,
-        autoComplete: false
+        autoComplete: false,
+        a11y: a11y
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",
         onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick

package/lib/DateTime/DaysRow.js

@@ -42,7 +42,8 @@ var DaysRow = /*#__PURE__*/function (_PureComponent) {
         return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           key: dayName,
           className: "".concat(_DateTimeModule["default"].daysStr, " ").concat(_DateTimeModule["default"].grid, " ").concat(index === 0 ? _DateTimeModule["default"].sunday : ''),
-          "data-title": dayName
+          "data-title": dayName,
+          "aria-label": dayName
         }, dayNamesShort[index]);
       }));
     }

package/lib/DateTime/YearView.js

@@ -11,6 +11,7 @@ var _defaultProps = require("./props/defaultProps");
 var _virtualizer = require("@zohodesk/virtualizer");
 var _Layout = require("../Layout");
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+var _Heading = _interopRequireDefault(require("../Heading/Heading"));
 var _YearViewModule = _interopRequireDefault(require("./YearView.module.css"));
 var _dateFormatUtils = require("./dateFormatUtils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -68,9 +69,15 @@ var Year = /*#__PURE__*/function (_React$PureComponent) {
         alignBox: "row",
         align: "vertical"
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true,
-        className: _YearViewModule["default"].yearText
-      }, year), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        flexible: true
+      }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+        className: _YearViewModule["default"].yearText,
+        title: year,
+        a11y: {
+          tabindex: '0'
+        },
+        tagName: "h4"
+      })), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-arrowDownSingle",
         size: "7",
         isBold: true,
@@ -112,7 +119,8 @@ var Month = /*#__PURE__*/function (_React$PureComponent2) {
         dataId: "month_".concat(month),
         className: "".concat(_YearViewModule["default"].month, " ").concat(isActive ? _YearViewModule["default"].currentMonth : ''),
         onClick: this.handleClick,
-        "data-title": hoverText
+        "data-title": hoverText,
+        "aria-label": month
       }, displayText);
     }
   }]);

package/lib/DateTime/YearView.module.css

@@ -5,6 +5,7 @@
   padding-left: var(--zd_size19);
   padding-right: var(--zd_size19);
 }
+
 .month {
   width: 30.333%;
   font-size: var(--zd_font_size12);
@@ -17,51 +18,66 @@
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
 }
+
 .month:hover {
   background-color: var(--zdt_yearview_month_hover_bg);
 }
+
 .currentMonth,
 .currentMonth:hover {
   color: var(--zdt_yearview_currentmonth_text);
 }
+
 .currentMonth, .currentMonth:hover {
   background-color: var(--zdt_yearview_currentmonth_bg);
 }
+
 .yearBox {
   border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
 }
+
 .year {
   padding: var(--zd_size7) 0;
   cursor: pointer;
 }
+
 .year:hover .yearText,
 .year:hover .arrow {
   color: var(--zdt_yearview_year_hover_text);
 }
+
 .yearText {
   color: var(--zdt_yearview_yeartext_text);
   font-size: var(--zd_font_size11);
 }
+
 .arrow {
   color: var(--zdt_yearview_yeartext_text);
   transition: transform var(--zd_transition1);
 }
+
 .isActive {
   cursor: default;
 }
+
 .isActive .yearText {
   font-family: var(--zd_semibold);
   color: var(--zdt_yearview_year_hover_text);
+  font-size: var(--zd_font_size11);
 }
+
 .arrowActive {
   color: var(--zdt_yearview_year_hover_text);
 }
+
 [dir=ltr] .arrowActive {
   transform: rotate(180deg);
 }
+
 [dir=rtl] .arrowActive {
   transform: rotate(-180deg);
 }
+
 .container {
   height: 100%;
   overflow-y: auto;
@@ -69,13 +85,15 @@
   composes: boxPadding;
   background-color: var(--zdt_yearview_default_bg);
 }
+
 .yearContainer {
   height: var(--zd_size135);
   overflow: hidden;
   transition: height var(--zd_transition1);
   padding-bottom: var(--zd_size5);
 }
+
 .toggleYear {
   height: 0;
   padding: 0;
-}
+}

package/lib/DropBox/DropBox.js

@@ -15,6 +15,7 @@ var _DropBoxPositionMapping = require("./DropBoxPositionMapping.json");
 var _ZindexProvider = require("../Provider/ZindexProvider");
 var _Config = require("../Provider/Config");
 var _LibraryContextInit = _interopRequireDefault(require("../Provider/LibraryContextInit"));
+var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/FocusScope"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -87,7 +88,8 @@ var DropBoxElement = /*#__PURE__*/function (_React$Component) {
         positionsOffset = _this$props2.positionsOffset,
         targetOffset = _this$props2.targetOffset,
         zIndexStyle = _this$props2.zIndexStyle,
-        customStyle = _this$props2.customStyle;
+        customStyle = _this$props2.customStyle,
+        subContainerRef = _this$props2.subContainerRef;
       var _ref = this.context || {},
         isReducedMotion = _ref.isReducedMotion;
       if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
@@ -172,9 +174,11 @@ var DropBoxElement = /*#__PURE__*/function (_React$Component) {
         "aria-labelledby": ariaLabelledby,
         tabIndex: tabIndex
       }, /*#__PURE__*/_react["default"].createElement("div", {
+        tabIndex: "-1",
         className: "".concat(subContainerClass, " ").concat(_DropBoxModule["default"]["".concat(palette, "Palette")]),
         onClick: onClick,
-        "data-id": "".concat(dataId, "_subcontainer")
+        "data-id": "".concat(dataId, "_subcontainer"),
+        ref: subContainerRef
       }, isModel ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _DropBoxModule["default"].closeBar
       }) : null, isArrow && !isModel && /*#__PURE__*/_react["default"].createElement("div", {
@@ -198,6 +202,7 @@ var DropBox = /*#__PURE__*/function (_React$Component2) {
     _this2 = _super2.call(this, props);
     _this2.getNextIndex = (0, _ZindexProvider.getZIndex)(_assertThisInitialized(_this2));
     _this2.onFreezeClick = _this2.onFreezeClick.bind(_assertThisInitialized(_this2));
+    _this2.createRef = /*#__PURE__*/_react["default"].createRef();
     return _this2;
   }
   _createClass(DropBox, [{
@@ -214,7 +219,9 @@ var DropBox = /*#__PURE__*/function (_React$Component2) {
         isActive = _this$props3.isActive,
         isAbsolutePositioningNeeded = _this$props3.isAbsolutePositioningNeeded,
         needAutoZindex = _this$props3.needAutoZindex,
-        isRestrictScroll = _this$props3.isRestrictScroll;
+        isRestrictScroll = _this$props3.isRestrictScroll,
+        needFocusScope = _this$props3.needFocusScope,
+        onClose = _this$props3.onClose;
       var windowWidth,
         mobileWidth = (0, _Config.getLibraryConfig)('mobileWidth'),
         isModel = false;
@@ -229,7 +236,20 @@ var DropBox = /*#__PURE__*/function (_React$Component2) {
       } : {};
       var _ref2 = this.context || {},
         direction = _ref2.direction;
-      var dropBoxEle = /*#__PURE__*/_react["default"].createElement(DropBoxElement, _extends({
+      var dropBoxEle = needFocusScope ? /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], {
+        focusClose: onClose,
+        elementRef: this.createRef,
+        autoFocus: true,
+        restoreFocus: true,
+        focusArrowLoop: true,
+        enableEnterAction: true
+      }, /*#__PURE__*/_react["default"].createElement(DropBoxElement, _extends({
+        isModel: isModel,
+        direction: direction
+      }, this.props, {
+        zIndexStyle: zIndexStyle,
+        subContainerRef: this.createRef
+      }))) : /*#__PURE__*/_react["default"].createElement(DropBoxElement, _extends({
         isModel: isModel,
         direction: direction
       }, this.props, {

package/lib/DropBox/props/defaultProps.js

@@ -22,6 +22,7 @@ var defaultProps = {
   palette: 'default',
   needAutoZindex: true,
   portalId: 'portal1',
-  isRestrictScroll: false
+  isRestrictScroll: false,
+  needFocusScope: false
 };
 exports.defaultProps = defaultProps;

package/lib/DropBox/props/propTypes.js

@@ -29,6 +29,7 @@ var propTypes = {
   left: _propTypes["default"].number,
   needResponsive: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
+  needFocusScope: _propTypes["default"].bool,
   right: _propTypes["default"].number,
   size: _propTypes["default"].oneOf(['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default']),
   top: _propTypes["default"].number,

package/lib/DropDown/DropDownHeading.js

@@ -40,12 +40,14 @@ var DropDownHeading = /*#__PURE__*/function (_React$Component) {
         htmlId = _this$props.htmlId,
         a11y = _this$props.a11y;
       var role = a11y.role,
-        ariaLabelledby = a11y.ariaLabelledby;
+        ariaLabelledby = a11y.ariaLabelledby,
+        ariaLabel = a11y.ariaLabel;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_DropDownHeadingModule["default"][palette], " ").concat(customClass),
         "data-title": title,
         role: role,
         "aria-labelledby": ariaLabelledby,
+        "aria-label": ariaLabel,
         id: htmlId
         // tabindex='0'
       }, text, children);

package/lib/DropDown/props/propTypes.js

@@ -51,7 +51,8 @@ var DropDownHeading_propTypes = {
   htmlId: _propTypes["default"].string,
   a11y: _propTypes["default"].shape({
     role: _propTypes["default"].string,
-    ariaLabelledby: _propTypes["default"].string
+    ariaLabelledby: _propTypes["default"].string,
+    ariaLabel: _propTypes["default"].string
   })
 };
 exports.DropDownHeading_propTypes = DropDownHeading_propTypes;

package/lib/Label/Label.js

@@ -42,13 +42,15 @@ var Label = /*#__PURE__*/function (_React$Component) {
         onClick = _this$props.onClick,
         dataId = _this$props.dataId,
         variant = _this$props.variant,
-        customClass = _this$props.customClass;
+        customClass = _this$props.customClass,
+        id = _this$props.id;
       return /*#__PURE__*/_react["default"].createElement("label", {
         className: "".concat(_LabelModule["default"].label, " ").concat(_LabelModule["default"][type], " ").concat(_LabelModule["default"][size], " ").concat(_LabelColorsModule["default"][palette], " ").concat(_LabelModule["default"]["font_".concat(variant)], "\n          ").concat(clipped ? _LabelModule["default"].dotted : '', " ").concat(onClick ? _LabelModule["default"].pointer : _LabelModule["default"].cursor, " ").concat(customClass, " "),
         htmlFor: htmlFor,
         "data-title": title,
         "data-id": dataId,
-        onClick: onClick
+        onClick: onClick,
+        id: id
       }, text);
     }
   }]);

package/lib/Layout/props/propTypes.js

@@ -23,11 +23,11 @@ var BoxProps = {
   isFirst: _propTypes["default"].bool,
   isLast: _propTypes["default"].bool,
   isScrollAttribute: _propTypes["default"].bool,
-  scroll: _propTypes["default"].PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  scroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both', 'none']),
   shrink: _propTypes["default"].bool,
   tagName: _propTypes["default"].string,
   tourId: _propTypes["default"].string,
-  preventParentScroll: _propTypes["default"].PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+  preventParentScroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both'])
 };
 exports.BoxProps = BoxProps;
 var ContainerProps = {
@@ -46,6 +46,6 @@ var ContainerProps = {
   tagName: _propTypes["default"].string,
   tourId: _propTypes["default"].string,
   wrap: _propTypes["default"].oneOf(['wrap', 'wrap-reverse', 'nowrap']),
-  preventParentScroll: _propTypes["default"].PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+  preventParentScroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both'])
 };
 exports.ContainerProps = ContainerProps;

package/lib/ListItem/ListContainer.js

@@ -53,7 +53,8 @@ var ListContainer = function ListContainer(props) {
     mobileToTab = _useResponsiveReceive.mobileToTab,
     isTouchDevice = _useResponsiveReceive.isTouchDevice;
   var role = a11y.role,
-    ariaSelected = a11y.ariaSelected;
+    ariaSelected = a11y.ariaSelected,
+    ariaLabel = a11y.ariaLabel;
   var options = {};
   if (isLink) {
     options.href = href;
@@ -62,12 +63,14 @@ var ListContainer = function ListContainer(props) {
   if (active) {
     options['data-selected'] = active;
   }
-  if (!isDisabled && !isLink && active) {
+  if (!isDisabled && !isLink) {
     options.tabindex = '0';
   }
   return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
     role: role,
+    "data-a11y-inside-focus": true,
     "aria-selected": ariaSelected,
+    "aria-label": ariaLabel,
     isCover: false,
     align: "vertical",
     alignBox: "row",

package/lib/MultiSelect/MultiSelect.js

@@ -856,7 +856,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         _i18nKeys$searchText = _i18nKeys.searchText,
         searchText = _i18nKeys$searchText === void 0 ? 'Searching...' : _i18nKeys$searchText;
       var _a11y$clearLabel = a11y.clearLabel,
-        clearLabel = _a11y$clearLabel === void 0 ? 'Clear all' : _a11y$clearLabel;
+        clearLabel = _a11y$clearLabel === void 0 ? 'Clear all' : _a11y$clearLabel,
+        ariaLabelledby = a11y.ariaLabelledby;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage,
@@ -934,7 +935,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           ariaExpanded: !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? true : false,
           ariaHaspopup: true,
           ariaRequired: true,
-          ariaDescribedby: ariaErrorId
+          ariaDescribedby: ariaErrorId,
+          ariaLabelledby: ariaLabelledby
         },
         autoComplete: autoComplete
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/MultiSelect/Suggestions.js

@@ -79,7 +79,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
         var isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
         var isHighlight = hoverOption === index || id === hoverId ? true : false;
         var list_a11y = Object.assign({}, a11y, {
-          ariaSelected: isActive
+          ariaSelected: isActive,
+          ariaLabel: value
         });
         var commonProps = {
           isDisabled: isDisabled

package/lib/Responsive/CustomResponsive.js

@@ -115,6 +115,7 @@ function useResponsiveReceiver() {
   var data = (0, _react.useRef)();
   function updateLatestData() {
     var size = contextData.isParentSize ? contextData.getSize() : validSizeContextData.getSize();
+    var prevData = data.current;
     data.current = query({
       isTouchDevice: _sizeObservers.isTouchDevice,
       isParentSize: contextData.isParentSize,
@@ -136,13 +137,16 @@ function useResponsiveReceiver() {
         });
       }
     });
+    var isSameValues = (0, _shallowCompare["default"])(data.current, prevData);
+    if (isSameValues) {
+      data.current = prevData;
+    }
+    return isSameValues;
   }
   resizeHandlerRef.current = updateLatestData;
   (0, _react.useEffect)(function () {
     function handleResize(size) {
-      var prevData = data.current;
-      resizeHandlerRef.current(size);
-      var isSameValues = (0, _shallowCompare["default"])(data.current, prevData);
+      var isSameValues = resizeHandlerRef.current(size);
       !isSameValues && forceUpdate({});
     }
     contextData.resize.subscribe(handleResize);

package/lib/Select/Select.js

@@ -683,6 +683,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         iconOnHover = _this$props11.iconOnHover,
         customProps = _this$props11.customProps,
         autoComplete = _this$props11.autoComplete,
+        ariaLabelledby = _this$props11.ariaLabelledby,
         isLoading = _this$props11.isLoading;
       var _i18nKeys = i18nKeys,
         TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
@@ -718,14 +719,15 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
       }, needSelectDownIcon ? /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
         a11y: {
-          role: 'combobox',
+          role: 'Menuitem',
           ariaLabel: TextBox_ally_label,
           ariaControls: setAriaId,
           ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
           ariaHaspopup: true,
           ariaReadonly: true,
           ariaActivedescendant: selectedId,
-          ariaOwns: setAriaId
+          ariaOwns: setAriaId,
+          ariaLabelledby: ariaLabelledby
         },
         isDisabled: isDisabled,
         iconRotated: isPopupOpen,
@@ -770,14 +772,15 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         size: "7"
       })))) : /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
         a11y: {
-          role: 'combobox',
+          role: 'Menuitem',
           ariaLabel: TextBox_ally_label,
           ariaControls: setAriaId,
           ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
           ariaHaspopup: true,
           ariaReadonly: true,
           ariaActivedescendant: selectedId,
-          ariaOwns: setAriaId
+          ariaOwns: setAriaId,
+          ariaLabelledby: ariaLabelledby
         },
         isDisabled: isDisabled,
         inputRef: this.valueInputRef,

package/lib/Select/SelectWithIcon.js

@@ -498,7 +498,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
             getRef: _this5.itemRef,
             a11y: {
               role: 'option',
-              ariaSelected: selectedId === options[idKey]
+              ariaSelected: selectedId === options[idKey],
+              ariaLabel: options[valueKey]
             }
           });
         })) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {

package/lib/Switch/Switch.js

@@ -82,7 +82,8 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         "data-title": disabled ? disableTitle : title,
         "aria-checked": checked,
         role: "switch",
-        tabIndex: isReadOnly || disabled ? '-1' : '0'
+        tabIndex: isReadOnly || disabled ? '-1' : '0',
+        onClick: !disabled || !isReadOnly ? this.onChange : null
       }, SwitchProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_SwitchModule["default"][size], " ").concat(customSwitchSize)
       }, /*#__PURE__*/_react["default"].createElement("input", {
@@ -93,8 +94,8 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         value: value,
         checked: checked,
         disabled: disabled,
-        readOnly: isReadOnly,
-        onClick: !disabled || !isReadOnly ? this.onChange : null
+        readOnly: isReadOnly
+        // onClick={!disabled || !isReadOnly ? this.onChange : null}
       }), /*#__PURE__*/_react["default"].createElement("label", {
         htmlFor: id,
         "data-id": dataId,
@@ -104,8 +105,9 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         palette: labelPalette,
         id: id,
         size: labelSize,
-        type: "subtitle",
-        onClick: !disabled || !isReadOnly ? this.onChange : null,
+        type: "subtitle"
+        // onClick={!disabled || !isReadOnly ? this.onChange : null}
+        ,
         customClass: customLabel
       }, LabelProps)));
     }

package/lib/Tab/TabContent.js

@@ -23,7 +23,7 @@ var TabContent = function TabContent(_ref) {
     dataId: "".concat(dataId, "_TabContent"),
     isScrollAttribute: true,
     "aria-labelledby": id,
-    tabindex: "0",
+    tabindex: "-1",
     role: "tabpanel"
   }, children);
 };