@zohodesk/dot 1.0.0-beta.240 → 1.0.0-beta.242

package/README.md

@@ -2,6 +2,13 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.242
+
+- `Accesssility`- Screen Reader fix.
+
+# 1.0.0-beta.241
+
+- **Drawer, Lookup** - Focus scope navigation support.
 
 # 1.0.0-beta.240
 

package/es/ActionButton/ActionButton.js

@@ -8,6 +8,7 @@ import { Container, Box } from '@zohodesk/components/lib/Layout';
 import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
 import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
 import style from './ActionButton.module.css';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 export class ActionButton extends React.Component {
   constructor(props) {
     super(props);
@@ -72,8 +73,10 @@ export class ActionButton extends React.Component {
       flexible: true,
       onClick: onClick,
       dataId: dataId,
-      className: `${style.contentBox} ${style[palette + 'Btn']} ${style[size + '_btnBox']} ${children ? style.contentBoxBdr : style.contentBoxBdrRds} ${style.clickable} ${innerClassName} `,
-      "data-title": dataTitle
+      className: `${btnStyle.buttonReset} ${style.contentBox} ${style[palette + 'Btn']} ${style[size + '_btnBox']} ${children ? style.contentBoxBdr : style.contentBoxBdrRds} ${style.clickable} ${innerClassName} `,
+      "data-title": dataTitle,
+      tagName: "button",
+      tabIndex: "0"
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both"
     }, /*#__PURE__*/React.createElement(Box, {
@@ -97,8 +100,10 @@ export class ActionButton extends React.Component {
       onClick: onClick ? !onHover && this.handleTogglePopup : undefined,
       onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
       onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
-      className: `${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,
-      dataId: arrowBoxDataId
+      className: `${btnStyle.buttonReset} ${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,
+      dataId: arrowBoxDataId,
+      tabIndex: "0",
+      tagName: "button"
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both"
     }, /*#__PURE__*/React.createElement(Icon, {
@@ -116,7 +121,9 @@ export class ActionButton extends React.Component {
       },
       isBoxPaddingNeed: isBoxPaddingNeed,
       getRef: getContainerRef,
-      popupGroup: popupGroup
+      popupGroup: popupGroup,
+      needFocusScope: true,
+      onClose: this.handleTogglePopup
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,

package/es/Drawer/Drawer.js

@@ -12,6 +12,7 @@ import IconButton from '../IconButton/IconButton';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import style from './Drawer.module.css';
+import FocusScope from "@zohodesk/a11y/es/FocusScope/FocusScope";
 export class Header extends React.Component {
   render() {
     let {
@@ -134,6 +135,7 @@ export default class Drawer extends React.Component {
     this.drawers = this.drawers.bind(this);
     this.responsiveFunc = this.responsiveFunc.bind(this);
     this.getNextIndex = getZIndex(this);
+    this.createRef = /*#__PURE__*/React.createRef();
   }
   drawers(uptoTablet, styleByResolutions) {
     let {
@@ -142,7 +144,9 @@ export default class Drawer extends React.Component {
       paddingSize,
       subDrawerActive,
       subDrawerChildren,
-      onBodyClick
+      onBodyClick,
+      onClose,
+      needFocusScope
     } = this.props;
     let childrenWithProps = React.Children.map(children, child => {
       if (child.type === Header || child.type === Footer || child.type === Content) {
@@ -155,6 +159,17 @@ export default class Drawer extends React.Component {
       }
       return child;
     });
+    let content = /*#__PURE__*/React.createElement(Box, {
+      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`,
+      "data-a11y-container-focus": false,
+      tabindex: -1,
+      eleRef: this.createRef
+    }, /*#__PURE__*/React.createElement(Card, {
+      onClick: e => {
+        e && e.stopPropagation && e.stopPropagation();
+        onBodyClick(e);
+      }
+    }, childrenWithProps));
     return /*#__PURE__*/React.createElement(React.Fragment, null, subDrawerChildren ? /*#__PURE__*/React.createElement(Box, {
       className: style.columns
     }, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
@@ -167,14 +182,13 @@ export default class Drawer extends React.Component {
       }
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, subDrawerChildren))))) : null, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`
-    }, /*#__PURE__*/React.createElement(Card, {
-      onClick: e => {
-        e && e.stopPropagation && e.stopPropagation();
-        onBodyClick(e);
-      }
-    }, childrenWithProps)));
+    }, subDrawerChildren))))) : null, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+      elementRef: this.createRef,
+      autoFocus: true,
+      focusTabLoop: true,
+      restoreFocus: true,
+      focusClose: onClose
+    }, content) : content);
   }
   responsiveFunc(_ref) {
     let {

package/es/Drawer/Drawer.module.css

@@ -148,4 +148,4 @@
 }
 [dir=rtl] .iconWrapper {
   margin-left: var(--zd_size10);
-}
+}

package/es/Drawer/props/defaultProps.js

@@ -16,5 +16,6 @@ export const Drawer_defaultProps = {
   subDrawerClass: '',
   customClass: '',
   needAutoZindex: true,
-  onBodyClick: () => {}
+  onBodyClick: () => {},
+  needFocusScope: false
 };

package/es/Drawer/props/propTypes.js

@@ -45,5 +45,6 @@ export const Drawer_propTypes = {
   subDrawerActive: PropTypes.bool,
   subDrawerChildren: PropTypes.func,
   subDrawerClass: PropTypes.string,
-  subDrawerSize: PropTypes.oneOf(['xsmall', 'small', 'medium'])
+  subDrawerSize: PropTypes.oneOf(['xsmall', 'small', 'medium']),
+  needFocusScope: PropTypes.bool
 };

package/es/alert/AlertLookup/AlertLookup.js

@@ -14,56 +14,6 @@ import FormAction from '../../FormAction/FormAction';
 /**** CSS ****/
 import style from './AlertLookup.module.css';
 export default class AlertLookup extends Component {
-  constructor(props) {
-    super(props);
-    this.documentKeydownHandler = this.documentKeydownHandler.bind(this);
-    this.getButtonRef = this.getButtonRef.bind(this);
-  }
-  componentDidMount() {
-    let {
-      isActive
-    } = this.props;
-    if (isActive) {
-      document.addEventListener('keydown', this.documentKeydownHandler);
-    }
-  }
-  componentDidUpdate(prevProps) {
-    let {
-      isActive
-    } = this.props;
-    if (prevProps.isActive !== isActive) {
-      isActive ? document.addEventListener('keydown', this.documentKeydownHandler) : document.removeEventListener('keydown', this.documentKeydownHandler);
-    }
-  }
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.documentKeydownHandler);
-  }
-  documentKeydownHandler() {
-    let e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let {
-      onSubmitClick,
-      onCancelClick,
-      isActive,
-      onEsc,
-      onClose
-    } = this.props;
-    if (e.keyCode === 27 && isActive) {
-      e && e.preventDefault && e.preventDefault();
-      onEsc == 'close' ? onClose && onClose(e) : onCancelClick && onCancelClick(e);
-    } else if (e.keyCode === 13 && isActive) {
-      e && e.preventDefault && e.preventDefault();
-      onSubmitClick && onSubmitClick(e);
-    }
-  }
-  getButtonRef(el) {
-    this.okButton = el;
-    let {
-      isDefaultFocus
-    } = this.props;
-    if (isDefaultFocus) {
-      el && el.focus();
-    }
-  }
   render() {
     let {
       isActive,
@@ -91,7 +41,8 @@ export default class AlertLookup extends Component {
       iconClass,
       iconSize,
       customProps,
-      isHtmlContent
+      isHtmlContent,
+      onEsc
     } = this.props;
     const {
       LookupProps = {},
@@ -100,6 +51,8 @@ export default class AlertLookup extends Component {
       SecondaryButtonProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement(Lookup, _extends({
+      needFocusScope: true,
+      onClose: onEsc == 'close' ? onClose : onCancelClick,
       isActive: isActive,
       size: size,
       dataId: dataId,
@@ -134,8 +87,7 @@ export default class AlertLookup extends Component {
       text: submitText,
       dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : `${dataId}_confirmButton`,
       onClick: onSubmitClick,
-      palette: palette === 'primary' ? 'primaryFilled' : 'dangerFilled',
-      getRef: this.getButtonRef
+      palette: palette === 'primary' ? 'primaryFilled' : 'dangerFilled'
     }, PrimaryButtonProps)), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
       dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
       text: cancelText,

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -328,20 +328,22 @@ export class ToggleDropDown extends Component {
           }
           break;
         case 13:
-          const selectedId = optionsArr[selectedIndex][idName] || '';
-          onClick && onClick(selectedId, optionsArr[selectedIndex]);
-          if (!preventPopupClose) {
-            togglePopup(e, boxPosition);
-          } else if (isSearch) {
-            this.searchInput.focus({
-              preventScroll: true
-            });
-          } else {
-            this.hiddenInput.focus({
-              preventScroll: true
-            });
+          {
+            const selectedId = optionsArr[selectedIndex][idName] || '';
+            onClick && onClick(selectedId, optionsArr[selectedIndex]);
+            if (!preventPopupClose) {
+              togglePopup(e, boxPosition);
+            } else if (isSearch) {
+              this.searchInput.focus({
+                preventScroll: true
+              });
+            } else {
+              this.hiddenInput.focus({
+                preventScroll: true
+              });
+            }
+            break;
           }
-          break;
       }
     } else {
       if (keyCode === 13 || keyCode === 40) {

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -167,7 +167,9 @@ const TagsMultiSelectField = props => {
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: `${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`
+    className: `${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`,
+    tabIndex: "0",
+    "aria-label": `${labelName}`
   }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
     ePhiData: ePhiData,
     alignContainer: "baseline",

package/es/list/Icons/DeleteIcon.js

@@ -16,7 +16,8 @@ export default class DeleteComponent extends React.Component {
       onClick: onClick,
       className: `${style.iconStyle} ${style.redHover} ${className ? className : ''}`,
       "data-id": dataId,
-      "data-title": dataTitle
+      "data-title": dataTitle,
+      tabIndex: 0
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-delete",
       iconClass: iconClass ? iconClass : '',

package/es/lookup/Lookup/Lookup.js

@@ -9,13 +9,14 @@ import { Container } from '@zohodesk/components/lib/Layout';
 
 /*** CSS ***/
 import style from './Lookup.module.css';
-
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 /*eslint-disable react/forbid-component-props */
 
 export default class Lookup extends Component {
   constructor(props) {
     super(props);
     this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.createRef = /*#__PURE__*/React.createRef();
   }
   componentDidUpdate(prevProps) {
     const {
@@ -45,7 +46,9 @@ export default class Lookup extends Component {
       customClass,
       htmlId,
       a11y,
-      childAnimationName
+      childAnimationName,
+      onClose,
+      needFocusScope
     } = this.props;
     const {
       role = 'dialog',
@@ -53,6 +56,18 @@ export default class Lookup extends Component {
       ariaDescribedby,
       ariaModal = isActive ? true : undefined
     } = a11y;
+    const content = /*#__PURE__*/React.createElement("div", {
+      ref: this.createRef,
+      tabIndex: "-1",
+      "data-a11y-container-focus": false,
+      role: role,
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": ariaDescribedby,
+      "aria-modal": ariaModal,
+      id: htmlId,
+      className: `${style.box} ${style[`${size}Size`]}`,
+      "data-id": dataId
+    }, children);
     return /*#__PURE__*/React.createElement(FreezeLayer, {
       align: "horizontal",
       animationName: "fade",
@@ -66,16 +81,13 @@ export default class Lookup extends Component {
       alignBox: "row",
       className: style.container,
       dataId: "fldValue"
-    }, /*#__PURE__*/React.createElement("div", {
-      tabIndex: "0",
-      role: role,
-      "aria-labelledby": ariaLabelledby,
-      "aria-describedby": ariaDescribedby,
-      "aria-modal": ariaModal,
-      id: htmlId,
-      className: `${style.box} ${style[`${size}Size`]}`,
-      "data-id": dataId
-    }, children)));
+    }, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+      focusTabLoop: true,
+      elementRef: this.createRef,
+      autoFocus: true,
+      restoreFocus: true,
+      focusClose: onClose
+    }, content) : content));
   }
 }
 Lookup.propTypes = propTypes;

package/es/lookup/Lookup/props/defaultProps.js

@@ -2,5 +2,6 @@ export const defaultProps = {
   size: 'medium',
   customClass: '',
   a11y: {},
-  childAnimationName: 'flyDown'
+  childAnimationName: 'flyDown',
+  needFocusScope: false
 };

package/es/lookup/Lookup/props/propTypes.js

@@ -13,5 +13,6 @@ export const propTypes = {
     ariaModal: PropTypes.bool
   }),
   onKeyDown: PropTypes.func,
-  childAnimationName: PropTypes.oneOf(['expand', 'flyDown'])
+  childAnimationName: PropTypes.oneOf(['expand', 'flyDown']),
+  needFocusScope: PropTypes.bool
 };

package/es/lookup/header/Search/Search.js

@@ -188,6 +188,11 @@ class SearchUI extends Component {
       customClass: {
         customTextBox: `${isBoxed ? style.inputBox : ''}`
       },
+      customProps: {
+        TextBoxProps: {
+          'data-a11y-autofocus': true
+        }
+      },
       placeHolder: placeHolder,
       value: searchStr,
       onChange: this.handleChange,

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -90,7 +90,8 @@ export function GlobalNotificationUI(props) {
   } = customProps;
   return /*#__PURE__*/React.createElement("div", _extends({
     className: `${style.message} ${type ? style[type] : ''}`,
-    "data-id": `show_${type}_message`
+    "data-id": `show_${type}_message`,
+    tabIndex: 0
   }, ExtraProps), /*#__PURE__*/React.createElement(Container, {
     className: `${style.container}`,
     alignBox: "row",

package/es/version2/lookup/AlertLookup/AlertLookup.js

@@ -39,57 +39,41 @@ export default class AlertLookup extends Component {
   constructor(props) {
     super(props);
     this.getAriaId = getUniqueId(this);
-    this.documentKeydownHandler = this.documentKeydownHandler.bind(this);
-    this.getButtonRef = this.getButtonRef.bind(this);
-  }
-  componentDidMount() {
-    let {
-      isActive
-    } = this.props;
-    if (isActive) {
-      document.addEventListener('keydown', this.documentKeydownHandler);
-    }
-  }
-  componentDidUpdate(prevProps) {
-    let {
-      isActive
-    } = this.props;
-    if (prevProps.isActive !== isActive) {
-      isActive ? document.addEventListener('keydown', this.documentKeydownHandler) : document.removeEventListener('keydown', this.documentKeydownHandler);
-    }
-  }
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.documentKeydownHandler);
-  }
-  documentKeydownHandler() {
-    let e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let {
-      onSubmitClick,
-      onCancelClick,
-      isActive,
-      onEsc,
-      onClose
-    } = this.props;
-    if (e.keyCode === 27 && isActive) {
-      e && e.preventDefault && e.preventDefault();
-      onEsc == 'close' ? onClose && onClose(e) : onCancelClick && onCancelClick(e);
-    } else if (e.keyCode === 13 && isActive) {
-      e && e.preventDefault && e.preventDefault();
-      onSubmitClick && onSubmitClick(e);
-    }
-  }
-  getButtonRef(el) {
-    this.okButton = el;
-    let {
-      isDefaultFocus
-    } = this.props;
-    if (isDefaultFocus) {
-      // el && el.focus();
-      setTimeout(() => {
-        this.okButton && this.okButton.focus && this.okButton.focus();
-      }, 100);
-    }
+    // this.documentKeydownHandler = this.documentKeydownHandler.bind(this);
   }
+
+  // componentDidMount() {
+  //   let { isActive } = this.props;
+  //   if (isActive) {
+  //     document.addEventListener('keydown', this.documentKeydownHandler)
+  //   }
+  // }
+
+  // componentDidUpdate(prevProps) {
+  //   let { isActive } = this.props;
+  //   if (prevProps.isActive !== isActive) {
+  //     isActive
+  //       ? document.addEventListener('keydown', this.documentKeydownHandler)
+  //       : document.removeEventListener('keydown', this.documentKeydownHandler);
+  //   }
+  // }
+  // componentWillUnmount() {
+  //   document.removeEventListener('keydown', this.documentKeydownHandler);
+  // }
+
+  // documentKeydownHandler(e = {}) {
+  //   let { onSubmitClick, onCancelClick, isActive, onEsc, onClose } = this.props;
+  //   if (e.keyCode === 27 && isActive) {
+  //     e && e.preventDefault && e.preventDefault();
+  //     onEsc == 'close'
+  //       ? onClose && onClose(e)
+  //       : onCancelClick && onCancelClick(e);
+  //   } else if (e.keyCode === 13 && isActive) {
+  //     e && e.preventDefault && e.preventDefault();
+  //     onSubmitClick && onSubmitClick(e);
+  //   }
+  // }
+
   render() {
     let {
       isActive,
@@ -116,7 +100,9 @@ export default class AlertLookup extends Component {
       align,
       childAnimationName,
       isHtmlContent,
-      scroll
+      scroll,
+      isDefaultFocus,
+      onEsc
     } = this.props;
     const {
       LookupProps = {},
@@ -139,6 +125,8 @@ export default class AlertLookup extends Component {
       ariaDescribedby: a11y && a11y.ariaDescribedby ? a11y.ariaDescribedby : ariaMessageId + ' ' + ariaConfirmMsgId
     };
     return /*#__PURE__*/React.createElement(Lookup, _extends({
+      onClose: onEsc == 'close' ? onClose : onCancelClick,
+      needFocusScope: true,
       isActive: isActive,
       size: size,
       dataId: dataId,
@@ -187,7 +175,9 @@ export default class AlertLookup extends Component {
       dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : `${dataId}_confirmButton`,
       onClick: onSubmitClick,
       palette: buttonPalette,
-      getRef: this.getButtonRef
+      customProps: {
+        'data-a11y-autofocus': isDefaultFocus
+      }
     }, PrimaryButtonProps)), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
       dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
       text: cancelText,

package/lib/ActionButton/ActionButton.js

@@ -15,6 +15,7 @@ var _Layout = require("@zohodesk/components/lib/Layout");
 var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox"));
 var _CssProvider = _interopRequireDefault(require("@zohodesk/components/lib/Provider/CssProvider"));
 var _ActionButtonModule = _interopRequireDefault(require("./ActionButton.module.css"));
+var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/semanticButton.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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); } }
@@ -97,8 +98,10 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         flexible: true,
         onClick: onClick,
         dataId: dataId,
-        className: "".concat(_ActionButtonModule["default"].contentBox, " ").concat(_ActionButtonModule["default"][palette + 'Btn'], " ").concat(_ActionButtonModule["default"][size + '_btnBox'], " ").concat(children ? _ActionButtonModule["default"].contentBoxBdr : _ActionButtonModule["default"].contentBoxBdrRds, " ").concat(_ActionButtonModule["default"].clickable, " ").concat(innerClassName, " "),
-        "data-title": dataTitle
+        className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ActionButtonModule["default"].contentBox, " ").concat(_ActionButtonModule["default"][palette + 'Btn'], " ").concat(_ActionButtonModule["default"][size + '_btnBox'], " ").concat(children ? _ActionButtonModule["default"].contentBoxBdr : _ActionButtonModule["default"].contentBoxBdrRds, " ").concat(_ActionButtonModule["default"].clickable, " ").concat(innerClassName, " "),
+        "data-title": dataTitle,
+        tagName: "button",
+        tabIndex: "0"
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both"
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -122,8 +125,10 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         onClick: onClick ? !onHover && this.handleTogglePopup : undefined,
         onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
         onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
-        className: "".concat(_ActionButtonModule["default"][arrowBoxSize + '_arrowBox'], " ").concat(_ActionButtonModule["default"][palette + 'Arw'], "  ").concat(_ActionButtonModule["default"].arrowWrapper, " ").concat(isPopupOpen ? _ActionButtonModule["default"].arrowActive : ''),
-        dataId: arrowBoxDataId
+        className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ActionButtonModule["default"][arrowBoxSize + '_arrowBox'], " ").concat(_ActionButtonModule["default"][palette + 'Arw'], "  ").concat(_ActionButtonModule["default"].arrowWrapper, " ").concat(isPopupOpen ? _ActionButtonModule["default"].arrowActive : ''),
+        dataId: arrowBoxDataId,
+        tabIndex: "0",
+        tagName: "button"
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both"
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
@@ -141,7 +146,9 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         },
         isBoxPaddingNeed: isBoxPaddingNeed,
         getRef: getContainerRef,
-        popupGroup: popupGroup
+        popupGroup: popupGroup,
+        needFocusScope: true,
+        onClose: this.handleTogglePopup
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,

package/lib/Drawer/Drawer.js

@@ -19,6 +19,7 @@ var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider");
 var _DrawerModule = _interopRequireDefault(require("./Drawer.module.css"));
+var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/FocusScope"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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); } }
@@ -186,6 +187,7 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
     _this.drawers = _this.drawers.bind(_assertThisInitialized(_this));
     _this.responsiveFunc = _this.responsiveFunc.bind(_assertThisInitialized(_this));
     _this.getNextIndex = (0, _ZindexProvider.getZIndex)(_assertThisInitialized(_this));
+    _this.createRef = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
   _createClass(Drawer, [{
@@ -197,7 +199,9 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
         paddingSize = _this$props4.paddingSize,
         subDrawerActive = _this$props4.subDrawerActive,
         subDrawerChildren = _this$props4.subDrawerChildren,
-        onBodyClick = _this$props4.onBodyClick;
+        onBodyClick = _this$props4.onBodyClick,
+        onClose = _this$props4.onClose,
+        needFocusScope = _this$props4.needFocusScope;
       var childrenWithProps = _react["default"].Children.map(children, function (child) {
         if (child.type === Header || child.type === Footer || child.type === Content) {
           var _ref = child.props || {},
@@ -208,6 +212,17 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
         }
         return child;
       });
+      var content = /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: "".concat(_DrawerModule["default"].container, " ").concat(_DrawerModule["default"].columns, " ").concat(_DrawerModule["default"].drawerModal, " ").concat(uptoTablet ? _DrawerModule["default"].mbleSize : _DrawerModule["default"][size]),
+        "data-a11y-container-focus": false,
+        tabindex: -1,
+        eleRef: this.createRef
+      }, /*#__PURE__*/_react["default"].createElement(_Card.Card, {
+        onClick: function onClick(e) {
+          e && e.stopPropagation && e.stopPropagation();
+          onBodyClick(e);
+        }
+      }, childrenWithProps));
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, subDrawerChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _DrawerModule["default"].columns
       }, /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
@@ -220,14 +235,13 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
         }
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
-      }, subDrawerChildren))))) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_DrawerModule["default"].container, " ").concat(_DrawerModule["default"].columns, " ").concat(_DrawerModule["default"].drawerModal, " ").concat(uptoTablet ? _DrawerModule["default"].mbleSize : _DrawerModule["default"][size])
-      }, /*#__PURE__*/_react["default"].createElement(_Card.Card, {
-        onClick: function onClick(e) {
-          e && e.stopPropagation && e.stopPropagation();
-          onBodyClick(e);
-        }
-      }, childrenWithProps)));
+      }, subDrawerChildren))))) : null, needFocusScope ? /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], {
+        elementRef: this.createRef,
+        autoFocus: true,
+        focusTabLoop: true,
+        restoreFocus: true,
+        focusClose: onClose
+      }, content) : content);
     }
   }, {
     key: "responsiveFunc",

package/lib/Drawer/Drawer.module.css

@@ -148,4 +148,4 @@
 }
 [dir=rtl] .iconWrapper {
   margin-left: var(--zd_size10);
-}
+}

package/lib/Drawer/props/defaultProps.js

@@ -24,6 +24,7 @@ var Drawer_defaultProps = {
   subDrawerClass: '',
   customClass: '',
   needAutoZindex: true,
-  onBodyClick: function onBodyClick() {}
+  onBodyClick: function onBodyClick() {},
+  needFocusScope: false
 };
 exports.Drawer_defaultProps = Drawer_defaultProps;

package/lib/Drawer/props/propTypes.js

@@ -55,6 +55,7 @@ var Drawer_propTypes = {
   subDrawerActive: _propTypes["default"].bool,
   subDrawerChildren: _propTypes["default"].func,
   subDrawerClass: _propTypes["default"].string,
-  subDrawerSize: _propTypes["default"].oneOf(['xsmall', 'small', 'medium'])
+  subDrawerSize: _propTypes["default"].oneOf(['xsmall', 'small', 'medium']),
+  needFocusScope: _propTypes["default"].bool
 };
 exports.Drawer_propTypes = Drawer_propTypes;

package/lib/alert/AlertLookup/AlertLookup.js

@@ -31,92 +31,41 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 var AlertLookup = /*#__PURE__*/function (_Component) {
   _inherits(AlertLookup, _Component);
   var _super = _createSuper(AlertLookup);
-  function AlertLookup(props) {
-    var _this;
+  function AlertLookup() {
     _classCallCheck(this, AlertLookup);
-    _this = _super.call(this, props);
-    _this.documentKeydownHandler = _this.documentKeydownHandler.bind(_assertThisInitialized(_this));
-    _this.getButtonRef = _this.getButtonRef.bind(_assertThisInitialized(_this));
-    return _this;
+    return _super.apply(this, arguments);
   }
   _createClass(AlertLookup, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var isActive = this.props.isActive;
-      if (isActive) {
-        document.addEventListener('keydown', this.documentKeydownHandler);
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var isActive = this.props.isActive;
-      if (prevProps.isActive !== isActive) {
-        isActive ? document.addEventListener('keydown', this.documentKeydownHandler) : document.removeEventListener('keydown', this.documentKeydownHandler);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener('keydown', this.documentKeydownHandler);
-    }
-  }, {
-    key: "documentKeydownHandler",
-    value: function documentKeydownHandler() {
-      var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    key: "render",
+    value: function render() {
       var _this$props = this.props,
+        isActive = _this$props.isActive,
+        palette = _this$props.palette,
+        size = _this$props.size,
+        type = _this$props.type,
+        title = _this$props.title,
+        message = _this$props.message,
+        confirmationMessage = _this$props.confirmationMessage,
+        submitText = _this$props.submitText,
+        cancelText = _this$props.cancelText,
         onSubmitClick = _this$props.onSubmitClick,
         onCancelClick = _this$props.onCancelClick,
-        isActive = _this$props.isActive,
-        onEsc = _this$props.onEsc,
-        onClose = _this$props.onClose;
-      if (e.keyCode === 27 && isActive) {
-        e && e.preventDefault && e.preventDefault();
-        onEsc == 'close' ? onClose && onClose(e) : onCancelClick && onCancelClick(e);
-      } else if (e.keyCode === 13 && isActive) {
-        e && e.preventDefault && e.preventDefault();
-        onSubmitClick && onSubmitClick(e);
-      }
-    }
-  }, {
-    key: "getButtonRef",
-    value: function getButtonRef(el) {
-      this.okButton = el;
-      var isDefaultFocus = this.props.isDefaultFocus;
-      if (isDefaultFocus) {
-        el && el.focus();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        isActive = _this$props2.isActive,
-        palette = _this$props2.palette,
-        size = _this$props2.size,
-        type = _this$props2.type,
-        title = _this$props2.title,
-        message = _this$props2.message,
-        confirmationMessage = _this$props2.confirmationMessage,
-        submitText = _this$props2.submitText,
-        cancelText = _this$props2.cancelText,
-        onSubmitClick = _this$props2.onSubmitClick,
-        onCancelClick = _this$props2.onCancelClick,
-        children = _this$props2.children,
-        forwardRef = _this$props2.forwardRef,
-        onClose = _this$props2.onClose,
-        headerChildren = _this$props2.headerChildren,
-        wrapHeader = _this$props2.wrapHeader,
-        sectionClassName = _this$props2.sectionClassName,
-        dataId = _this$props2.dataId,
-        onLookupClick = _this$props2.onLookupClick,
-        customClass = _this$props2.customClass,
-        needIcon = _this$props2.needIcon,
-        iconName = _this$props2.iconName,
-        iconClass = _this$props2.iconClass,
-        iconSize = _this$props2.iconSize,
-        customProps = _this$props2.customProps,
-        isHtmlContent = _this$props2.isHtmlContent;
+        children = _this$props.children,
+        forwardRef = _this$props.forwardRef,
+        onClose = _this$props.onClose,
+        headerChildren = _this$props.headerChildren,
+        wrapHeader = _this$props.wrapHeader,
+        sectionClassName = _this$props.sectionClassName,
+        dataId = _this$props.dataId,
+        onLookupClick = _this$props.onLookupClick,
+        customClass = _this$props.customClass,
+        needIcon = _this$props.needIcon,
+        iconName = _this$props.iconName,
+        iconClass = _this$props.iconClass,
+        iconSize = _this$props.iconSize,
+        customProps = _this$props.customProps,
+        isHtmlContent = _this$props.isHtmlContent,
+        onEsc = _this$props.onEsc;
       var _customProps$LookupPr = customProps.LookupProps,
         LookupProps = _customProps$LookupPr === void 0 ? {} : _customProps$LookupPr,
         _customProps$AlertHea = customProps.AlertHeaderProps,
@@ -126,6 +75,8 @@ var AlertLookup = /*#__PURE__*/function (_Component) {
         _customProps$Secondar = customProps.SecondaryButtonProps,
         SecondaryButtonProps = _customProps$Secondar === void 0 ? {} : _customProps$Secondar;
       return /*#__PURE__*/_react["default"].createElement(_Lookup["default"], _extends({
+        needFocusScope: true,
+        onClose: onEsc == 'close' ? onClose : onCancelClick,
         isActive: isActive,
         size: size,
         dataId: dataId,
@@ -160,8 +111,7 @@ var AlertLookup = /*#__PURE__*/function (_Component) {
         text: submitText,
         dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : "".concat(dataId, "_confirmButton"),
         onClick: onSubmitClick,
-        palette: palette === 'primary' ? 'primaryFilled' : 'dangerFilled',
-        getRef: this.getButtonRef
+        palette: palette === 'primary' ? 'primaryFilled' : 'dangerFilled'
       }, PrimaryButtonProps)), cancelText && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         dataId: dataId === 'alertPopup' ? 'alertCancelButton' : "".concat(dataId, "_cancelButton"),
         text: cancelText,

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -364,20 +364,22 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
             }
             break;
           case 13:
-            var selectedId = optionsArr[selectedIndex][idName] || '';
-            onClick && onClick(selectedId, optionsArr[selectedIndex]);
-            if (!preventPopupClose) {
-              togglePopup(e, boxPosition);
-            } else if (isSearch) {
-              this.searchInput.focus({
-                preventScroll: true
-              });
-            } else {
-              this.hiddenInput.focus({
-                preventScroll: true
-              });
+            {
+              var selectedId = optionsArr[selectedIndex][idName] || '';
+              onClick && onClick(selectedId, optionsArr[selectedIndex]);
+              if (!preventPopupClose) {
+                togglePopup(e, boxPosition);
+              } else if (isSearch) {
+                this.searchInput.focus({
+                  preventScroll: true
+                });
+              } else {
+                this.hiddenInput.focus({
+                  preventScroll: true
+                });
+              }
+              break;
             }
-            break;
         }
       } else {
         if (keyCode === 13 || keyCode === 40) {

package/lib/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -182,7 +182,9 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
     };
   }, []);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '')
+    className: "".concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
+    tabIndex: "0",
+    "aria-label": "".concat(labelName)
   }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
     ePhiData: ePhiData,
     alignContainer: "baseline",

package/lib/list/Icons/DeleteIcon.js

@@ -41,7 +41,8 @@ var DeleteComponent = /*#__PURE__*/function (_React$Component) {
         onClick: onClick,
         className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].redHover, " ").concat(className ? className : ''),
         "data-id": dataId,
-        "data-title": dataTitle
+        "data-title": dataTitle,
+        tabIndex: 0
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-GN-delete",
         iconClass: iconClass ? iconClass : '',

package/lib/lookup/Lookup/Lookup.js

@@ -11,6 +11,7 @@ var _propTypes = require("./props/propTypes");
 var _FreezeLayer = _interopRequireDefault(require("../../FreezeLayer/FreezeLayer"));
 var _Layout = require("@zohodesk/components/lib/Layout");
 var _LookupModule = _interopRequireDefault(require("./Lookup.module.css"));
+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; }
@@ -32,6 +33,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
     _classCallCheck(this, Lookup);
     _this = _super.call(this, props);
     _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
+    _this.createRef = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
   _createClass(Lookup, [{
@@ -66,13 +68,27 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
         customClass = _this$props.customClass,
         htmlId = _this$props.htmlId,
         a11y = _this$props.a11y,
-        childAnimationName = _this$props.childAnimationName;
+        childAnimationName = _this$props.childAnimationName,
+        onClose = _this$props.onClose,
+        needFocusScope = _this$props.needFocusScope;
       var _a11y$role = a11y.role,
         role = _a11y$role === void 0 ? 'dialog' : _a11y$role,
         ariaLabelledby = a11y.ariaLabelledby,
         ariaDescribedby = a11y.ariaDescribedby,
         _a11y$ariaModal = a11y.ariaModal,
         ariaModal = _a11y$ariaModal === void 0 ? isActive ? true : undefined : _a11y$ariaModal;
+      var content = /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.createRef,
+        tabIndex: "-1",
+        "data-a11y-container-focus": false,
+        role: role,
+        "aria-labelledby": ariaLabelledby,
+        "aria-describedby": ariaDescribedby,
+        "aria-modal": ariaModal,
+        id: htmlId,
+        className: "".concat(_LookupModule["default"].box, " ").concat(_LookupModule["default"]["".concat(size, "Size")]),
+        "data-id": dataId
+      }, children);
       return /*#__PURE__*/_react["default"].createElement(_FreezeLayer["default"], {
         align: "horizontal",
         animationName: "fade",
@@ -86,16 +102,13 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
         alignBox: "row",
         className: _LookupModule["default"].container,
         dataId: "fldValue"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        tabIndex: "0",
-        role: role,
-        "aria-labelledby": ariaLabelledby,
-        "aria-describedby": ariaDescribedby,
-        "aria-modal": ariaModal,
-        id: htmlId,
-        className: "".concat(_LookupModule["default"].box, " ").concat(_LookupModule["default"]["".concat(size, "Size")]),
-        "data-id": dataId
-      }, children)));
+      }, needFocusScope ? /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], {
+        focusTabLoop: true,
+        elementRef: this.createRef,
+        autoFocus: true,
+        restoreFocus: true,
+        focusClose: onClose
+      }, content) : content));
     }
   }]);
   return Lookup;

package/lib/lookup/Lookup/props/defaultProps.js

@@ -8,6 +8,7 @@ var defaultProps = {
   size: 'medium',
   customClass: '',
   a11y: {},
-  childAnimationName: 'flyDown'
+  childAnimationName: 'flyDown',
+  needFocusScope: false
 };
 exports.defaultProps = defaultProps;

package/lib/lookup/Lookup/props/propTypes.js

@@ -20,6 +20,7 @@ var propTypes = {
     ariaModal: _propTypes["default"].bool
   }),
   onKeyDown: _propTypes["default"].func,
-  childAnimationName: _propTypes["default"].oneOf(['expand', 'flyDown'])
+  childAnimationName: _propTypes["default"].oneOf(['expand', 'flyDown']),
+  needFocusScope: _propTypes["default"].bool
 };
 exports.propTypes = propTypes;

package/lib/lookup/header/Search/Search.js

@@ -219,6 +219,11 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
         customClass: {
           customTextBox: "".concat(isBoxed ? _LookupSearchModule["default"].inputBox : '')
         },
+        customProps: {
+          TextBoxProps: {
+            'data-a11y-autofocus': true
+          }
+        },
         placeHolder: placeHolder,
         value: searchStr,
         onChange: this.handleChange,

package/lib/version2/GlobalNotification/GlobalNotification.js

@@ -119,7 +119,8 @@ function GlobalNotificationUI(props) {
     ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
   return /*#__PURE__*/_react["default"].createElement("div", _extends({
     className: "".concat(_GlobalNotificationModule["default"].message, " ").concat(type ? _GlobalNotificationModule["default"][type] : ''),
-    "data-id": "show_".concat(type, "_message")
+    "data-id": "show_".concat(type, "_message"),
+    tabIndex: 0
   }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     className: "".concat(_GlobalNotificationModule["default"].container),
     alignBox: "row",

package/lib/version2/lookup/AlertLookup/AlertLookup.js

@@ -58,93 +58,74 @@ var AlertLookup = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, AlertLookup);
     _this = _super.call(this, props);
     _this.getAriaId = (0, _IdProvider.getUniqueId)(_assertThisInitialized(_this));
-    _this.documentKeydownHandler = _this.documentKeydownHandler.bind(_assertThisInitialized(_this));
-    _this.getButtonRef = _this.getButtonRef.bind(_assertThisInitialized(_this));
+    // this.documentKeydownHandler = this.documentKeydownHandler.bind(this);
     return _this;
   }
+
+  // componentDidMount() {
+  //   let { isActive } = this.props;
+  //   if (isActive) {
+  //     document.addEventListener('keydown', this.documentKeydownHandler)
+  //   }
+  // }
+
+  // componentDidUpdate(prevProps) {
+  //   let { isActive } = this.props;
+  //   if (prevProps.isActive !== isActive) {
+  //     isActive
+  //       ? document.addEventListener('keydown', this.documentKeydownHandler)
+  //       : document.removeEventListener('keydown', this.documentKeydownHandler);
+  //   }
+  // }
+  // componentWillUnmount() {
+  //   document.removeEventListener('keydown', this.documentKeydownHandler);
+  // }
+
+  // documentKeydownHandler(e = {}) {
+  //   let { onSubmitClick, onCancelClick, isActive, onEsc, onClose } = this.props;
+  //   if (e.keyCode === 27 && isActive) {
+  //     e && e.preventDefault && e.preventDefault();
+  //     onEsc == 'close'
+  //       ? onClose && onClose(e)
+  //       : onCancelClick && onCancelClick(e);
+  //   } else if (e.keyCode === 13 && isActive) {
+  //     e && e.preventDefault && e.preventDefault();
+  //     onSubmitClick && onSubmitClick(e);
+  //   }
+  // }
   _createClass(AlertLookup, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var isActive = this.props.isActive;
-      if (isActive) {
-        document.addEventListener('keydown', this.documentKeydownHandler);
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var isActive = this.props.isActive;
-      if (prevProps.isActive !== isActive) {
-        isActive ? document.addEventListener('keydown', this.documentKeydownHandler) : document.removeEventListener('keydown', this.documentKeydownHandler);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener('keydown', this.documentKeydownHandler);
-    }
-  }, {
-    key: "documentKeydownHandler",
-    value: function documentKeydownHandler() {
-      var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    key: "render",
+    value: function render() {
       var _this$props = this.props,
+        isActive = _this$props.isActive,
+        size = _this$props.size,
+        _this$props$type = _this$props.type,
+        type = _this$props$type === void 0 ? 'danger' : _this$props$type,
+        title = _this$props.title,
+        message = _this$props.message,
+        confirmationMessage = _this$props.confirmationMessage,
+        submitText = _this$props.submitText,
+        cancelText = _this$props.cancelText,
         onSubmitClick = _this$props.onSubmitClick,
         onCancelClick = _this$props.onCancelClick,
-        isActive = _this$props.isActive,
-        onEsc = _this$props.onEsc,
-        onClose = _this$props.onClose;
-      if (e.keyCode === 27 && isActive) {
-        e && e.preventDefault && e.preventDefault();
-        onEsc == 'close' ? onClose && onClose(e) : onCancelClick && onCancelClick(e);
-      } else if (e.keyCode === 13 && isActive) {
-        e && e.preventDefault && e.preventDefault();
-        onSubmitClick && onSubmitClick(e);
-      }
-    }
-  }, {
-    key: "getButtonRef",
-    value: function getButtonRef(el) {
-      var _this2 = this;
-      this.okButton = el;
-      var isDefaultFocus = this.props.isDefaultFocus;
-      if (isDefaultFocus) {
-        // el && el.focus();
-        setTimeout(function () {
-          _this2.okButton && _this2.okButton.focus && _this2.okButton.focus();
-        }, 100);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        isActive = _this$props2.isActive,
-        size = _this$props2.size,
-        _this$props2$type = _this$props2.type,
-        type = _this$props2$type === void 0 ? 'danger' : _this$props2$type,
-        title = _this$props2.title,
-        message = _this$props2.message,
-        confirmationMessage = _this$props2.confirmationMessage,
-        submitText = _this$props2.submitText,
-        cancelText = _this$props2.cancelText,
-        onSubmitClick = _this$props2.onSubmitClick,
-        onCancelClick = _this$props2.onCancelClick,
-        children = _this$props2.children,
-        forwardRef = _this$props2.forwardRef,
-        onClose = _this$props2.onClose,
-        headerChildren = _this$props2.headerChildren,
-        wrapHeader = _this$props2.wrapHeader,
-        dataId = _this$props2.dataId,
-        onLookupClick = _this$props2.onLookupClick,
-        _this$props2$customCl = _this$props2.customClass,
-        customClass = _this$props2$customCl === void 0 ? {} : _this$props2$customCl,
-        needIcon = _this$props2.needIcon,
-        a11y = _this$props2.a11y,
-        customProps = _this$props2.customProps,
-        align = _this$props2.align,
-        childAnimationName = _this$props2.childAnimationName,
-        isHtmlContent = _this$props2.isHtmlContent,
-        scroll = _this$props2.scroll;
+        children = _this$props.children,
+        forwardRef = _this$props.forwardRef,
+        onClose = _this$props.onClose,
+        headerChildren = _this$props.headerChildren,
+        wrapHeader = _this$props.wrapHeader,
+        dataId = _this$props.dataId,
+        onLookupClick = _this$props.onLookupClick,
+        _this$props$customCla = _this$props.customClass,
+        customClass = _this$props$customCla === void 0 ? {} : _this$props$customCla,
+        needIcon = _this$props.needIcon,
+        a11y = _this$props.a11y,
+        customProps = _this$props.customProps,
+        align = _this$props.align,
+        childAnimationName = _this$props.childAnimationName,
+        isHtmlContent = _this$props.isHtmlContent,
+        scroll = _this$props.scroll,
+        isDefaultFocus = _this$props.isDefaultFocus,
+        onEsc = _this$props.onEsc;
       var _customProps$LookupPr = customProps.LookupProps,
         LookupProps = _customProps$LookupPr === void 0 ? {} : _customProps$LookupPr,
         _customProps$AlertHea = customProps.AlertHeaderProps,
@@ -168,6 +149,8 @@ var AlertLookup = /*#__PURE__*/function (_Component) {
         ariaDescribedby: a11y && a11y.ariaDescribedby ? a11y.ariaDescribedby : ariaMessageId + ' ' + ariaConfirmMsgId
       };
       return /*#__PURE__*/_react["default"].createElement(_Lookup["default"], _extends({
+        onClose: onEsc == 'close' ? onClose : onCancelClick,
+        needFocusScope: true,
         isActive: isActive,
         size: size,
         dataId: dataId,
@@ -216,7 +199,9 @@ var AlertLookup = /*#__PURE__*/function (_Component) {
         dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : "".concat(dataId, "_confirmButton"),
         onClick: onSubmitClick,
         palette: buttonPalette,
-        getRef: this.getButtonRef
+        customProps: {
+          'data-a11y-autofocus': isDefaultFocus
+        }
       }, PrimaryButtonProps)), cancelText && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         dataId: dataId === 'alertPopup' ? 'alertCancelButton' : "".concat(dataId, "_cancelButton"),
         text: cancelText,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-beta.240",
+  "version": "1.0.0-beta.242",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -44,19 +44,21 @@
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0-beta.29",
     "@zohodesk/i18n": "1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-252",
+    "@zohodesk/components": "1.0.0-alpha-255",
     "@zohodesk/icons": "1.0.0-beta.109",
     "@zohodesk/svg": "1.0.0-beta.49",
     "@zohodesk/virtualizer": "1.0.3",
-    "react-sortable-hoc": "^0.8.3"
+    "react-sortable-hoc": "^0.8.3",
+    "@zohodesk/a11y": "1.3.4"
   },
   "peerDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0-beta.29",
     "@zohodesk/i18n": "1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-252",
+    "@zohodesk/components": "1.0.0-alpha-255",
     "@zohodesk/icons": "1.0.0-beta.109",
-    "@zohodesk/svg": "1.0.0-beta.48"
+    "@zohodesk/svg": "1.0.0-beta.48",
+    "@zohodesk/a11y": "1.3.4"
   },
   "react-cli": {
     "preprocess": {