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

package/assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: var(--dot_butterflyblue);
 }

package/assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #45a159;
 }

package/assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #ff801f;
 }

package/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #e94f4f;
 }

package/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #d79835;
 }

package/assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_white);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: var(--dot_primary);
 }

package/assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_white);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #26a942;
 }

package/assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_white);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #e57717;
 }

package/assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_white);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: var(--dot_brightRed);
 }

package/assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_white);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #e8b923;
 }

package/assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: #999;
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: var(--dot_butterflyblue);
 }

package/assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: #999;
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #45a159;
 }

package/assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: #999;
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #ff801f;
 }

package/assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: #999;
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #e94f4f;
 }

package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: #999;
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #d79835;
 }

package/es/AppContainer/AppContainer.js

@@ -12,6 +12,7 @@ import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
+import '../common/a11y.module.css';
 import style from './AppContainer.module.css';
 import { getLibraryConfig, setLibraryConfig } from '../Provider/Config';
 export default class AppContainer extends React.Component {

package/es/Button/Button.js

@@ -1,3 +1,4 @@
+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); }
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -24,7 +25,8 @@ export default class Button extends React.Component {
       needAppearance,
       getRef,
       title,
-      customClass
+      customClass,
+      customProps
     } = this.props;
     let {
       customButton = '',
@@ -35,7 +37,7 @@ export default class Button extends React.Component {
     let statusLower = status.toLowerCase();
     let classList = needAppearance ? `${style[paletteLower]} ${rounded ? style.rounded : ''} ${!children ? style[size.toLowerCase()] : `${style[`${size}Btn`]} 
              ${rounded ? style[`${size}Btn${paletteLower}`] : ''}`} ${statusLower !== 'none' ? style.loader : ''}` : `${style.default}`;
-    return /*#__PURE__*/React.createElement("button", {
+    return /*#__PURE__*/React.createElement("button", _extends({
       className: `${customButton} ${classList} ${isBold ? style.bold : ''}  `,
       "data-id": disabled ? `${dataId}_disabled` : dataId,
       disabled: disabled || statusLower === 'loading',
@@ -43,7 +45,7 @@ export default class Button extends React.Component {
       "data-title": title,
       type: "button",
       ref: getRef
-    }, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
+    }, customProps), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
       className: style.overlay
     }, /*#__PURE__*/React.createElement("div", {
       className: `${customStatusSize} ${statusLower === 'loading' ? `${style.loading} ${style[`${size}loading`] ? style[`${size}loading`] : ''}` : style.success}`

package/es/DropBox/DropBox.js

@@ -9,6 +9,7 @@ import { positionMapping } from './DropBoxPositionMapping.json';
 import { getZIndex } from '../Provider/ZindexProvider';
 import { getLibraryConfig } from '../Provider/Config';
 import LibraryContext from '../Provider/LibraryContextInit';
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 export class DropBoxElement extends React.Component {
   constructor(props) {
     super(props);
@@ -59,7 +60,8 @@ export class DropBoxElement extends React.Component {
       positionsOffset,
       targetOffset,
       zIndexStyle,
-      customStyle
+      customStyle,
+      subContainerRef
     } = this.props;
     let {
       isReducedMotion
@@ -146,9 +148,11 @@ export class DropBoxElement extends React.Component {
       "aria-labelledby": ariaLabelledby,
       tabIndex: tabIndex
     }, /*#__PURE__*/React.createElement("div", {
+      tabIndex: "-1",
       className: `${subContainerClass} ${style[`${palette}Palette`]}`,
       onClick: onClick,
-      "data-id": `${dataId}_subcontainer`
+      "data-id": `${dataId}_subcontainer`,
+      ref: subContainerRef
     }, isModel ? /*#__PURE__*/React.createElement("div", {
       className: style.closeBar
     }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
@@ -165,6 +169,7 @@ export default class DropBox extends React.Component {
     super(props);
     this.getNextIndex = getZIndex(this);
     this.onFreezeClick = this.onFreezeClick.bind(this);
+    this.createRef = /*#__PURE__*/React.createRef();
   }
   onFreezeClick(e) {
     e && e.stopPropagation();
@@ -176,7 +181,9 @@ export default class DropBox extends React.Component {
       isActive,
       isAbsolutePositioningNeeded,
       needAutoZindex,
-      isRestrictScroll
+      isRestrictScroll,
+      needFocusScope,
+      onClose
     } = this.props;
     let windowWidth,
       mobileWidth = getLibraryConfig('mobileWidth'),
@@ -193,7 +200,20 @@ export default class DropBox extends React.Component {
     const {
       direction
     } = this.context || {};
-    const dropBoxEle = /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+    const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+      focusClose: onClose,
+      elementRef: this.createRef,
+      autoFocus: true,
+      restoreFocus: true,
+      focusArrowLoop: true,
+      enableEnterAction: true
+    }, /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+      isModel: isModel,
+      direction: direction
+    }, this.props, {
+      zIndexStyle: zIndexStyle,
+      subContainerRef: this.createRef
+    }))) : /*#__PURE__*/React.createElement(DropBoxElement, _extends({
       isModel: isModel,
       direction: direction
     }, this.props, {

package/es/DropBox/props/defaultProps.js

@@ -16,5 +16,6 @@ export const defaultProps = {
   palette: 'default',
   needAutoZindex: true,
   portalId: 'portal1',
-  isRestrictScroll: false
+  isRestrictScroll: false,
+  needFocusScope: false
 };

package/es/DropBox/props/propTypes.js

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

package/es/ListItem/ListContainer.js

@@ -66,6 +66,7 @@ const ListContainer = props => {
   }
   return /*#__PURE__*/React.createElement(Container, _extends({
     role: role,
+    "data-a11y-inside-focus": true,
     "aria-selected": ariaSelected,
     "aria-label": ariaLabel,
     isCover: false,

package/es/Switch/Switch.js

@@ -55,7 +55,8 @@ export default class Switch extends 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.createElement(Box, {
       className: `${style[size]} ${customSwitchSize}`
     }, /*#__PURE__*/React.createElement("input", {
@@ -66,8 +67,8 @@ export default class Switch extends 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.createElement("label", {
       htmlFor: id,
       "data-id": dataId,
@@ -77,8 +78,9 @@ export default class Switch extends 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/es/Tab/TabContent.js

@@ -18,7 +18,7 @@ const TabContent = _ref => {
     dataId: `${dataId}_TabContent`,
     isScrollAttribute: true,
     "aria-labelledby": id,
-    tabindex: "0",
+    tabindex: "-1",
     role: "tabpanel"
   }, children);
 };

package/es/Tab/Tabs.js

@@ -424,17 +424,16 @@ class Tabs extends React.Component {
       }, classProps));
     }), React.Children.count(moreTabs) ? /*#__PURE__*/React.createElement(Box, {
       className: `${tabsStyle.menu} `
-    }, /*#__PURE__*/React.createElement(Container, _extends({
+    }, /*#__PURE__*/React.createElement(Container, {
       className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
       align: "both",
       onClick: this.togglePopup,
       dataId: "moreTabs",
-      eleRef: getTargetRef
-    }, MoreButtonProps, {
+      eleRef: getTargetRef,
       "aria-label": "MoreTabs",
       role: "tab",
       tagName: "button"
-    }), /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize
     })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
@@ -456,7 +455,9 @@ class Tabs extends React.Component {
         isBoxPaddingNeed: true,
         isArrow: false
       }, DropBoxProps, {
-        isResponsivePadding: true
+        isResponsivePadding: true,
+        needFocusScope: true,
+        onClose: this.togglePopup
       }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         shrink: true,

package/es/common/a11y.module.css

@@ -0,0 +1,4 @@
+:root {  
+    --lib_a11y_focusScope_focus_border:var(--zdt_a11y_focusScope_focus_border);
+    --lib_a11y_focusScope_focus_bg:var(--zdt_listitem_highlight_bg);
+}

package/lib/AppContainer/AppContainer.js

@@ -18,6 +18,7 @@ require("@zohodesk/variables/assets/fontsizeVariables.module.css");
 require("@zohodesk/variables/lib/fontFamilyVariables.module.css");
 require("@zohodesk/variables/assets/transitionVariables.module.css");
 require("@zohodesk/variables/assets/no_transitionVariables.module.css");
+require("../common/a11y.module.css");
 var _AppContainerModule = _interopRequireDefault(require("./AppContainer.module.css"));
 var _Config = require("../Provider/Config");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/Button/Button.js

@@ -10,6 +10,7 @@ var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
 var _ButtonModule = _interopRequireDefault(require("./Button.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -50,7 +51,8 @@ var Button = /*#__PURE__*/function (_React$Component) {
         needAppearance = _this$props.needAppearance,
         getRef = _this$props.getRef,
         title = _this$props.title,
-        customClass = _this$props.customClass;
+        customClass = _this$props.customClass,
+        customProps = _this$props.customProps;
       var _customClass$customBu = customClass.customButton,
         customButton = _customClass$customBu === void 0 ? '' : _customClass$customBu,
         _customClass$customSt = customClass.customStatus,
@@ -60,7 +62,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
       var paletteLower = palette.toLowerCase();
       var statusLower = status.toLowerCase();
       var classList = needAppearance ? "".concat(_ButtonModule["default"][paletteLower], " ").concat(rounded ? _ButtonModule["default"].rounded : '', " ").concat(!children ? _ButtonModule["default"][size.toLowerCase()] : "".concat(_ButtonModule["default"]["".concat(size, "Btn")], " \n             ").concat(rounded ? _ButtonModule["default"]["".concat(size, "Btn").concat(paletteLower)] : ''), " ").concat(statusLower !== 'none' ? _ButtonModule["default"].loader : '') : "".concat(_ButtonModule["default"]["default"]);
-      return /*#__PURE__*/_react["default"].createElement("button", {
+      return /*#__PURE__*/_react["default"].createElement("button", _extends({
         className: "".concat(customButton, " ").concat(classList, " ").concat(isBold ? _ButtonModule["default"].bold : '', "  "),
         "data-id": disabled ? "".concat(dataId, "_disabled") : dataId,
         disabled: disabled || statusLower === 'loading',
@@ -68,7 +70,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
         "data-title": title,
         type: "button",
         ref: getRef
-      }, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
+      }, customProps), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
         className: _ButtonModule["default"].overlay
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(customStatusSize, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loading, " ").concat(_ButtonModule["default"]["".concat(size, "loading")] ? _ButtonModule["default"]["".concat(size, "loading")] : '') : _ButtonModule["default"].success)

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/ListItem/ListContainer.js

@@ -68,6 +68,7 @@ var ListContainer = function ListContainer(props) {
   }
   return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
     role: role,
+    "data-a11y-inside-focus": true,
     "aria-selected": ariaSelected,
     "aria-label": ariaLabel,
     isCover: false,

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);
 };

package/lib/Tab/Tabs.js

@@ -459,17 +459,16 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         }, classProps));
       }), _react["default"].Children.count(moreTabs) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_TabsModule["default"].menu, " ")
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(moreButtonClass, " ").concat(isPopupOpen ? moreButtonActiveClass : ''),
         align: "both",
         onClick: this.togglePopup,
         dataId: "moreTabs",
-        eleRef: getTargetRef
-      }, MoreButtonProps, {
+        eleRef: getTargetRef,
         "aria-label": "MoreTabs",
         role: "tab",
         tagName: "button"
-      }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: iconName,
         size: iconSize
       })), isPopupOpen && /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
@@ -489,7 +488,9 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           isBoxPaddingNeed: true,
           isArrow: false
         }, DropBoxProps, {
-          isResponsivePadding: true
+          isResponsivePadding: true,
+          needFocusScope: true,
+          onClose: _this8.togglePopup
         }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(_this8.props), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true,
           shrink: true,

package/lib/common/a11y.module.css

@@ -0,0 +1,4 @@
+:root {  
+    --lib_a11y_focusScope_focus_border:var(--zdt_a11y_focusScope_focus_border);
+    --lib_a11y_focusScope_focus_bg:var(--zdt_listitem_highlight_bg);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-253",
+  "version": "1.0.0-alpha-254",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -47,7 +47,8 @@
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/svg": "1.0.0-beta.48"
+    "@zohodesk/svg": "1.0.0-beta.48",
+    "@zohodesk/a11y": "1.3.4"
   },
   "dependencies": {
     "hoist-non-react-statics": "3.0.1",
@@ -61,7 +62,8 @@
     "@zohodesk/svg": "1.0.0-beta.49",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
-    "react-sortable-hoc": "^0.8.3"
+    "react-sortable-hoc": "^0.8.3",
+    "@zohodesk/a11y": "1.3.4"
   },
   "react-cli": {
     "preprocess": {