feat(PF4-Dropdown): Enhance keyboard interaction for a11y (patternfly…

…#815)

* feat(PF4-Dropdown): Enhance keyboard interactions for a11y

- Fixes esc key interaction
- Introduces focus-trap-react

Fixes patternfly#557

* Use KEY_CODES constant

packages/patternfly-4/react-core/package.json

@@ -27,7 +27,8 @@
   "dependencies": {
     "@patternfly/react-icons": "^2.5.2",
     "@patternfly/react-styles": "^2.3.0",
-    "exenv": "^1.2.2"
+    "exenv": "^1.2.2",
+    "focus-trap-react": "^4.0.1"
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",

packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js

@@ -2,6 +2,7 @@ import React, { Children, cloneElement } from 'react';
 import styles from '@patternfly/patternfly-next/components/Dropdown/dropdown.css';
 import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
+import FocusTrap from 'focus-trap-react';
 import DropdownMenu from './DropdownMenu';
 
 export const DropdownPosition = {
@@ -71,9 +72,13 @@ class Dropdown extends React.Component {
         }}
       >
         {toggle && Children.map(toggle, oneToggle => cloneElement(oneToggle, { parentRef: this.parentRef, isOpen }))}
-        <DropdownMenu isOpen={isOpen} aria-labelledby={id} onClick={event => onSelect && onSelect(event)}>
-          {children}
-        </DropdownMenu>
+        {isOpen && (
+          <FocusTrap>
+            <DropdownMenu isOpen={isOpen} aria-labelledby={id} onClick={event => onSelect && onSelect(event)}>
+              {children}
+            </DropdownMenu>
+          </FocusTrap>
+        )}
       </div>
     );
   }

packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import styles from '@patternfly/patternfly-next/components/Dropdown/dropdown.css';
 import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
+import { KEY_CODES } from '../../internal/constants';
 
 const propTypes = {
   /** Anything which can be rendered as dropdown toggle */
@@ -51,8 +52,9 @@ class DropdownToggle extends Component {
   };
 
   onEscPress = event => {
+    const { parentRef } = this.props;
     const keyCode = event.keyCode || event.which;
-    if (keyCode === 27) {
+    if (keyCode === KEY_CODES.ESCAPE_KEY && parentRef && parentRef.contains(event.target)) {
       this.props.onToggle && this.props.onToggle(false);
       this.toggle.focus();
     }