From 529780b40494c71f487ab7f4eb9fd0451a1250c6 Mon Sep 17 00:00:00 2001
From: Megan Conley <megan.conley@concur.com>
Date: Wed, 13 Nov 2019 14:22:13 -0800
Subject: [PATCH 1/3] feat: add accessibility features to popover control

---
 .../__snapshots__/ComboboxInput.test.js.snap  |   8 ++
 .../__snapshots__/Dropdown.test.js.snap       |  20 ++++
 .../LocalizationEditor.test.js.snap           |  12 +++
 src/Popover/Popover.js                        |  32 +++++-
 src/Popover/Popover.test.js                   |  47 ++++++++
 .../__snapshots__/Popover.test.js.snap        |  16 +++
 .../__snapshots__/SearchInput.test.js.snap    |  16 +++
 .../__snapshots__/Shellbar.test.js.snap       | 102 ++++++++++++++++++
 src/Tile/__snapshots__/Tile.test.js.snap      |   8 ++
 .../__snapshots__/TileActions.test.js.snap    |   4 +
 10 files changed, 264 insertions(+), 1 deletion(-)

diff --git a/src/ComboboxInput/__snapshots__/ComboboxInput.test.js.snap b/src/ComboboxInput/__snapshots__/ComboboxInput.test.js.snap
index 324541110..e32e581c9 100644
--- a/src/ComboboxInput/__snapshots__/ComboboxInput.test.js.snap
+++ b/src/ComboboxInput/__snapshots__/ComboboxInput.test.js.snap
@@ -14,8 +14,12 @@ exports[`<ComboboxInput /> create combobox input 1`] = `
         className="fd-popover__control"
       >
         <div
+          aria-haspopup={true}
           className="fd-input-group"
           onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
         >
           <input
             className="fd-input fd-input-group__input"
@@ -52,8 +56,12 @@ exports[`<ComboboxInput /> create combobox input 2`] = `
         className="fd-popover__control"
       >
         <div
+          aria-haspopup={true}
           className="fd-input-group"
           onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
         >
           <input
             className="fd-input fd-input--compact fd-input-group__input"
diff --git a/src/Dropdown/__snapshots__/Dropdown.test.js.snap b/src/Dropdown/__snapshots__/Dropdown.test.js.snap
index 677cde2c1..284886ba2 100644
--- a/src/Dropdown/__snapshots__/Dropdown.test.js.snap
+++ b/src/Dropdown/__snapshots__/Dropdown.test.js.snap
@@ -16,8 +16,12 @@ exports[`<Dropdown /> create dropdown component 1`] = `
         className="fd-popover__control"
       >
         <button
+          aria-haspopup={true}
           className="fd-button fd-dropdown__control"
           onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
         >
           Select
         </button>
@@ -43,8 +47,12 @@ exports[`<Dropdown /> create dropdown component 2`] = `
         className="fd-popover__control"
       >
         <button
+          aria-haspopup={true}
           className="fd-button fd-button--compact fd-dropdown__control"
           onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
         >
           Select
         </button>
@@ -70,8 +78,12 @@ exports[`<Dropdown /> create dropdown component 3`] = `
         className="fd-popover__control"
       >
         <button
+          aria-haspopup={true}
           className="fd-button fd-dropdown__control"
           onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
         >
           Select
         </button>
@@ -98,8 +110,12 @@ exports[`<Dropdown /> create dropdown component 4`] = `
         className="fd-popover__control"
       >
         <button
+          aria-haspopup={true}
           className="fd-button sap-icon--filter fd-dropdown__control"
           onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
         >
           Select
         </button>
@@ -126,9 +142,13 @@ exports[`<Dropdown /> create dropdown component 5`] = `
         className="fd-popover__control"
       >
         <button
+          aria-haspopup={true}
           className="fd-button sap-icon--filter is-disabled fd-dropdown__control"
           disabled={true}
           onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
         >
           Select
         </button>
diff --git a/src/LocalizationEditor/__snapshots__/LocalizationEditor.test.js.snap b/src/LocalizationEditor/__snapshots__/LocalizationEditor.test.js.snap
index 4cb240df6..adf202a78 100644
--- a/src/LocalizationEditor/__snapshots__/LocalizationEditor.test.js.snap
+++ b/src/LocalizationEditor/__snapshots__/LocalizationEditor.test.js.snap
@@ -22,8 +22,12 @@ exports[`<LocalizationEditor /> create localization editor 1`] = `
         className="fd-popover__control"
       >
         <div
+          aria-haspopup={true}
           className="fd-input-group fd-input-group--after"
           onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
         >
           <input
             className="fd-input fd-input-group__input"
@@ -68,8 +72,12 @@ exports[`<LocalizationEditor /> create localization editor 2`] = `
         className="fd-popover__control"
       >
         <div
+          aria-haspopup={true}
           className="fd-input-group fd-input-group--after"
           onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
         >
           <input
             className="fd-input fd-input--compact fd-input-group__input"
@@ -114,8 +122,12 @@ exports[`<LocalizationEditor /> create localization editor 3`] = `
         className="fd-popover__control"
       >
         <div
+          aria-haspopup={true}
           className="fd-input-group fd-input-group--after"
           onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
         >
           <textarea
             className="fd-textarea fd-input-group__input"
diff --git a/src/Popover/Popover.js b/src/Popover/Popover.js
index 8c550e3f8..8d1f558b6 100644
--- a/src/Popover/Popover.js
+++ b/src/Popover/Popover.js
@@ -1,5 +1,6 @@
 import chain from 'chain-function';
 import classnames from 'classnames';
+import keycode from 'keycode';
 import Popper from '../utils/_Popper';
 import { POPPER_PLACEMENTS } from '../utils/constants';
 import PropTypes from 'prop-types';
@@ -15,6 +16,18 @@ class Popover extends Component {
         };
     }
 
+    isButton = (node) => {
+        if (!node) {
+            return false;
+        }
+        if (typeof node.type === 'string') {
+            return node.type.toLowerCase() === 'button';
+        } else if (node.type.displayName) {
+            return node.type.displayName.toLowerCase() === 'button';
+        }
+        return false;
+    };
+
     triggerBody = () => {
         if (!this.props.disabled) {
             this.setState(prevState => ({
@@ -31,6 +44,19 @@ class Popover extends Component {
         }
     };
 
+    handleKeyPress = (event, node, onClickFunctions) => {
+        if (!this.isButton(node)) {
+            switch (keycode(event)) {
+                case 'enter':
+                case 'space':
+                    event.preventDefault();
+                    onClickFunctions();
+                    break;
+                default:
+            }
+        }
+    }
+
     render() {
         const {
             disableEdgeDetection,
@@ -53,7 +79,11 @@ class Popover extends Component {
         }
 
         const referenceComponent = React.cloneElement(control, {
-            onClick: onClickFunctions
+            onClick: onClickFunctions,
+            tabIndex: 0,
+            role: 'button',
+            'aria-haspopup': true,
+            onKeyPress: (event) => this.handleKeyPress(event, control, onClickFunctions)
         });
 
         const popoverClasses = classnames('fd-popover', className);
diff --git a/src/Popover/Popover.test.js b/src/Popover/Popover.test.js
index 2cee18283..2292cce6b 100644
--- a/src/Popover/Popover.test.js
+++ b/src/Popover/Popover.test.js
@@ -182,6 +182,53 @@ describe('<Popover />', () => {
         });
     });
 
+    describe('control accessibility', () => {
+        test('adds a tabindex of 0 to the control', () => {
+            const wrapper = mountComponentWithStyles(popOver);
+            const button = wrapper.find('Icon').at(0);
+
+            expect(button.props().tabIndex).toEqual(0);
+        });
+
+        test('adds aria-haspopup to the control', () => {
+            const wrapper = mountComponentWithStyles(popOver);
+            const button = wrapper.find('Icon').at(0);
+
+            expect(button.props()['aria-haspopup']).toEqual(true);
+        });
+
+        test('adds a role of button to the control', () => {
+            const wrapper = mountComponentWithStyles(popOver);
+            const button = wrapper.find('Icon').at(0);
+
+            expect(button.props().role).toEqual('button');
+        });
+
+        test('handle space key to open popover', () => {
+            const syntheticEvent = {
+                keyCode: 32,
+                preventDefault: () => {}
+            };
+            const wrapper = mountComponentWithStyles(popOver);
+            const button = wrapper.find('Icon').at(0);
+            button.prop('onKeyPress')(syntheticEvent, 'Icon', wrapper.triggerBody);
+
+            expect(wrapper.state('isExpanded')).toBeTruthy();
+        });
+
+        test('handle enter key to open popover', () => {
+            const syntheticEvent = {
+                keyCode: 13,
+                preventDefault: () => {}
+            };
+            const wrapper = mountComponentWithStyles(popOver);
+            const button = wrapper.find('Icon').at(0);
+            button.prop('onKeyPress')(syntheticEvent, 'Icon', wrapper.triggerBody);
+
+            expect(wrapper.state('isExpanded')).toBeTruthy();
+        });
+    });
+
     describe('Callback handler', () => {
         test('should dispatch the onClickOutside callback with the event', () => {
             let f = jest.fn();
diff --git a/src/Popover/__snapshots__/Popover.test.js.snap b/src/Popover/__snapshots__/Popover.test.js.snap
index 1dcd03c28..ddfa11dc7 100644
--- a/src/Popover/__snapshots__/Popover.test.js.snap
+++ b/src/Popover/__snapshots__/Popover.test.js.snap
@@ -13,8 +13,12 @@ exports[`<Popover /> create Popover 1`] = `
       className="fd-popover__control"
     >
       <span
+        aria-haspopup={true}
         className="sap-icon--cart sap-icon--xl"
         onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
       />
     </div>
   </div>
@@ -34,8 +38,12 @@ exports[`<Popover /> create Popover 2`] = `
       className="fd-popover__control"
     >
       <span
+        aria-haspopup={true}
         className="sap-icon--cart sap-icon--xl"
         onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
       />
     </div>
   </div>
@@ -55,8 +63,12 @@ exports[`<Popover /> create Popover 3`] = `
       className="fd-popover__control"
     >
       <span
+        aria-haspopup={true}
         className="sap-icon--cart sap-icon--xl"
         onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
       />
     </div>
   </div>
@@ -76,8 +88,12 @@ exports[`<Popover /> create Popover 4`] = `
       className="fd-popover__control"
     >
       <span
+        aria-haspopup={true}
         className="sap-icon--cart sap-icon--xl"
         onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
       />
     </div>
   </div>
diff --git a/src/SearchInput/__snapshots__/SearchInput.test.js.snap b/src/SearchInput/__snapshots__/SearchInput.test.js.snap
index ab4037c38..dfda4e02d 100644
--- a/src/SearchInput/__snapshots__/SearchInput.test.js.snap
+++ b/src/SearchInput/__snapshots__/SearchInput.test.js.snap
@@ -16,8 +16,12 @@ exports[`<SearchInput /> create SearchInput 1`] = `
         className="fd-popover__control"
       >
         <div
+          aria-haspopup={true}
           className="fd-input-group fd-input-group--after"
           onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
         >
           <input
             className="fd-input fd-input-group__input"
@@ -57,8 +61,12 @@ exports[`<SearchInput /> create SearchInput 2`] = `
         className="fd-popover__control"
       >
         <div
+          aria-haspopup={true}
           className="fd-input-group fd-input-group--after"
           onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
         >
           <input
             className="fd-input fd-input-group__input"
@@ -98,8 +106,12 @@ exports[`<SearchInput /> create SearchInput 3`] = `
         className="fd-popover__control"
       >
         <div
+          aria-haspopup={true}
           className="fd-input-group fd-input-group--after"
           onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
         >
           <input
             className="fd-input fd-input-group__input"
@@ -139,8 +151,12 @@ exports[`<SearchInput /> create SearchInput 4`] = `
         className="fd-popover__control"
       >
         <div
+          aria-haspopup={true}
           className="fd-input-group fd-input-group--after"
           onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
         >
           <input
             className="fd-input fd-input-group__input"
diff --git a/src/Shellbar/__snapshots__/Shellbar.test.js.snap b/src/Shellbar/__snapshots__/Shellbar.test.js.snap
index adf451e76..4c596a071 100644
--- a/src/Shellbar/__snapshots__/Shellbar.test.js.snap
+++ b/src/Shellbar/__snapshots__/Shellbar.test.js.snap
@@ -42,9 +42,12 @@ exports[`<Shellbar /> create shellbar 1`] = `
               className="fd-popover__control"
             >
               <span
+                aria-haspopup={true}
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-has-background-color-accent-8"
                 onClick={[Function]}
+                onKeyPress={[Function]}
                 role=""
+                tabIndex={0}
               >
                 JS
               </span>
@@ -99,9 +102,12 @@ exports[`<Shellbar /> create shellbar 2`] = `
               className="fd-popover__control"
             >
               <span
+                aria-haspopup={true}
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-has-background-color-accent-8"
                 onClick={[Function]}
+                onKeyPress={[Function]}
                 role=""
+                tabIndex={0}
               >
                 JS
               </span>
@@ -144,8 +150,12 @@ exports[`<Shellbar /> create shellbar 3`] = `
             className="fd-popover__control"
           >
             <button
+              aria-haspopup={true}
               className="fd-product-menu__control"
               onClick={[Function]}
+              onKeyPress={[Function]}
+              role="button"
+              tabIndex={0}
             >
               <span
                 className="fd-shellbar__title"
@@ -194,8 +204,12 @@ exports[`<Shellbar /> create shellbar 3`] = `
               className="fd-popover__control"
             >
               <div
+                aria-haspopup={true}
                 className="fd-input-group fd-input-group--after"
                 onClick={[Function]}
+                onKeyPress={[Function]}
+                role="button"
+                tabIndex={0}
               >
                 <input
                   className="fd-input fd-input-group__input"
@@ -235,9 +249,13 @@ exports[`<Shellbar /> create shellbar 3`] = `
             className="fd-popover__control"
           >
             <button
+              aria-haspopup={true}
               aria-label="Settings"
               className="fd-button sap-icon--settings fd-shellbar__button"
               onClick={[Function]}
+              onKeyPress={[Function]}
+              role="button"
+              tabIndex={0}
             >
               <span
                 aria-label="Unread count"
@@ -262,8 +280,12 @@ exports[`<Shellbar /> create shellbar 3`] = `
           className="fd-popover__control"
         >
           <div
+            aria-haspopup={true}
             className="fd-shellbar__action fd-shellbar__action--desktop"
             onClick={[Function]}
+            onKeyPress={[Function]}
+            role="button"
+            tabIndex={0}
           >
             <button
               aria-label="Notifications"
@@ -295,9 +317,12 @@ exports[`<Shellbar /> create shellbar 3`] = `
             className="fd-popover__control"
           >
             <div
+              aria-haspopup={true}
               className="fd-shellbar-collapse--control"
               onClick={[Function]}
+              onKeyPress={[Function]}
               role="button"
+              tabIndex={0}
             >
               <button
                 className="fd-button sap-icon--overflow fd-shellbar__button"
@@ -334,9 +359,12 @@ exports[`<Shellbar /> create shellbar 3`] = `
               className="fd-popover__control"
             >
               <span
+                aria-haspopup={true}
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-has-background-color-accent-8"
                 onClick={[Function]}
+                onKeyPress={[Function]}
                 role=""
+                tabIndex={0}
               >
                 JS
               </span>
@@ -363,8 +391,12 @@ exports[`<Shellbar /> create shellbar 3`] = `
               className="fd-popover__control"
             >
               <button
+                aria-haspopup={true}
                 className="fd-button sap-icon--grid fd-shellbar__button"
                 onClick={[Function]}
+                onKeyPress={[Function]}
+                role="button"
+                tabIndex={0}
               />
             </div>
           </div>
@@ -405,8 +437,12 @@ exports[`<Shellbar /> create shellbar 4`] = `
             className="fd-popover__control"
           >
             <button
+              aria-haspopup={true}
               className="fd-product-menu__control"
               onClick={[Function]}
+              onKeyPress={[Function]}
+              role="button"
+              tabIndex={0}
             >
               <span
                 className="fd-shellbar__title"
@@ -455,8 +491,12 @@ exports[`<Shellbar /> create shellbar 4`] = `
               className="fd-popover__control"
             >
               <div
+                aria-haspopup={true}
                 className="fd-input-group fd-input-group--after"
                 onClick={[Function]}
+                onKeyPress={[Function]}
+                role="button"
+                tabIndex={0}
               >
                 <input
                   className="fd-input fd-input-group__input"
@@ -496,9 +536,13 @@ exports[`<Shellbar /> create shellbar 4`] = `
             className="fd-popover__control"
           >
             <button
+              aria-haspopup={true}
               aria-label="Settings"
               className="fd-button sap-icon--settings fd-shellbar__button"
               onClick={[Function]}
+              onKeyPress={[Function]}
+              role="button"
+              tabIndex={0}
             >
               <span
                 aria-label="Unread count"
@@ -523,8 +567,12 @@ exports[`<Shellbar /> create shellbar 4`] = `
           className="fd-popover__control"
         >
           <div
+            aria-haspopup={true}
             className="fd-shellbar__action fd-shellbar__action--desktop"
             onClick={[Function]}
+            onKeyPress={[Function]}
+            role="button"
+            tabIndex={0}
           >
             <button
               aria-label="Notifications"
@@ -549,9 +597,12 @@ exports[`<Shellbar /> create shellbar 4`] = `
             className="fd-popover__control"
           >
             <div
+              aria-haspopup={true}
               className="fd-shellbar-collapse--control"
               onClick={[Function]}
+              onKeyPress={[Function]}
               role="button"
+              tabIndex={0}
             >
               <button
                 className="fd-button sap-icon--overflow fd-shellbar__button"
@@ -588,9 +639,12 @@ exports[`<Shellbar /> create shellbar 4`] = `
               className="fd-popover__control"
             >
               <span
+                aria-haspopup={true}
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-has-background-color-accent-8"
                 onClick={[Function]}
+                onKeyPress={[Function]}
                 role=""
+                tabIndex={0}
               >
                 JS
               </span>
@@ -617,8 +671,12 @@ exports[`<Shellbar /> create shellbar 4`] = `
               className="fd-popover__control"
             >
               <button
+                aria-haspopup={true}
                 className="fd-button sap-icon--grid fd-shellbar__button"
                 onClick={[Function]}
+                onKeyPress={[Function]}
+                role="button"
+                tabIndex={0}
               />
             </div>
           </div>
@@ -659,8 +717,12 @@ exports[`<Shellbar /> create shellbar 5`] = `
             className="fd-popover__control"
           >
             <button
+              aria-haspopup={true}
               className="fd-product-menu__control"
               onClick={[Function]}
+              onKeyPress={[Function]}
+              role="button"
+              tabIndex={0}
             >
               <span
                 className="fd-shellbar__title"
@@ -709,8 +771,12 @@ exports[`<Shellbar /> create shellbar 5`] = `
               className="fd-popover__control"
             >
               <div
+                aria-haspopup={true}
                 className="fd-input-group fd-input-group--after"
                 onClick={[Function]}
+                onKeyPress={[Function]}
+                role="button"
+                tabIndex={0}
               >
                 <input
                   className="fd-input fd-input-group__input"
@@ -763,8 +829,12 @@ exports[`<Shellbar /> create shellbar 5`] = `
           className="fd-popover__control"
         >
           <div
+            aria-haspopup={true}
             className="fd-shellbar__action fd-shellbar__action--desktop"
             onClick={[Function]}
+            onKeyPress={[Function]}
+            role="button"
+            tabIndex={0}
           >
             <button
               aria-label="Notifications"
@@ -789,9 +859,12 @@ exports[`<Shellbar /> create shellbar 5`] = `
             className="fd-popover__control"
           >
             <div
+              aria-haspopup={true}
               className="fd-shellbar-collapse--control"
               onClick={[Function]}
+              onKeyPress={[Function]}
               role="button"
+              tabIndex={0}
             >
               <button
                 className="fd-button sap-icon--overflow fd-shellbar__button"
@@ -828,9 +901,12 @@ exports[`<Shellbar /> create shellbar 5`] = `
               className="fd-popover__control"
             >
               <span
+                aria-haspopup={true}
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-has-background-color-accent-8"
                 onClick={[Function]}
+                onKeyPress={[Function]}
                 role=""
+                tabIndex={0}
               >
                 JS
               </span>
@@ -857,8 +933,12 @@ exports[`<Shellbar /> create shellbar 5`] = `
               className="fd-popover__control"
             >
               <button
+                aria-haspopup={true}
                 className="fd-button sap-icon--grid fd-shellbar__button"
                 onClick={[Function]}
+                onKeyPress={[Function]}
+                role="button"
+                tabIndex={0}
               />
             </div>
           </div>
@@ -899,8 +979,12 @@ exports[`<Shellbar /> create shellbar 6`] = `
             className="fd-popover__control"
           >
             <button
+              aria-haspopup={true}
               className="fd-product-menu__control"
               onClick={[Function]}
+              onKeyPress={[Function]}
+              role="button"
+              tabIndex={0}
             >
               <span
                 className="fd-shellbar__title"
@@ -949,8 +1033,12 @@ exports[`<Shellbar /> create shellbar 6`] = `
               className="fd-popover__control"
             >
               <div
+                aria-haspopup={true}
                 className="fd-input-group fd-input-group--after"
                 onClick={[Function]}
+                onKeyPress={[Function]}
+                role="button"
+                tabIndex={0}
               >
                 <input
                   className="fd-input fd-input-group__input"
@@ -990,9 +1078,13 @@ exports[`<Shellbar /> create shellbar 6`] = `
             className="fd-popover__control"
           >
             <button
+              aria-haspopup={true}
               aria-label="Settings"
               className="fd-button sap-icon--settings fd-shellbar__button"
               onClick={[Function]}
+              onKeyPress={[Function]}
+              role="button"
+              tabIndex={0}
             >
               <span
                 aria-label="Unread count"
@@ -1036,9 +1128,12 @@ exports[`<Shellbar /> create shellbar 6`] = `
             className="fd-popover__control"
           >
             <div
+              aria-haspopup={true}
               className="fd-shellbar-collapse--control"
               onClick={[Function]}
+              onKeyPress={[Function]}
               role="button"
+              tabIndex={0}
             >
               <button
                 className="fd-button sap-icon--overflow fd-shellbar__button"
@@ -1075,14 +1170,17 @@ exports[`<Shellbar /> create shellbar 6`] = `
               className="fd-popover__control"
             >
               <span
+                aria-haspopup={true}
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-identifier--thumbnail"
                 onClick={[Function]}
+                onKeyPress={[Function]}
                 role="presentation"
                 style={
                   Object {
                     "backgroundImage": "url(//unpkg.com/fundamental-styles/dist/images/sap-logo.png)",
                   }
                 }
+                tabIndex={0}
               />
             </div>
           </div>
@@ -1107,8 +1205,12 @@ exports[`<Shellbar /> create shellbar 6`] = `
               className="fd-popover__control"
             >
               <button
+                aria-haspopup={true}
                 className="fd-button sap-icon--grid fd-shellbar__button"
                 onClick={[Function]}
+                onKeyPress={[Function]}
+                role="button"
+                tabIndex={0}
               />
             </div>
           </div>
diff --git a/src/Tile/__snapshots__/Tile.test.js.snap b/src/Tile/__snapshots__/Tile.test.js.snap
index f9fbbff41..842a6e0c7 100644
--- a/src/Tile/__snapshots__/Tile.test.js.snap
+++ b/src/Tile/__snapshots__/Tile.test.js.snap
@@ -95,8 +95,12 @@ exports[`<Tile /> create tile component 4`] = `
           className="fd-popover__control"
         >
           <button
+            aria-haspopup={true}
             className="fd-button fd-button--standard sap-icon--vertical-grip"
             onClick={[Function]}
+            onKeyPress={[Function]}
+            role="button"
+            tabIndex={0}
           />
         </div>
       </div>
@@ -160,8 +164,12 @@ exports[`<Tile /> create tile component 6`] = `
           className="fd-popover__control"
         >
           <button
+            aria-haspopup={true}
             className="fd-button fd-button--standard sap-icon--vertical-grip"
             onClick={[Function]}
+            onKeyPress={[Function]}
+            role="button"
+            tabIndex={0}
           />
         </div>
       </div>
diff --git a/src/Tile/__snapshots__/TileActions.test.js.snap b/src/Tile/__snapshots__/TileActions.test.js.snap
index 6b3240eb8..74bd2f200 100644
--- a/src/Tile/__snapshots__/TileActions.test.js.snap
+++ b/src/Tile/__snapshots__/TileActions.test.js.snap
@@ -16,8 +16,12 @@ exports[`<Tile.Actions /> create Tile.Actions component 1`] = `
         className="fd-popover__control"
       >
         <button
+          aria-haspopup={true}
           className="fd-button fd-button--standard sap-icon--vertical-grip"
           onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
         />
       </div>
     </div>

From 1051491b0bf2e13d6031947ecfd815aad7fe4cff Mon Sep 17 00:00:00 2001
From: Megan Conley <megan.conley@concur.com>
Date: Fri, 15 Nov 2019 10:51:49 -0800
Subject: [PATCH 2/3] disable keyboard press handler on components that use
 complex controls

---
 src/ComboboxInput/ComboboxInput.js            |  1 +
 .../__snapshots__/ComboboxInput.test.js.snap  |  8 ----
 .../__snapshots__/Dropdown.test.js.snap       |  5 +++
 src/LocalizationEditor/LocalizationEditor.js  |  1 +
 .../LocalizationEditor.test.js.snap           | 12 ------
 src/Popover/Popover.js                        | 25 ++++++++----
 .../__snapshots__/Popover.test.js.snap        |  4 ++
 src/SearchInput/SearchInput.js                |  1 +
 .../__snapshots__/SearchInput.test.js.snap    | 16 --------
 .../__snapshots__/Shellbar.test.js.snap       | 40 +++++++++++--------
 src/Tile/__snapshots__/Tile.test.js.snap      |  2 +
 .../__snapshots__/TileActions.test.js.snap    |  1 +
 12 files changed, 57 insertions(+), 59 deletions(-)

diff --git a/src/ComboboxInput/ComboboxInput.js b/src/ComboboxInput/ComboboxInput.js
index 1150719a5..c4b47427c 100644
--- a/src/ComboboxInput/ComboboxInput.js
+++ b/src/ComboboxInput/ComboboxInput.js
@@ -37,6 +37,7 @@ const ComboboxInput = React.forwardRef(({ placeholder, menu, compact, className,
                         </span>
                     </div>
                 }
+                disableKeyPressHandler
                 disableStyles={disableStyles}
                 noArrow />
         </div>
diff --git a/src/ComboboxInput/__snapshots__/ComboboxInput.test.js.snap b/src/ComboboxInput/__snapshots__/ComboboxInput.test.js.snap
index e32e581c9..324541110 100644
--- a/src/ComboboxInput/__snapshots__/ComboboxInput.test.js.snap
+++ b/src/ComboboxInput/__snapshots__/ComboboxInput.test.js.snap
@@ -14,12 +14,8 @@ exports[`<ComboboxInput /> create combobox input 1`] = `
         className="fd-popover__control"
       >
         <div
-          aria-haspopup={true}
           className="fd-input-group"
           onClick={[Function]}
-          onKeyPress={[Function]}
-          role="button"
-          tabIndex={0}
         >
           <input
             className="fd-input fd-input-group__input"
@@ -56,12 +52,8 @@ exports[`<ComboboxInput /> create combobox input 2`] = `
         className="fd-popover__control"
       >
         <div
-          aria-haspopup={true}
           className="fd-input-group"
           onClick={[Function]}
-          onKeyPress={[Function]}
-          role="button"
-          tabIndex={0}
         >
           <input
             className="fd-input fd-input--compact fd-input-group__input"
diff --git a/src/Dropdown/__snapshots__/Dropdown.test.js.snap b/src/Dropdown/__snapshots__/Dropdown.test.js.snap
index 284886ba2..adb688941 100644
--- a/src/Dropdown/__snapshots__/Dropdown.test.js.snap
+++ b/src/Dropdown/__snapshots__/Dropdown.test.js.snap
@@ -17,6 +17,7 @@ exports[`<Dropdown /> create dropdown component 1`] = `
       >
         <button
           aria-haspopup={true}
+          ariaRole="button"
           className="fd-button fd-dropdown__control"
           onClick={[Function]}
           onKeyPress={[Function]}
@@ -48,6 +49,7 @@ exports[`<Dropdown /> create dropdown component 2`] = `
       >
         <button
           aria-haspopup={true}
+          ariaRole="button"
           className="fd-button fd-button--compact fd-dropdown__control"
           onClick={[Function]}
           onKeyPress={[Function]}
@@ -79,6 +81,7 @@ exports[`<Dropdown /> create dropdown component 3`] = `
       >
         <button
           aria-haspopup={true}
+          ariaRole="button"
           className="fd-button fd-dropdown__control"
           onClick={[Function]}
           onKeyPress={[Function]}
@@ -111,6 +114,7 @@ exports[`<Dropdown /> create dropdown component 4`] = `
       >
         <button
           aria-haspopup={true}
+          ariaRole="button"
           className="fd-button sap-icon--filter fd-dropdown__control"
           onClick={[Function]}
           onKeyPress={[Function]}
@@ -143,6 +147,7 @@ exports[`<Dropdown /> create dropdown component 5`] = `
       >
         <button
           aria-haspopup={true}
+          ariaRole="button"
           className="fd-button sap-icon--filter is-disabled fd-dropdown__control"
           disabled={true}
           onClick={[Function]}
diff --git a/src/LocalizationEditor/LocalizationEditor.js b/src/LocalizationEditor/LocalizationEditor.js
index ba682cc38..038fc24b3 100644
--- a/src/LocalizationEditor/LocalizationEditor.js
+++ b/src/LocalizationEditor/LocalizationEditor.js
@@ -110,6 +110,7 @@ const LocalizationEditor = React.forwardRef(({ control, menu, id, compact, texta
                         </span>
                     </div>
                 }
+                disableKeyPressHandler
                 disableStyles={disableStyles}
                 id={id}
                 noArrow />
diff --git a/src/LocalizationEditor/__snapshots__/LocalizationEditor.test.js.snap b/src/LocalizationEditor/__snapshots__/LocalizationEditor.test.js.snap
index adf202a78..4cb240df6 100644
--- a/src/LocalizationEditor/__snapshots__/LocalizationEditor.test.js.snap
+++ b/src/LocalizationEditor/__snapshots__/LocalizationEditor.test.js.snap
@@ -22,12 +22,8 @@ exports[`<LocalizationEditor /> create localization editor 1`] = `
         className="fd-popover__control"
       >
         <div
-          aria-haspopup={true}
           className="fd-input-group fd-input-group--after"
           onClick={[Function]}
-          onKeyPress={[Function]}
-          role="button"
-          tabIndex={0}
         >
           <input
             className="fd-input fd-input-group__input"
@@ -72,12 +68,8 @@ exports[`<LocalizationEditor /> create localization editor 2`] = `
         className="fd-popover__control"
       >
         <div
-          aria-haspopup={true}
           className="fd-input-group fd-input-group--after"
           onClick={[Function]}
-          onKeyPress={[Function]}
-          role="button"
-          tabIndex={0}
         >
           <input
             className="fd-input fd-input--compact fd-input-group__input"
@@ -122,12 +114,8 @@ exports[`<LocalizationEditor /> create localization editor 3`] = `
         className="fd-popover__control"
       >
         <div
-          aria-haspopup={true}
           className="fd-input-group fd-input-group--after"
           onClick={[Function]}
-          onKeyPress={[Function]}
-          role="button"
-          tabIndex={0}
         >
           <textarea
             className="fd-textarea fd-input-group__input"
diff --git a/src/Popover/Popover.js b/src/Popover/Popover.js
index 8d1f558b6..c05ecd672 100644
--- a/src/Popover/Popover.js
+++ b/src/Popover/Popover.js
@@ -60,6 +60,7 @@ class Popover extends Component {
     render() {
         const {
             disableEdgeDetection,
+            disableKeyPressHandler,
             disableStyles,
             onClickOutside,
             onEscapeKey,
@@ -78,13 +79,22 @@ class Popover extends Component {
             onClickFunctions = chain(this.triggerBody, control.props.onClick);
         }
 
-        const referenceComponent = React.cloneElement(control, {
-            onClick: onClickFunctions,
-            tabIndex: 0,
-            role: 'button',
-            'aria-haspopup': true,
-            onKeyPress: (event) => this.handleKeyPress(event, control, onClickFunctions)
-        });
+        let controlProps = {
+            onClick: onClickFunctions
+        };
+
+        if (!disableKeyPressHandler) {
+            controlProps = {
+                ...controlProps,
+                tabIndex: 0,
+                role: 'button',
+                ariaRole: 'button',
+                'aria-haspopup': true,
+                onKeyPress: (event) => this.handleKeyPress(event, control, onClickFunctions)
+            };
+        }
+
+        const referenceComponent = React.cloneElement(control, controlProps);
 
         const popoverClasses = classnames('fd-popover', className);
 
@@ -118,6 +128,7 @@ Popover.propTypes = {
     customStyles: PropTypes.object,
     disabled: PropTypes.bool,
     disableEdgeDetection: PropTypes.bool,
+    disableKeyPressHandler: PropTypes.bool,
     disableStyles: PropTypes.bool,
     noArrow: PropTypes.bool,
     placement: PropTypes.oneOf(POPPER_PLACEMENTS),
diff --git a/src/Popover/__snapshots__/Popover.test.js.snap b/src/Popover/__snapshots__/Popover.test.js.snap
index ddfa11dc7..bf3b656b8 100644
--- a/src/Popover/__snapshots__/Popover.test.js.snap
+++ b/src/Popover/__snapshots__/Popover.test.js.snap
@@ -14,6 +14,7 @@ exports[`<Popover /> create Popover 1`] = `
     >
       <span
         aria-haspopup={true}
+        ariaRole="button"
         className="sap-icon--cart sap-icon--xl"
         onClick={[Function]}
         onKeyPress={[Function]}
@@ -39,6 +40,7 @@ exports[`<Popover /> create Popover 2`] = `
     >
       <span
         aria-haspopup={true}
+        ariaRole="button"
         className="sap-icon--cart sap-icon--xl"
         onClick={[Function]}
         onKeyPress={[Function]}
@@ -64,6 +66,7 @@ exports[`<Popover /> create Popover 3`] = `
     >
       <span
         aria-haspopup={true}
+        ariaRole="button"
         className="sap-icon--cart sap-icon--xl"
         onClick={[Function]}
         onKeyPress={[Function]}
@@ -89,6 +92,7 @@ exports[`<Popover /> create Popover 4`] = `
     >
       <span
         aria-haspopup={true}
+        ariaRole="button"
         className="sap-icon--cart sap-icon--xl"
         onClick={[Function]}
         onKeyPress={[Function]}
diff --git a/src/SearchInput/SearchInput.js b/src/SearchInput/SearchInput.js
index 62fc0f810..2a7423981 100644
--- a/src/SearchInput/SearchInput.js
+++ b/src/SearchInput/SearchInput.js
@@ -184,6 +184,7 @@ class SearchInput extends Component {
                             )}
                         </div>
                     }
+                    disableKeyPressHandler
                     disableStyles={disableStyles} />
             </div>
         );
diff --git a/src/SearchInput/__snapshots__/SearchInput.test.js.snap b/src/SearchInput/__snapshots__/SearchInput.test.js.snap
index dfda4e02d..ab4037c38 100644
--- a/src/SearchInput/__snapshots__/SearchInput.test.js.snap
+++ b/src/SearchInput/__snapshots__/SearchInput.test.js.snap
@@ -16,12 +16,8 @@ exports[`<SearchInput /> create SearchInput 1`] = `
         className="fd-popover__control"
       >
         <div
-          aria-haspopup={true}
           className="fd-input-group fd-input-group--after"
           onClick={[Function]}
-          onKeyPress={[Function]}
-          role="button"
-          tabIndex={0}
         >
           <input
             className="fd-input fd-input-group__input"
@@ -61,12 +57,8 @@ exports[`<SearchInput /> create SearchInput 2`] = `
         className="fd-popover__control"
       >
         <div
-          aria-haspopup={true}
           className="fd-input-group fd-input-group--after"
           onClick={[Function]}
-          onKeyPress={[Function]}
-          role="button"
-          tabIndex={0}
         >
           <input
             className="fd-input fd-input-group__input"
@@ -106,12 +98,8 @@ exports[`<SearchInput /> create SearchInput 3`] = `
         className="fd-popover__control"
       >
         <div
-          aria-haspopup={true}
           className="fd-input-group fd-input-group--after"
           onClick={[Function]}
-          onKeyPress={[Function]}
-          role="button"
-          tabIndex={0}
         >
           <input
             className="fd-input fd-input-group__input"
@@ -151,12 +139,8 @@ exports[`<SearchInput /> create SearchInput 4`] = `
         className="fd-popover__control"
       >
         <div
-          aria-haspopup={true}
           className="fd-input-group fd-input-group--after"
           onClick={[Function]}
-          onKeyPress={[Function]}
-          role="button"
-          tabIndex={0}
         >
           <input
             className="fd-input fd-input-group__input"
diff --git a/src/Shellbar/__snapshots__/Shellbar.test.js.snap b/src/Shellbar/__snapshots__/Shellbar.test.js.snap
index 4c596a071..b4d37b303 100644
--- a/src/Shellbar/__snapshots__/Shellbar.test.js.snap
+++ b/src/Shellbar/__snapshots__/Shellbar.test.js.snap
@@ -43,6 +43,7 @@ exports[`<Shellbar /> create shellbar 1`] = `
             >
               <span
                 aria-haspopup={true}
+                ariaRole="button"
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-has-background-color-accent-8"
                 onClick={[Function]}
                 onKeyPress={[Function]}
@@ -103,6 +104,7 @@ exports[`<Shellbar /> create shellbar 2`] = `
             >
               <span
                 aria-haspopup={true}
+                ariaRole="button"
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-has-background-color-accent-8"
                 onClick={[Function]}
                 onKeyPress={[Function]}
@@ -151,6 +153,7 @@ exports[`<Shellbar /> create shellbar 3`] = `
           >
             <button
               aria-haspopup={true}
+              ariaRole="button"
               className="fd-product-menu__control"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -204,12 +207,8 @@ exports[`<Shellbar /> create shellbar 3`] = `
               className="fd-popover__control"
             >
               <div
-                aria-haspopup={true}
                 className="fd-input-group fd-input-group--after"
                 onClick={[Function]}
-                onKeyPress={[Function]}
-                role="button"
-                tabIndex={0}
               >
                 <input
                   className="fd-input fd-input-group__input"
@@ -251,6 +250,7 @@ exports[`<Shellbar /> create shellbar 3`] = `
             <button
               aria-haspopup={true}
               aria-label="Settings"
+              ariaRole="button"
               className="fd-button sap-icon--settings fd-shellbar__button"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -281,6 +281,7 @@ exports[`<Shellbar /> create shellbar 3`] = `
         >
           <div
             aria-haspopup={true}
+            ariaRole="button"
             className="fd-shellbar__action fd-shellbar__action--desktop"
             onClick={[Function]}
             onKeyPress={[Function]}
@@ -318,6 +319,7 @@ exports[`<Shellbar /> create shellbar 3`] = `
           >
             <div
               aria-haspopup={true}
+              ariaRole="button"
               className="fd-shellbar-collapse--control"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -360,6 +362,7 @@ exports[`<Shellbar /> create shellbar 3`] = `
             >
               <span
                 aria-haspopup={true}
+                ariaRole="button"
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-has-background-color-accent-8"
                 onClick={[Function]}
                 onKeyPress={[Function]}
@@ -392,6 +395,7 @@ exports[`<Shellbar /> create shellbar 3`] = `
             >
               <button
                 aria-haspopup={true}
+                ariaRole="button"
                 className="fd-button sap-icon--grid fd-shellbar__button"
                 onClick={[Function]}
                 onKeyPress={[Function]}
@@ -438,6 +442,7 @@ exports[`<Shellbar /> create shellbar 4`] = `
           >
             <button
               aria-haspopup={true}
+              ariaRole="button"
               className="fd-product-menu__control"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -491,12 +496,8 @@ exports[`<Shellbar /> create shellbar 4`] = `
               className="fd-popover__control"
             >
               <div
-                aria-haspopup={true}
                 className="fd-input-group fd-input-group--after"
                 onClick={[Function]}
-                onKeyPress={[Function]}
-                role="button"
-                tabIndex={0}
               >
                 <input
                   className="fd-input fd-input-group__input"
@@ -538,6 +539,7 @@ exports[`<Shellbar /> create shellbar 4`] = `
             <button
               aria-haspopup={true}
               aria-label="Settings"
+              ariaRole="button"
               className="fd-button sap-icon--settings fd-shellbar__button"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -568,6 +570,7 @@ exports[`<Shellbar /> create shellbar 4`] = `
         >
           <div
             aria-haspopup={true}
+            ariaRole="button"
             className="fd-shellbar__action fd-shellbar__action--desktop"
             onClick={[Function]}
             onKeyPress={[Function]}
@@ -598,6 +601,7 @@ exports[`<Shellbar /> create shellbar 4`] = `
           >
             <div
               aria-haspopup={true}
+              ariaRole="button"
               className="fd-shellbar-collapse--control"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -640,6 +644,7 @@ exports[`<Shellbar /> create shellbar 4`] = `
             >
               <span
                 aria-haspopup={true}
+                ariaRole="button"
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-has-background-color-accent-8"
                 onClick={[Function]}
                 onKeyPress={[Function]}
@@ -672,6 +677,7 @@ exports[`<Shellbar /> create shellbar 4`] = `
             >
               <button
                 aria-haspopup={true}
+                ariaRole="button"
                 className="fd-button sap-icon--grid fd-shellbar__button"
                 onClick={[Function]}
                 onKeyPress={[Function]}
@@ -718,6 +724,7 @@ exports[`<Shellbar /> create shellbar 5`] = `
           >
             <button
               aria-haspopup={true}
+              ariaRole="button"
               className="fd-product-menu__control"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -771,12 +778,8 @@ exports[`<Shellbar /> create shellbar 5`] = `
               className="fd-popover__control"
             >
               <div
-                aria-haspopup={true}
                 className="fd-input-group fd-input-group--after"
                 onClick={[Function]}
-                onKeyPress={[Function]}
-                role="button"
-                tabIndex={0}
               >
                 <input
                   className="fd-input fd-input-group__input"
@@ -830,6 +833,7 @@ exports[`<Shellbar /> create shellbar 5`] = `
         >
           <div
             aria-haspopup={true}
+            ariaRole="button"
             className="fd-shellbar__action fd-shellbar__action--desktop"
             onClick={[Function]}
             onKeyPress={[Function]}
@@ -860,6 +864,7 @@ exports[`<Shellbar /> create shellbar 5`] = `
           >
             <div
               aria-haspopup={true}
+              ariaRole="button"
               className="fd-shellbar-collapse--control"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -902,6 +907,7 @@ exports[`<Shellbar /> create shellbar 5`] = `
             >
               <span
                 aria-haspopup={true}
+                ariaRole="button"
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-has-background-color-accent-8"
                 onClick={[Function]}
                 onKeyPress={[Function]}
@@ -934,6 +940,7 @@ exports[`<Shellbar /> create shellbar 5`] = `
             >
               <button
                 aria-haspopup={true}
+                ariaRole="button"
                 className="fd-button sap-icon--grid fd-shellbar__button"
                 onClick={[Function]}
                 onKeyPress={[Function]}
@@ -980,6 +987,7 @@ exports[`<Shellbar /> create shellbar 6`] = `
           >
             <button
               aria-haspopup={true}
+              ariaRole="button"
               className="fd-product-menu__control"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -1033,12 +1041,8 @@ exports[`<Shellbar /> create shellbar 6`] = `
               className="fd-popover__control"
             >
               <div
-                aria-haspopup={true}
                 className="fd-input-group fd-input-group--after"
                 onClick={[Function]}
-                onKeyPress={[Function]}
-                role="button"
-                tabIndex={0}
               >
                 <input
                   className="fd-input fd-input-group__input"
@@ -1080,6 +1084,7 @@ exports[`<Shellbar /> create shellbar 6`] = `
             <button
               aria-haspopup={true}
               aria-label="Settings"
+              ariaRole="button"
               className="fd-button sap-icon--settings fd-shellbar__button"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -1129,6 +1134,7 @@ exports[`<Shellbar /> create shellbar 6`] = `
           >
             <div
               aria-haspopup={true}
+              ariaRole="button"
               className="fd-shellbar-collapse--control"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -1171,6 +1177,7 @@ exports[`<Shellbar /> create shellbar 6`] = `
             >
               <span
                 aria-haspopup={true}
+                ariaRole="button"
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-identifier--thumbnail"
                 onClick={[Function]}
                 onKeyPress={[Function]}
@@ -1206,6 +1213,7 @@ exports[`<Shellbar /> create shellbar 6`] = `
             >
               <button
                 aria-haspopup={true}
+                ariaRole="button"
                 className="fd-button sap-icon--grid fd-shellbar__button"
                 onClick={[Function]}
                 onKeyPress={[Function]}
diff --git a/src/Tile/__snapshots__/Tile.test.js.snap b/src/Tile/__snapshots__/Tile.test.js.snap
index 842a6e0c7..284fcf2d6 100644
--- a/src/Tile/__snapshots__/Tile.test.js.snap
+++ b/src/Tile/__snapshots__/Tile.test.js.snap
@@ -96,6 +96,7 @@ exports[`<Tile /> create tile component 4`] = `
         >
           <button
             aria-haspopup={true}
+            ariaRole="button"
             className="fd-button fd-button--standard sap-icon--vertical-grip"
             onClick={[Function]}
             onKeyPress={[Function]}
@@ -165,6 +166,7 @@ exports[`<Tile /> create tile component 6`] = `
         >
           <button
             aria-haspopup={true}
+            ariaRole="button"
             className="fd-button fd-button--standard sap-icon--vertical-grip"
             onClick={[Function]}
             onKeyPress={[Function]}
diff --git a/src/Tile/__snapshots__/TileActions.test.js.snap b/src/Tile/__snapshots__/TileActions.test.js.snap
index 74bd2f200..fad7de762 100644
--- a/src/Tile/__snapshots__/TileActions.test.js.snap
+++ b/src/Tile/__snapshots__/TileActions.test.js.snap
@@ -17,6 +17,7 @@ exports[`<Tile.Actions /> create Tile.Actions component 1`] = `
       >
         <button
           aria-haspopup={true}
+          ariaRole="button"
           className="fd-button fd-button--standard sap-icon--vertical-grip"
           onClick={[Function]}
           onKeyPress={[Function]}

From 4d5306242d1d6e72dae782420d87534e39d29331 Mon Sep 17 00:00:00 2001
From: Megan Conley <megan.conley@concur.com>
Date: Mon, 18 Nov 2019 18:21:03 -0800
Subject: [PATCH 3/3] update role handling

---
 .../__snapshots__/Dropdown.test.js.snap       |  5 ---
 src/Identifier/Identifier.js                  | 11 ++++--
 src/Popover/Popover.js                        |  2 +-
 .../__snapshots__/Popover.test.js.snap        |  4 ---
 .../__snapshots__/Shellbar.test.js.snap       | 36 ++++---------------
 src/Tile/__snapshots__/Tile.test.js.snap      |  2 --
 .../__snapshots__/TileActions.test.js.snap    |  1 -
 7 files changed, 16 insertions(+), 45 deletions(-)

diff --git a/src/Dropdown/__snapshots__/Dropdown.test.js.snap b/src/Dropdown/__snapshots__/Dropdown.test.js.snap
index adb688941..284886ba2 100644
--- a/src/Dropdown/__snapshots__/Dropdown.test.js.snap
+++ b/src/Dropdown/__snapshots__/Dropdown.test.js.snap
@@ -17,7 +17,6 @@ exports[`<Dropdown /> create dropdown component 1`] = `
       >
         <button
           aria-haspopup={true}
-          ariaRole="button"
           className="fd-button fd-dropdown__control"
           onClick={[Function]}
           onKeyPress={[Function]}
@@ -49,7 +48,6 @@ exports[`<Dropdown /> create dropdown component 2`] = `
       >
         <button
           aria-haspopup={true}
-          ariaRole="button"
           className="fd-button fd-button--compact fd-dropdown__control"
           onClick={[Function]}
           onKeyPress={[Function]}
@@ -81,7 +79,6 @@ exports[`<Dropdown /> create dropdown component 3`] = `
       >
         <button
           aria-haspopup={true}
-          ariaRole="button"
           className="fd-button fd-dropdown__control"
           onClick={[Function]}
           onKeyPress={[Function]}
@@ -114,7 +111,6 @@ exports[`<Dropdown /> create dropdown component 4`] = `
       >
         <button
           aria-haspopup={true}
-          ariaRole="button"
           className="fd-button sap-icon--filter fd-dropdown__control"
           onClick={[Function]}
           onKeyPress={[Function]}
@@ -147,7 +143,6 @@ exports[`<Dropdown /> create dropdown component 5`] = `
       >
         <button
           aria-haspopup={true}
-          ariaRole="button"
           className="fd-button sap-icon--filter is-disabled fd-dropdown__control"
           disabled={true}
           onClick={[Function]}
diff --git a/src/Identifier/Identifier.js b/src/Identifier/Identifier.js
index 1efbc5896..f16b0e2cb 100644
--- a/src/Identifier/Identifier.js
+++ b/src/Identifier/Identifier.js
@@ -5,7 +5,7 @@ import React from 'react';
 import withStyles from '../utils/WithStyles/WithStyles';
 import { IDENTIFIER_MODIFIERS, IDENTIFIER_SIZES } from '../utils/constants';
 
-const Identifier = React.forwardRef(({ glyph, size, modifier, color, label, backgroundImageUrl, children, className, disableStyles, ...props }, ref) => {
+const Identifier = React.forwardRef(({ glyph, size, modifier, color, label, backgroundImageUrl, children, className, disableStyles, role, ...props }, ref) => {
     const styles = {
         backgroundImage: `url(${backgroundImageUrl})`
     };
@@ -21,7 +21,12 @@ const Identifier = React.forwardRef(({ glyph, size, modifier, color, label, back
         className
     );
 
-    const ariaRole = !children ? 'presentation' : '';
+    let ariaRole;
+    if (role) {
+        ariaRole = role;
+    } else {
+        ariaRole = !children ? 'presentation' : '';
+    }
 
     return (
         <span
@@ -48,6 +53,7 @@ Identifier.propTypes = {
     glyph: PropTypes.string,
     label: PropTypes.string,
     modifier: PropTypes.oneOf(IDENTIFIER_MODIFIERS),
+    role: PropTypes.string,
     size: PropTypes.oneOf(IDENTIFIER_SIZES)
 };
 
@@ -55,6 +61,7 @@ Identifier.propDescriptions = {
     backgroundImageUrl: 'Image URL.',
     color: 'Applies a background color.',
     label: 'Localized text for label.',
+    role: 'Applies an aria-role. Set to button if Identifier opens a Popover or Modal.',
     size: 'Size of the image. These sizes are available: **xxs** (extra extra small) - 20px, **xs** (extra small) - 28px, **s** (small) - 32px, **m** (medium) - 48px, **l** (large) - 64px, **xl** (extra lagre) - 88px, and **xxl** (extra extra large). Default matches the base font size (14px).'
 };
 
diff --git a/src/Popover/Popover.js b/src/Popover/Popover.js
index c05ecd672..ece0b3e5a 100644
--- a/src/Popover/Popover.js
+++ b/src/Popover/Popover.js
@@ -88,7 +88,6 @@ class Popover extends Component {
                 ...controlProps,
                 tabIndex: 0,
                 role: 'button',
-                ariaRole: 'button',
                 'aria-haspopup': true,
                 onKeyPress: (event) => this.handleKeyPress(event, control, onClickFunctions)
             };
@@ -146,6 +145,7 @@ Popover.propDescriptions = {
     body: 'Node(s) to render in the overlay.',
     control: 'Node to render as the reference element (that the `body` will be placed in relation to).',
     disableEdgeDetection: 'Set to **true** to render popover without edge detection so popover will not flip from top to bottom with scroll.',
+    disableKeyPressHandler: 'Set to **true** to remove onKeyPress handler and aria-* roles. Only do so if the control is a complex component such as a FormInput with Button.',
     noArrow: 'Set to **true** to render a popover without an arrow.',
     placement: 'Initial position of the `body` (overlay) related to the `control`.',
     popperProps: 'Additional props to be spread to the overlay element, supported by <a href="https://popper.js.org" target="_blank">popper.js</a>.',
diff --git a/src/Popover/__snapshots__/Popover.test.js.snap b/src/Popover/__snapshots__/Popover.test.js.snap
index bf3b656b8..ddfa11dc7 100644
--- a/src/Popover/__snapshots__/Popover.test.js.snap
+++ b/src/Popover/__snapshots__/Popover.test.js.snap
@@ -14,7 +14,6 @@ exports[`<Popover /> create Popover 1`] = `
     >
       <span
         aria-haspopup={true}
-        ariaRole="button"
         className="sap-icon--cart sap-icon--xl"
         onClick={[Function]}
         onKeyPress={[Function]}
@@ -40,7 +39,6 @@ exports[`<Popover /> create Popover 2`] = `
     >
       <span
         aria-haspopup={true}
-        ariaRole="button"
         className="sap-icon--cart sap-icon--xl"
         onClick={[Function]}
         onKeyPress={[Function]}
@@ -66,7 +64,6 @@ exports[`<Popover /> create Popover 3`] = `
     >
       <span
         aria-haspopup={true}
-        ariaRole="button"
         className="sap-icon--cart sap-icon--xl"
         onClick={[Function]}
         onKeyPress={[Function]}
@@ -92,7 +89,6 @@ exports[`<Popover /> create Popover 4`] = `
     >
       <span
         aria-haspopup={true}
-        ariaRole="button"
         className="sap-icon--cart sap-icon--xl"
         onClick={[Function]}
         onKeyPress={[Function]}
diff --git a/src/Shellbar/__snapshots__/Shellbar.test.js.snap b/src/Shellbar/__snapshots__/Shellbar.test.js.snap
index b4d37b303..8c4b969af 100644
--- a/src/Shellbar/__snapshots__/Shellbar.test.js.snap
+++ b/src/Shellbar/__snapshots__/Shellbar.test.js.snap
@@ -43,11 +43,10 @@ exports[`<Shellbar /> create shellbar 1`] = `
             >
               <span
                 aria-haspopup={true}
-                ariaRole="button"
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-has-background-color-accent-8"
                 onClick={[Function]}
                 onKeyPress={[Function]}
-                role=""
+                role="button"
                 tabIndex={0}
               >
                 JS
@@ -104,11 +103,10 @@ exports[`<Shellbar /> create shellbar 2`] = `
             >
               <span
                 aria-haspopup={true}
-                ariaRole="button"
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-has-background-color-accent-8"
                 onClick={[Function]}
                 onKeyPress={[Function]}
-                role=""
+                role="button"
                 tabIndex={0}
               >
                 JS
@@ -153,7 +151,6 @@ exports[`<Shellbar /> create shellbar 3`] = `
           >
             <button
               aria-haspopup={true}
-              ariaRole="button"
               className="fd-product-menu__control"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -250,7 +247,6 @@ exports[`<Shellbar /> create shellbar 3`] = `
             <button
               aria-haspopup={true}
               aria-label="Settings"
-              ariaRole="button"
               className="fd-button sap-icon--settings fd-shellbar__button"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -281,7 +277,6 @@ exports[`<Shellbar /> create shellbar 3`] = `
         >
           <div
             aria-haspopup={true}
-            ariaRole="button"
             className="fd-shellbar__action fd-shellbar__action--desktop"
             onClick={[Function]}
             onKeyPress={[Function]}
@@ -319,7 +314,6 @@ exports[`<Shellbar /> create shellbar 3`] = `
           >
             <div
               aria-haspopup={true}
-              ariaRole="button"
               className="fd-shellbar-collapse--control"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -362,11 +356,10 @@ exports[`<Shellbar /> create shellbar 3`] = `
             >
               <span
                 aria-haspopup={true}
-                ariaRole="button"
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-has-background-color-accent-8"
                 onClick={[Function]}
                 onKeyPress={[Function]}
-                role=""
+                role="button"
                 tabIndex={0}
               >
                 JS
@@ -395,7 +388,6 @@ exports[`<Shellbar /> create shellbar 3`] = `
             >
               <button
                 aria-haspopup={true}
-                ariaRole="button"
                 className="fd-button sap-icon--grid fd-shellbar__button"
                 onClick={[Function]}
                 onKeyPress={[Function]}
@@ -442,7 +434,6 @@ exports[`<Shellbar /> create shellbar 4`] = `
           >
             <button
               aria-haspopup={true}
-              ariaRole="button"
               className="fd-product-menu__control"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -539,7 +530,6 @@ exports[`<Shellbar /> create shellbar 4`] = `
             <button
               aria-haspopup={true}
               aria-label="Settings"
-              ariaRole="button"
               className="fd-button sap-icon--settings fd-shellbar__button"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -570,7 +560,6 @@ exports[`<Shellbar /> create shellbar 4`] = `
         >
           <div
             aria-haspopup={true}
-            ariaRole="button"
             className="fd-shellbar__action fd-shellbar__action--desktop"
             onClick={[Function]}
             onKeyPress={[Function]}
@@ -601,7 +590,6 @@ exports[`<Shellbar /> create shellbar 4`] = `
           >
             <div
               aria-haspopup={true}
-              ariaRole="button"
               className="fd-shellbar-collapse--control"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -644,11 +632,10 @@ exports[`<Shellbar /> create shellbar 4`] = `
             >
               <span
                 aria-haspopup={true}
-                ariaRole="button"
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-has-background-color-accent-8"
                 onClick={[Function]}
                 onKeyPress={[Function]}
-                role=""
+                role="button"
                 tabIndex={0}
               >
                 JS
@@ -677,7 +664,6 @@ exports[`<Shellbar /> create shellbar 4`] = `
             >
               <button
                 aria-haspopup={true}
-                ariaRole="button"
                 className="fd-button sap-icon--grid fd-shellbar__button"
                 onClick={[Function]}
                 onKeyPress={[Function]}
@@ -724,7 +710,6 @@ exports[`<Shellbar /> create shellbar 5`] = `
           >
             <button
               aria-haspopup={true}
-              ariaRole="button"
               className="fd-product-menu__control"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -833,7 +818,6 @@ exports[`<Shellbar /> create shellbar 5`] = `
         >
           <div
             aria-haspopup={true}
-            ariaRole="button"
             className="fd-shellbar__action fd-shellbar__action--desktop"
             onClick={[Function]}
             onKeyPress={[Function]}
@@ -864,7 +848,6 @@ exports[`<Shellbar /> create shellbar 5`] = `
           >
             <div
               aria-haspopup={true}
-              ariaRole="button"
               className="fd-shellbar-collapse--control"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -907,11 +890,10 @@ exports[`<Shellbar /> create shellbar 5`] = `
             >
               <span
                 aria-haspopup={true}
-                ariaRole="button"
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-has-background-color-accent-8"
                 onClick={[Function]}
                 onKeyPress={[Function]}
-                role=""
+                role="button"
                 tabIndex={0}
               >
                 JS
@@ -940,7 +922,6 @@ exports[`<Shellbar /> create shellbar 5`] = `
             >
               <button
                 aria-haspopup={true}
-                ariaRole="button"
                 className="fd-button sap-icon--grid fd-shellbar__button"
                 onClick={[Function]}
                 onKeyPress={[Function]}
@@ -987,7 +968,6 @@ exports[`<Shellbar /> create shellbar 6`] = `
           >
             <button
               aria-haspopup={true}
-              ariaRole="button"
               className="fd-product-menu__control"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -1084,7 +1064,6 @@ exports[`<Shellbar /> create shellbar 6`] = `
             <button
               aria-haspopup={true}
               aria-label="Settings"
-              ariaRole="button"
               className="fd-button sap-icon--settings fd-shellbar__button"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -1134,7 +1113,6 @@ exports[`<Shellbar /> create shellbar 6`] = `
           >
             <div
               aria-haspopup={true}
-              ariaRole="button"
               className="fd-shellbar-collapse--control"
               onClick={[Function]}
               onKeyPress={[Function]}
@@ -1177,11 +1155,10 @@ exports[`<Shellbar /> create shellbar 6`] = `
             >
               <span
                 aria-haspopup={true}
-                ariaRole="button"
                 className="fd-identifier fd-identifier--xs fd-identifier--circle fd-identifier--thumbnail"
                 onClick={[Function]}
                 onKeyPress={[Function]}
-                role="presentation"
+                role="button"
                 style={
                   Object {
                     "backgroundImage": "url(//unpkg.com/fundamental-styles/dist/images/sap-logo.png)",
@@ -1213,7 +1190,6 @@ exports[`<Shellbar /> create shellbar 6`] = `
             >
               <button
                 aria-haspopup={true}
-                ariaRole="button"
                 className="fd-button sap-icon--grid fd-shellbar__button"
                 onClick={[Function]}
                 onKeyPress={[Function]}
diff --git a/src/Tile/__snapshots__/Tile.test.js.snap b/src/Tile/__snapshots__/Tile.test.js.snap
index 284fcf2d6..842a6e0c7 100644
--- a/src/Tile/__snapshots__/Tile.test.js.snap
+++ b/src/Tile/__snapshots__/Tile.test.js.snap
@@ -96,7 +96,6 @@ exports[`<Tile /> create tile component 4`] = `
         >
           <button
             aria-haspopup={true}
-            ariaRole="button"
             className="fd-button fd-button--standard sap-icon--vertical-grip"
             onClick={[Function]}
             onKeyPress={[Function]}
@@ -166,7 +165,6 @@ exports[`<Tile /> create tile component 6`] = `
         >
           <button
             aria-haspopup={true}
-            ariaRole="button"
             className="fd-button fd-button--standard sap-icon--vertical-grip"
             onClick={[Function]}
             onKeyPress={[Function]}
diff --git a/src/Tile/__snapshots__/TileActions.test.js.snap b/src/Tile/__snapshots__/TileActions.test.js.snap
index fad7de762..74bd2f200 100644
--- a/src/Tile/__snapshots__/TileActions.test.js.snap
+++ b/src/Tile/__snapshots__/TileActions.test.js.snap
@@ -17,7 +17,6 @@ exports[`<Tile.Actions /> create Tile.Actions component 1`] = `
       >
         <button
           aria-haspopup={true}
-          ariaRole="button"
           className="fd-button fd-button--standard sap-icon--vertical-grip"
           onClick={[Function]}
           onKeyPress={[Function]}