From 1bd965fe03ae28d786e7ef141825a27bc01d62fd Mon Sep 17 00:00:00 2001 From: Evan Sharp Date: Thu, 3 Oct 2019 08:43:15 -0400 Subject: [PATCH] feat(Dropdown): add a11y prop to tab moves focus (#1600) This adds a new a11y prop to Dropdrop, defaults to true. When the a11y prop is explicitly set to false: This changes the way tab works within the Dropdown. tab/shift-tab will move focus to the next logic item: tab will move down until the end. Then, at the end of the menu it will focus the next focusable item on the page and close the menu. shift-tab will move up until the start. Thenm, at the beginning of the menu it will focus the toggle and close the menu. Fixes #1441 --- docs/lib/Components/DropdownsPage.js | 1 + src/Dropdown.js | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/lib/Components/DropdownsPage.js b/docs/lib/Components/DropdownsPage.js index 302cb63e0..c0257ced7 100644 --- a/docs/lib/Components/DropdownsPage.js +++ b/docs/lib/Components/DropdownsPage.js @@ -57,6 +57,7 @@ export default class DropdownPage extends React.Component { 
           
 {`Dropdown.propTypes = {
+  a11y: PropTypes.bool, // defaults to true. Set to false to enable more bootstrap like tabbing behavior
   disabled: PropTypes.bool,
   direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
   group: PropTypes.bool,
diff --git a/src/Dropdown.js b/src/Dropdown.js
index 2fa6e33e5..b5beb360d 100644
--- a/src/Dropdown.js
+++ b/src/Dropdown.js
@@ -9,6 +9,7 @@ import { DropdownContext } from './DropdownContext';
 import { mapToCssModules, omit, keyCodes, tagPropType } from './utils';
 
 const propTypes = {
+  a11y: PropTypes.bool,
   disabled: PropTypes.bool,
   direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
   group: PropTypes.bool,
@@ -27,6 +28,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+  a11y: true,
   isOpen: false,
   direction: 'down',
   nav: false,
@@ -114,7 +116,7 @@ class Dropdown extends React.Component {
   handleKeyDown(e) {
     if (
       /input|textarea/i.test(e.target.tagName)
-      || (keyCodes.tab === e.which && e.target.getAttribute('role') !== 'menuitem')
+      || (keyCodes.tab === e.which && (e.target.getAttribute('role') !== 'menuitem' || !this.props.a11y))
     ) {
       return;
     }