@zohodesk/dot 1.4.1 → 1.4.2

package/es/Drawer/Drawer.js

@@ -73,10 +73,7 @@ export class Header extends React.Component {
       shrink: true
     }, /*#__PURE__*/React.createElement(Heading, {
       title: title,
-      className: style.title,
-      a11y: {
-        tabindex: '0'
-      }
+      className: style.title
     })) : null, getTitleChildren ? /*#__PURE__*/React.createElement(Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/React.createElement(Box, null, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
       onClick: onClose,
       dataId: "closeButton",
@@ -161,7 +158,7 @@ export default class Drawer extends React.Component {
       needRestoreFocus = true,
       needListNavigation = false,
       needFocusLoop = true,
-      needEnterAction = false
+      needEnterAction = true
     } = focusScopeProps;
     let childrenWithProps = React.Children.map(children, child => {
       if (child.type === Header || child.type === Footer || child.type === Content) {

package/es/Link/Link.js

@@ -92,8 +92,7 @@ export default class Link extends React.Component {
     }, others, {
       onClick: this.onCallBack.bind(this, urlOutput, href)
     }, customProps, {
-      "aria-label": ariaLabel,
-      tabIndex: "0"
+      "aria-label": ariaLabel
     }), children);
   }
 

package/es/avatar/AvatarStatus/AvatarStatus.js

@@ -39,7 +39,6 @@ export default class AvatarStatus extends React.Component {
     return /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.container} ${className} `
     }, AvatarStatusProps, {
-      tabIndex: "0",
       "aria-label": `${title}, ${name}, ${statusTitle}`,
       "data-selector-id": dataSelectorId
     }), /*#__PURE__*/React.createElement(Avatar, _extends({

package/es/list/ListLayout/ListLayout.js

@@ -43,7 +43,7 @@ export default class ListLayout extends Component {
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle,
-      tabIndex: "0",
+      tabIndex: onClick ? '0' : null,
       role: role,
       "data-a11y-inset-focus": true,
       "aria-label": ariaLabel,

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -335,8 +335,8 @@ export class StatusDropdown extends React.Component {
       dataId: dataId,
       onClick: removeClose,
       disabled: isDisabled || isReadOnly ? true : false,
-      "aria-haspopup": true,
-      "aria-expanded": isPopupOpen && isEditable ? true : false,
+      "aria-haspopup": isSearch ? 'listbox' : 'menu',
+      "aria-expanded": isPopupReady && isEditable ? true : false,
       tabIndex: tabIndex,
       "aria-labelledby": ariaLabelledby,
       "aria-label": ariaLabel,
@@ -395,10 +395,10 @@ export class StatusDropdown extends React.Component {
         inputRef: this.searchInputRef,
         onKeyDown: this.handleKeyDown,
         a11y: {
-          ariaHaspopup: true,
-          ariaExpanded: true,
+          ariaHaspopup: isSearch ? 'listbox' : 'menu',
+          ariaExpanded: isPopupReady,
           role: 'combobox',
-          ariaActivedescendant: value,
+          ariaActivedescendant: isPopupReady ? value : '',
           ariaOwns: ariaTitleId
         }
       })) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
@@ -420,7 +420,7 @@ export class StatusDropdown extends React.Component {
         onScroll: this.handleScroll,
         role: isSearch ? 'listbox' : 'menu',
         "aria-labelledby": ariaTitleId,
-        tabindex: "0"
+        tabindex: "-1"
       }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, {
         key: i
       }, /*#__PURE__*/React.createElement(StatusListItem, {

package/es/lookup/Lookup/Lookup.js

@@ -71,7 +71,7 @@ export default class Lookup extends Component {
       needRestoreFocus = true,
       needListNavigation = false,
       needFocusLoop = true,
-      needEnterAction = false
+      needEnterAction = true
     } = focusScopeProps;
     const content = /*#__PURE__*/React.createElement("div", {
       ref: this.createRef,

package/es/v1/ActionButton/ActionButton.js

@@ -40,13 +40,18 @@ function ActionButton(props) {
     innerClassName,
     popupGroup,
     togglePopup,
-    defaultPosition
+    defaultPosition,
+    openPopupOnly
   } = props;
 
   const handleTogglePopup = e => {
     togglePopup(e, defaultPosition);
   };
 
+  const handlePopupOpen = e => {
+    openPopupOnly(e, defaultPosition);
+  };
+
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     isCover: false,
@@ -94,7 +99,7 @@ function ActionButton(props) {
     "data-title": removeChildrenTooltip ? null : subText,
     className: style.subTxt
   }, subText) : null)), children ? /*#__PURE__*/React.createElement(Box, {
-    onClick: onClick ? !onHover && handleTogglePopup : undefined,
+    onClick: onClick && !onHover ? handleTogglePopup : handlePopupOpen,
     onMouseEnter: onClick ? onHover && handleTogglePopup : undefined,
     onMouseLeave: onClick ? onHover && handleTogglePopup : undefined,
     className: `${btnStyle.buttonReset} ${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,

package/es/v1/Drawer/Drawer.js

@@ -72,10 +72,7 @@ export function Header(props) {
     shrink: true
   }, /*#__PURE__*/React.createElement(Heading, {
     title: title,
-    className: style.title,
-    a11y: {
-      tabindex: '0'
-    }
+    className: style.title
   })) : null, getTitleChildren ? /*#__PURE__*/React.createElement(Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/React.createElement(Box, null, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
     onClick: onClose,
     dataId: "closeButton",
@@ -147,7 +144,7 @@ export default function Drawer(props) {
       needRestoreFocus = true,
       needListNavigation = false,
       needFocusLoop = true,
-      needEnterAction = false
+      needEnterAction = true
     } = focusScopeProps;
     let childrenWithProps = React.Children.map(children, child => {
       if (child.type === Header || child.type === Footer || child.type === Content) {

package/es/v1/Link/Link.js

@@ -84,8 +84,7 @@ export default function Link(props) {
   }, others, {
     onClick: callBack
   }, customProps, {
-    "aria-label": ariaLabel,
-    tabIndex: "0"
+    "aria-label": ariaLabel
   }), children);
 }
 Link.defaultProps = defaultProps;

package/es/v1/avatar/AvatarStatus/AvatarStatus.js

@@ -34,7 +34,6 @@ export default function AvatarStatus(props) {
   return /*#__PURE__*/React.createElement("div", _extends({
     className: `${style.container} ${className} `
   }, AvatarStatusProps, {
-    tabIndex: "0",
     "aria-label": `${title}, ${name}, ${statusTitle}`,
     "data-selector-id": dataSelectorId
   }), /*#__PURE__*/React.createElement(Avatar, _extends({

package/es/v1/list/ListLayout/ListLayout.js

@@ -38,7 +38,7 @@ export default function ListLayout(props) {
     "data-id": dataId,
     "data-test-id": dataId,
     "data-title": dataTitle,
-    tabIndex: "0",
+    tabIndex: onClick ? '0' : null,
     role: role,
     "data-a11y-inset-focus": true,
     "aria-label": ariaLabel,

package/es/v1/list/status/StatusDropdown/StatusDropdown.js

@@ -247,8 +247,8 @@ function StatusDropdown(props) {
     dataId: dataId,
     onClick: removeClose,
     disabled: isDisabled || isReadOnly ? true : false,
-    "aria-haspopup": true,
-    "aria-expanded": isPopupOpen && isEditable ? true : false,
+    "aria-haspopup": isSearch ? 'listbox' : 'menu',
+    "aria-expanded": isPopupReady && isEditable ? true : false,
     tabIndex: tabIndex,
     "aria-labelledby": ariaLabelledby,
     "aria-label": ariaLabel,
@@ -307,10 +307,10 @@ function StatusDropdown(props) {
       inputRef: searchInputRef,
       onKeyDown: handleKeyDown,
       a11y: {
-        ariaHaspopup: true,
-        ariaExpanded: true,
+        ariaHaspopup: isSearch ? 'listbox' : 'menu',
+        ariaExpanded: isPopupReady,
         role: 'combobox',
-        ariaActivedescendant: value,
+        ariaActivedescendant: isPopupReady ? value : '',
         ariaOwns: ariaTitleId
       }
     })) : null, title && optionsList.length != 0 && /*#__PURE__*/React.createElement(Box, {
@@ -332,7 +332,7 @@ function StatusDropdown(props) {
       onScroll: handleScroll,
       role: isSearch ? 'listbox' : 'menu',
       "aria-labelledby": ariaTitleId,
-      tabindex: "0"
+      tabindex: "-1"
     }, optionsList.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, optionsList.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, {
       key: i
     }, /*#__PURE__*/React.createElement(StatusListItem, {

package/es/v1/lookup/Lookup/Lookup.js

@@ -45,7 +45,7 @@ export default function Lookup(props) {
     needRestoreFocus = true,
     needListNavigation = false,
     needFocusLoop = true,
-    needEnterAction = false
+    needEnterAction = true
   } = focusScopeProps;
   const createRef = useRef(null);
   const handleKeyDown = useCallback(e => {

package/lib/ActionButton/ActionButton.js

@@ -63,48 +63,57 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
     _this.handleTogglePopup = _this.handleTogglePopup.bind(_assertThisInitialized(_this));
+    _this.handlePopupOpen = _this.handlePopupOpen.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(ActionButton, [{
-    key: "handleTogglePopup",
-    value: function handleTogglePopup(e) {
+    key: "handlePopupOpen",
+    value: function handlePopupOpen(e) {
       var _this$props = this.props,
-          togglePopup = _this$props.togglePopup,
+          openPopupOnly = _this$props.openPopupOnly,
           defaultPosition = _this$props.defaultPosition;
+      openPopupOnly(e, defaultPosition);
+    }
+  }, {
+    key: "handleTogglePopup",
+    value: function handleTogglePopup(e) {
+      var _this$props2 = this.props,
+          togglePopup = _this$props2.togglePopup,
+          defaultPosition = _this$props2.defaultPosition;
       togglePopup(e, defaultPosition);
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          isLoading = _this$props2.isLoading,
-          onClick = _this$props2.onClick,
-          size = _this$props2.size,
-          dataId = _this$props2.dataId,
-          dataSelectorId = _this$props2.dataSelectorId,
-          isArrow = _this$props2.isArrow,
-          text = _this$props2.text,
-          subText = _this$props2.subText,
-          arrowBoxSize = _this$props2.arrowBoxSize,
-          palette = _this$props2.palette,
-          onHover = _this$props2.onHover,
-          position = _this$props2.position,
-          className = _this$props2.className,
-          iconName = _this$props2.iconName,
-          iconSize = _this$props2.iconSize,
-          dataTitle = _this$props2.dataTitle,
-          isDisabled = _this$props2.isDisabled,
-          isPopupOpen = _this$props2.isPopupOpen,
-          removeClose = _this$props2.removeClose,
-          children = _this$props2.children,
-          dropBoxClass = _this$props2.dropBoxClass,
-          isBoxPaddingNeed = _this$props2.isBoxPaddingNeed,
-          getContainerRef = _this$props2.getContainerRef,
-          getTargetRef = _this$props2.getTargetRef,
-          removeChildrenTooltip = _this$props2.removeChildrenTooltip,
-          innerClassName = _this$props2.innerClassName,
-          popupGroup = _this$props2.popupGroup;
+      var _this$props3 = this.props,
+          isLoading = _this$props3.isLoading,
+          onClick = _this$props3.onClick,
+          size = _this$props3.size,
+          dataId = _this$props3.dataId,
+          dataSelectorId = _this$props3.dataSelectorId,
+          isArrow = _this$props3.isArrow,
+          text = _this$props3.text,
+          subText = _this$props3.subText,
+          arrowBoxSize = _this$props3.arrowBoxSize,
+          palette = _this$props3.palette,
+          onHover = _this$props3.onHover,
+          position = _this$props3.position,
+          className = _this$props3.className,
+          iconName = _this$props3.iconName,
+          iconSize = _this$props3.iconSize,
+          dataTitle = _this$props3.dataTitle,
+          isDisabled = _this$props3.isDisabled,
+          isPopupOpen = _this$props3.isPopupOpen,
+          removeClose = _this$props3.removeClose,
+          children = _this$props3.children,
+          dropBoxClass = _this$props3.dropBoxClass,
+          isBoxPaddingNeed = _this$props3.isBoxPaddingNeed,
+          getContainerRef = _this$props3.getContainerRef,
+          getTargetRef = _this$props3.getTargetRef,
+          removeChildrenTooltip = _this$props3.removeChildrenTooltip,
+          innerClassName = _this$props3.innerClassName,
+          popupGroup = _this$props3.popupGroup;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         isCover: false,
@@ -152,7 +161,7 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         "data-title": removeChildrenTooltip ? null : subText,
         className: _ActionButtonModule["default"].subTxt
       }, subText) : null)), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        onClick: onClick ? !onHover && this.handleTogglePopup : undefined,
+        onClick: onClick && !onHover ? this.handleTogglePopup : this.handlePopupOpen,
         onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
         onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
         className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ActionButtonModule["default"][arrowBoxSize + '_arrowBox'], " ").concat(_ActionButtonModule["default"][palette + 'Arw'], "  ").concat(_ActionButtonModule["default"].arrowWrapper, " ").concat(isPopupOpen ? _ActionButtonModule["default"].arrowActive : ''),

package/lib/ActionButton/props/propTypes.js

@@ -38,6 +38,7 @@ var propTypes = {
   removeChildrenTooltip: _propTypes["default"].bool,
   innerClassName: _propTypes["default"].string,
   popupGroup: _propTypes["default"].string,
-  togglePopup: _propTypes["default"].func
+  togglePopup: _propTypes["default"].func,
+  openPopupOnly: _propTypes["default"].func
 };
 exports.propTypes = propTypes;

package/lib/Drawer/Drawer.js

@@ -130,10 +130,7 @@ var Header = /*#__PURE__*/function (_React$Component) {
         shrink: true
       }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
         title: title,
-        className: _DrawerModule["default"].title,
-        a11y: {
-          tabindex: '0'
-        }
+        className: _DrawerModule["default"].title
       })) : null, getTitleChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, children) : null)), onClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         onClick: onClose,
         dataId: "closeButton",
@@ -268,7 +265,7 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
           _focusScopeProps$need4 = focusScopeProps.needFocusLoop,
           needFocusLoop = _focusScopeProps$need4 === void 0 ? true : _focusScopeProps$need4,
           _focusScopeProps$need5 = focusScopeProps.needEnterAction,
-          needEnterAction = _focusScopeProps$need5 === void 0 ? false : _focusScopeProps$need5;
+          needEnterAction = _focusScopeProps$need5 === void 0 ? true : _focusScopeProps$need5;
 
       var childrenWithProps = _react["default"].Children.map(children, function (child) {
         if (child.type === Header || child.type === Footer || child.type === Content) {

package/lib/Link/Link.js

@@ -141,8 +141,7 @@ var Link = /*#__PURE__*/function (_React$Component) {
       }, others, {
         onClick: this.onCallBack.bind(this, urlOutput, href)
       }, customProps, {
-        "aria-label": ariaLabel,
-        tabIndex: "0"
+        "aria-label": ariaLabel
       }), children);
     }
   }]);

package/lib/avatar/AvatarStatus/AvatarStatus.js

@@ -82,7 +82,6 @@ var AvatarStatus = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
         className: "".concat(_AvatarStatusModule["default"].container, " ").concat(className, " ")
       }, AvatarStatusProps, {
-        tabIndex: "0",
         "aria-label": "".concat(title, ", ").concat(name, ", ").concat(statusTitle),
         "data-selector-id": dataSelectorId
       }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({

package/lib/list/ListLayout/ListLayout.js

@@ -89,7 +89,7 @@ var ListLayout = /*#__PURE__*/function (_Component) {
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle,
-        tabIndex: "0",
+        tabIndex: onClick ? '0' : null,
         role: role,
         "data-a11y-inset-focus": true,
         "aria-label": ariaLabel,

package/lib/list/status/StatusDropdown/StatusDropdown.js

@@ -404,8 +404,8 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
         dataId: dataId,
         onClick: removeClose,
         disabled: isDisabled || isReadOnly ? true : false,
-        "aria-haspopup": true,
-        "aria-expanded": isPopupOpen && isEditable ? true : false,
+        "aria-haspopup": isSearch ? 'listbox' : 'menu',
+        "aria-expanded": isPopupReady && isEditable ? true : false,
         tabIndex: tabIndex,
         "aria-labelledby": ariaLabelledby,
         "aria-label": ariaLabel,
@@ -462,10 +462,10 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           inputRef: _this3.searchInputRef,
           onKeyDown: _this3.handleKeyDown,
           a11y: {
-            ariaHaspopup: true,
-            ariaExpanded: true,
+            ariaHaspopup: isSearch ? 'listbox' : 'menu',
+            ariaExpanded: isPopupReady,
             role: 'combobox',
-            ariaActivedescendant: value,
+            ariaActivedescendant: isPopupReady ? value : '',
             ariaOwns: ariaTitleId
           }
         })) : null, title && options.length != 0 && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -487,7 +487,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           onScroll: _this3.handleScroll,
           role: isSearch ? 'listbox' : 'menu',
           "aria-labelledby": ariaTitleId,
-          tabindex: "0"
+          tabindex: "-1"
         }, options.length != 0 && isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (item, i) {
           return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
             key: i

package/lib/lookup/Lookup/Lookup.js

@@ -119,7 +119,7 @@ var Lookup = /*#__PURE__*/function (_Component) {
           _focusScopeProps$need4 = focusScopeProps.needFocusLoop,
           needFocusLoop = _focusScopeProps$need4 === void 0 ? true : _focusScopeProps$need4,
           _focusScopeProps$need5 = focusScopeProps.needEnterAction,
-          needEnterAction = _focusScopeProps$need5 === void 0 ? false : _focusScopeProps$need5;
+          needEnterAction = _focusScopeProps$need5 === void 0 ? true : _focusScopeProps$need5;
 
       var content = /*#__PURE__*/_react["default"].createElement("div", {
         ref: this.createRef,

package/lib/v1/ActionButton/ActionButton.js

@@ -58,12 +58,17 @@ function ActionButton(props) {
       innerClassName = props.innerClassName,
       popupGroup = props.popupGroup,
       togglePopup = props.togglePopup,
-      defaultPosition = props.defaultPosition;
+      defaultPosition = props.defaultPosition,
+      openPopupOnly = props.openPopupOnly;
 
   var handleTogglePopup = function handleTogglePopup(e) {
     togglePopup(e, defaultPosition);
   };
 
+  var handlePopupOpen = function handlePopupOpen(e) {
+    openPopupOnly(e, defaultPosition);
+  };
+
   return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     alignBox: "row",
     isCover: false,
@@ -111,7 +116,7 @@ function ActionButton(props) {
     "data-title": removeChildrenTooltip ? null : subText,
     className: _ActionButtonModule["default"].subTxt
   }, subText) : null)), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    onClick: onClick ? !onHover && handleTogglePopup : undefined,
+    onClick: onClick && !onHover ? handleTogglePopup : handlePopupOpen,
     onMouseEnter: onClick ? onHover && handleTogglePopup : undefined,
     onMouseLeave: onClick ? onHover && handleTogglePopup : undefined,
     className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ActionButtonModule["default"][arrowBoxSize + '_arrowBox'], " ").concat(_ActionButtonModule["default"][palette + 'Arw'], "  ").concat(_ActionButtonModule["default"].arrowWrapper, " ").concat(isPopupOpen ? _ActionButtonModule["default"].arrowActive : ''),

package/lib/v1/Drawer/Drawer.js

@@ -103,10 +103,7 @@ function Header(props) {
     shrink: true
   }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
     title: title,
-    className: _DrawerModule["default"].title,
-    a11y: {
-      tabindex: '0'
-    }
+    className: _DrawerModule["default"].title
   })) : null, getTitleChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, children) : null)), onClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
     onClick: onClose,
     dataId: "closeButton",
@@ -181,7 +178,7 @@ function Drawer(props) {
         _focusScopeProps$need4 = focusScopeProps.needFocusLoop,
         needFocusLoop = _focusScopeProps$need4 === void 0 ? true : _focusScopeProps$need4,
         _focusScopeProps$need5 = focusScopeProps.needEnterAction,
-        needEnterAction = _focusScopeProps$need5 === void 0 ? false : _focusScopeProps$need5;
+        needEnterAction = _focusScopeProps$need5 === void 0 ? true : _focusScopeProps$need5;
 
     var childrenWithProps = _react["default"].Children.map(children, function (child) {
       if (child.type === Header || child.type === Footer || child.type === Content) {

package/lib/v1/Link/Link.js

@@ -104,8 +104,7 @@ function Link(props) {
   }, others, {
     onClick: callBack
   }, customProps, {
-    "aria-label": ariaLabel,
-    tabIndex: "0"
+    "aria-label": ariaLabel
   }), children);
 }
 

package/lib/v1/avatar/AvatarStatus/AvatarStatus.js

@@ -46,7 +46,6 @@ function AvatarStatus(props) {
   return /*#__PURE__*/_react["default"].createElement("div", _extends({
     className: "".concat(_AvatarStatusModule["default"].container, " ").concat(className, " ")
   }, AvatarStatusProps, {
-    tabIndex: "0",
     "aria-label": "".concat(title, ", ").concat(name, ", ").concat(statusTitle),
     "data-selector-id": dataSelectorId
   }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({

package/lib/v1/list/ListLayout/ListLayout.js

@@ -50,7 +50,7 @@ function ListLayout(props) {
     "data-id": dataId,
     "data-test-id": dataId,
     "data-title": dataTitle,
-    tabIndex: "0",
+    tabIndex: onClick ? '0' : null,
     role: role,
     "data-a11y-inset-focus": true,
     "aria-label": ariaLabel,

package/lib/v1/list/status/StatusDropdown/StatusDropdown.js

@@ -306,8 +306,8 @@ function StatusDropdown(props) {
     dataId: dataId,
     onClick: removeClose,
     disabled: isDisabled || isReadOnly ? true : false,
-    "aria-haspopup": true,
-    "aria-expanded": isPopupOpen && isEditable ? true : false,
+    "aria-haspopup": isSearch ? 'listbox' : 'menu',
+    "aria-expanded": isPopupReady && isEditable ? true : false,
     tabIndex: tabIndex,
     "aria-labelledby": ariaLabelledby,
     "aria-label": ariaLabel,
@@ -364,10 +364,10 @@ function StatusDropdown(props) {
       inputRef: searchInputRef,
       onKeyDown: handleKeyDown,
       a11y: {
-        ariaHaspopup: true,
-        ariaExpanded: true,
+        ariaHaspopup: isSearch ? 'listbox' : 'menu',
+        ariaExpanded: isPopupReady,
         role: 'combobox',
-        ariaActivedescendant: value,
+        ariaActivedescendant: isPopupReady ? value : '',
         ariaOwns: ariaTitleId
       }
     })) : null, title && optionsList.length != 0 && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -389,7 +389,7 @@ function StatusDropdown(props) {
       onScroll: handleScroll,
       role: isSearch ? 'listbox' : 'menu',
       "aria-labelledby": ariaTitleId,
-      tabindex: "0"
+      tabindex: "-1"
     }, optionsList.length != 0 && isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, optionsList.map(function (item, i) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
         key: i

package/lib/v1/lookup/Lookup/Lookup.js

@@ -69,7 +69,7 @@ function Lookup(props) {
       _focusScopeProps$need4 = focusScopeProps.needFocusLoop,
       needFocusLoop = _focusScopeProps$need4 === void 0 ? true : _focusScopeProps$need4,
       _focusScopeProps$need5 = focusScopeProps.needEnterAction,
-      needEnterAction = _focusScopeProps$need5 === void 0 ? false : _focusScopeProps$need5;
+      needEnterAction = _focusScopeProps$need5 === void 0 ? true : _focusScopeProps$need5;
   var createRef = (0, _react.useRef)(null);
   var handleKeyDown = (0, _react.useCallback)(function (e) {
     onKeyDown && onKeyDown(e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -46,17 +46,17 @@
     "variable:check": "node  ./node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json",
     "theme:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation validate ./src ./.cli",
     "theme:addignore": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation addignore ./src ./.cli",
-    "review:props": "node ./node_modules/@zohodesk-private/react-prop-validator/es/propValidation.js ./src/ ./.cli ./.cli "
+    "review:props": "node ./node_modules/@zohodesk-private/react-prop-validator/es/propValidation.js propValidationArg.json"
   },
   "devDependencies": {
     "@zohodesk-private/css-variable-migrator": "^1.0.7",
-    "@zohodesk-private/node-plugins": "1.1.0",
+    "@zohodesk-private/node-plugins": "1.1.1",
     "@zohodesk-private/color-variable-preprocessor": "1.1.0",
-    "@zohodesk-private/react-prop-validator": "1.1.1",
-    "@zohodesk/components": "1.2.18",
-    "@zohodesk/a11y": "2.1.0",
+    "@zohodesk-private/react-prop-validator": "1.2.0",
+    "@zohodesk/components": "1.2.20",
+    "@zohodesk/a11y": "2.1.1",
     "@zohodesk/icons": "1.0.19",
-    "@zohodesk/svg": "1.1.6",
+    "@zohodesk/svg": "1.1.8",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3",
@@ -71,9 +71,9 @@
   "peerDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0",
-    "@zohodesk/components": "1.2.18",
+    "@zohodesk/components": "1.2.19",
     "@zohodesk/icons": "1.0.19",
-    "@zohodesk/svg": "1.1.6",
+    "@zohodesk/svg": "1.1.8",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.2",

package/propValidationArg.json

@@ -0,0 +1,8 @@
+{
+    "inputDir": "./src",
+    "outputDir": "./.cli",
+    "excludeDir":"./.cli",
+    "propUnifiExcludeDir":"./.cli",
+    "propUnifiReport":"propUnifi",
+    "strictMode":""
+}