From ec38367b7073afe1107b00888305ebf02a695d6a Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Tue, 24 Oct 2017 17:37:51 -0700
Subject: [PATCH] [UI Framework] Improve KuiContextMenu keyboard navigation UX
 (#14434)

* Refactor focus state logic to use the React lifecycle correctly.
* Update KuiPopover snapshots.
* Remove unnecessary isVisible prop from KuiContextMenu.
* Allow user to both tab AND use the arrow keys for navigation.
* Reinstate ability to tab and shift-tab to the title of KuiContextMenuPanel.
* Release focus from Dashboard panel options KuiContextMenu by closing it when you select an option.
* Update KuiContextMenu example to demonstrate best practice of closing the menu when an item is clicked.
* Replace native transitionend event handler with onAnimationEnd React event handler.
---
 .../dashboard/panel/panel_options_menu.js     |  24 ++-
 .../apps/dashboard/_panel_controls.js         |   1 +
 ui_framework/dist/ui_framework.css            |   8 +-
 .../src/views/context_menu/context_menu.js    |  31 ++--
 .../src/views/context_menu/single_panel.js    |  24 +--
 .../doc_site/src/views/popover/popover.js     |   1 +
 .../views/popover/popover_anchor_position.js  |   2 +
 .../views/popover/popover_body_class_name.js  |   1 +
 .../views/popover/popover_panel_class_name.js |   1 +
 .../src/views/popover/popover_with_title.js   |   1 +
 .../__snapshots__/context_menu.test.js.snap   | 128 ++++++-------
 .../context_menu_panel.test.js.snap           |  29 ++-
 .../context_menu/_context_menu_panel.scss     |   7 +
 .../components/context_menu/context_menu.js   |  40 ++--
 .../context_menu/context_menu.test.js         |  28 +--
 .../context_menu/context_menu_panel.js        | 173 ++++++++++--------
 .../context_menu/context_menu_panel.test.js   | 153 +++++++++++++++-
 .../__snapshots__/popover.test.js.snap        |  27 +++
 .../src/components/popover/popover.js         |  22 ++-
 .../src/components/popover/popover.test.js    |  29 +++
 20 files changed, 486 insertions(+), 244 deletions(-)

diff --git a/src/core_plugins/kibana/public/dashboard/panel/panel_options_menu.js b/src/core_plugins/kibana/public/dashboard/panel/panel_options_menu.js
index 641f90bc36129..fed9fbcfd22eb 100644
--- a/src/core_plugins/kibana/public/dashboard/panel/panel_options_menu.js
+++ b/src/core_plugins/kibana/public/dashboard/panel/panel_options_menu.js
@@ -18,12 +18,30 @@ export class PanelOptionsMenu extends React.Component {
 
   closePopover = () => this.setState({ isPopoverOpen: false });
 
+  onEditPanel = () => {
+    this.closePopover();
+    this.props.onEditPanel();
+  };
+
+  onDeletePanel = () => {
+    this.closePopover();
+
+    if (this.props.onDeletePanel) {
+      this.props.onDeletePanel();
+    }
+  };
+
+  onToggleExpandPanel = () => {
+    this.closePopover();
+    this.props.onToggleExpandPanel();
+  };
+
   renderItems() {
     const items = [(
       <KuiContextMenuItem
         key="0"
         data-test-subj="dashboardPanelEditLink"
-        onClick={this.props.onEditPanel}
+        onClick={this.onEditPanel}
         icon={(
           <span
             aria-hidden="true"
@@ -37,7 +55,7 @@ export class PanelOptionsMenu extends React.Component {
       <KuiContextMenuItem
         key="1"
         data-test-subj="dashboardPanelExpandIcon"
-        onClick={this.props.onToggleExpandPanel}
+        onClick={this.onToggleExpandPanel}
         icon={(
           <span
             aria-hidden="true"
@@ -54,7 +72,7 @@ export class PanelOptionsMenu extends React.Component {
         <KuiContextMenuItem
           key="2"
           data-test-subj="dashboardPanelRemoveIcon"
-          onClick={this.props.onDeletePanel}
+          onClick={this.onDeletePanel}
           icon={(
             <span
               aria-hidden="true"
diff --git a/test/functional/apps/dashboard/_panel_controls.js b/test/functional/apps/dashboard/_panel_controls.js
index 5f850ba27bfea..548a953919ea9 100644
--- a/test/functional/apps/dashboard/_panel_controls.js
+++ b/test/functional/apps/dashboard/_panel_controls.js
@@ -104,6 +104,7 @@ export default function ({ getService, getPageObjects }) {
 
       describe('visualization object edit menu', () => {
         it('opens a visualization when edit link is clicked', async () => {
+          await testSubjects.click('dashboardPanelToggleMenuIcon');
           await PageObjects.dashboard.clickDashboardPanelEditLink();
           await PageObjects.header.waitUntilLoadingHasFinished();
           const currentUrl = await remote.getCurrentUrl();
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 02e8bfd518e1c..d1ea1ad99c4ef 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -884,7 +884,13 @@ main {
 .kuiContextMenuPanel {
   width: 100%;
   visibility: visible;
-  background-color: #ffffff; }
+  background-color: #ffffff;
+  /**
+   * 1. Override global focus style.
+   */ }
+  .kuiContextMenuPanel:focus {
+    box-shadow: none;
+    /* 1 */ }
   .kuiContextMenuPanel.kuiContextMenuPanel-txInLeft {
     pointer-events: none;
     -webkit-animation: kuiContextMenuPanelTxInLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
diff --git a/ui_framework/doc_site/src/views/context_menu/context_menu.js b/ui_framework/doc_site/src/views/context_menu/context_menu.js
index 9e98b8e4c2204..30a83002ac1fb 100644
--- a/ui_framework/doc_site/src/views/context_menu/context_menu.js
+++ b/ui_framework/doc_site/src/views/context_menu/context_menu.js
@@ -41,7 +41,7 @@ export default class extends Component {
         icon: (
           <span className="kuiIcon fa-search" />
         ),
-        onClick: () => window.alert('Show fullscreen'),
+        onClick: () => { this.closePopover(); window.alert('Show fullscreen'); },
       }, {
         name: 'Share this dasbhoard',
         icon: <span className="kuiIcon fa-user" />,
@@ -51,11 +51,11 @@ export default class extends Component {
           items: [{
             name: 'PDF reports',
             icon: <span className="kuiIcon fa-user" />,
-            onClick: () => window.alert('PDF reports'),
+            onClick: () => { this.closePopover(); window.alert('PDF reports'); },
           }, {
             name: 'CSV reports',
             icon: <span className="kuiIcon fa-user" />,
-            onClick: () => window.alert('CSV reports'),
+            onClick: () => { this.closePopover(); window.alert('CSV reports'); },
           }, {
             name: 'Embed code',
             icon: <span className="kuiIcon fa-user" />,
@@ -95,38 +95,38 @@ export default class extends Component {
           }, {
             name: 'Permalinks',
             icon: <span className="kuiIcon fa-user" />,
-            onClick: () => window.alert('Permalinks'),
+            onClick: () => { this.closePopover(); window.alert('Permalinks'); },
           }],
         },
       }, {
         name: 'Edit / add panels',
         icon: <span className="kuiIcon fa-user" />,
-        onClick: () => window.alert('Edit / add panels'),
+        onClick: () => { this.closePopover(); window.alert('Edit / add panels'); },
       }, {
         name: 'Display options',
         icon: <span className="kuiIcon fa-user" />,
-        onClick: () => window.alert('Display options'),
+        onClick: () => { this.closePopover(); window.alert('Display options'); },
       }],
     };
 
     this.panels = flattenPanelTree(panelTree);
   }
 
-  onButtonClick() {
-    this.setState({
-      isPopoverOpen: !this.state.isPopoverOpen,
-    });
-  }
+  onButtonClick = () => {
+    this.setState(prevState => ({
+      isPopoverOpen: !prevState.isPopoverOpen,
+    }));
+  };
 
-  closePopover() {
+  closePopover = () => {
     this.setState({
       isPopoverOpen: false,
     });
-  }
+  };
 
   render() {
     const button = (
-      <KuiButton buttonType="basic" onClick={this.onButtonClick.bind(this)}>
+      <KuiButton buttonType="basic" onClick={this.onButtonClick}>
         Click me to load a context menu
       </KuiButton>
     );
@@ -135,14 +135,13 @@ export default class extends Component {
       <KuiPopover
         button={button}
         isOpen={this.state.isPopoverOpen}
-        closePopover={this.closePopover.bind(this)}
+        closePopover={this.closePopover}
         panelPaddingSize="none"
         withTitle
         anchorPosition="left"
       >
         <KuiContextMenu
           initialPanelId={0}
-          isVisible={this.state.isPopoverOpen}
           panels={this.panels}
         />
       </KuiPopover>
diff --git a/ui_framework/doc_site/src/views/context_menu/single_panel.js b/ui_framework/doc_site/src/views/context_menu/single_panel.js
index 9a5beed67edea..7b098be1a568d 100644
--- a/ui_framework/doc_site/src/views/context_menu/single_panel.js
+++ b/ui_framework/doc_site/src/views/context_menu/single_panel.js
@@ -18,21 +18,21 @@ export default class extends Component {
     };
   }
 
-  onButtonClick() {
-    this.setState({
-      isPopoverOpen: !this.state.isPopoverOpen,
-    });
-  }
+  onButtonClick = () => {
+    this.setState(prevState => ({
+      isPopoverOpen: !prevState.isPopoverOpen,
+    }));
+  };
 
-  closePopover() {
+  closePopover = () => {
     this.setState({
       isPopoverOpen: false,
     });
-  }
+  };
 
   render() {
     const button = (
-      <KuiButton buttonType="basic" onClick={this.onButtonClick.bind(this)}>
+      <KuiButton buttonType="basic" onClick={this.onButtonClick}>
         Click me to load a context menu
       </KuiButton>
     );
@@ -41,7 +41,7 @@ export default class extends Component {
       <KuiContextMenuItem
         key="A"
         icon={<span className="kuiIcon fa-user" />}
-        onClick={() => { window.alert('A'); }}
+        onClick={() => { this.closePopover(); window.alert('A'); }}
       >
         Option A
       </KuiContextMenuItem>
@@ -49,7 +49,7 @@ export default class extends Component {
       <KuiContextMenuItem
         key="B"
         icon={<span className="kuiIcon fa-user" />}
-        onClick={() => { window.alert('B'); }}
+        onClick={() => { this.closePopover(); window.alert('B'); }}
       >
         Option B
       </KuiContextMenuItem>
@@ -57,7 +57,7 @@ export default class extends Component {
       <KuiContextMenuItem
         key="C"
         icon={<span className="kuiIcon fa-user" />}
-        onClick={() => { window.alert('C'); }}
+        onClick={() => { this.closePopover(); window.alert('C'); }}
       >
         Option C
       </KuiContextMenuItem>
@@ -67,7 +67,7 @@ export default class extends Component {
       <KuiPopover
         button={button}
         isOpen={this.state.isPopoverOpen}
-        closePopover={this.closePopover.bind(this)}
+        closePopover={this.closePopover}
         panelPaddingSize="none"
         withTitle
         anchorPosition="left"
diff --git a/ui_framework/doc_site/src/views/popover/popover.js b/ui_framework/doc_site/src/views/popover/popover.js
index 27112d5b21592..e3bd4cd51b52a 100644
--- a/ui_framework/doc_site/src/views/popover/popover.js
+++ b/ui_framework/doc_site/src/views/popover/popover.js
@@ -37,6 +37,7 @@ export default class extends Component {
 
     return (
       <KuiPopover
+        isFocusable
         button={button}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover.bind(this)}
diff --git a/ui_framework/doc_site/src/views/popover/popover_anchor_position.js b/ui_framework/doc_site/src/views/popover/popover_anchor_position.js
index f78d8960ea178..40889690e6654 100644
--- a/ui_framework/doc_site/src/views/popover/popover_anchor_position.js
+++ b/ui_framework/doc_site/src/views/popover/popover_anchor_position.js
@@ -45,6 +45,7 @@ export default class extends Component {
     return (
       <div>
         <KuiPopover
+          isFocusable
           button={(
             <KuiButton buttonType="basic" onClick={this.onButtonClick1.bind(this)}>
               Popover anchored to the right.
@@ -60,6 +61,7 @@ export default class extends Component {
         &nbsp;
 
         <KuiPopover
+          isFocusable
           button={(
             <KuiButton buttonType="basic" onClick={this.onButtonClick2.bind(this)}>
               Popover anchored to the left.
diff --git a/ui_framework/doc_site/src/views/popover/popover_body_class_name.js b/ui_framework/doc_site/src/views/popover/popover_body_class_name.js
index bdcf9d31767e0..17daacbf8686e 100644
--- a/ui_framework/doc_site/src/views/popover/popover_body_class_name.js
+++ b/ui_framework/doc_site/src/views/popover/popover_body_class_name.js
@@ -31,6 +31,7 @@ export default class extends Component {
   render() {
     return (
       <KuiPopover
+        isFocusable
         button={(
           <KuiButton buttonType="basic" onClick={this.onButtonClick.bind(this)}>
             Custom class
diff --git a/ui_framework/doc_site/src/views/popover/popover_panel_class_name.js b/ui_framework/doc_site/src/views/popover/popover_panel_class_name.js
index 0a2c19f9c20fb..36f6d0560e910 100644
--- a/ui_framework/doc_site/src/views/popover/popover_panel_class_name.js
+++ b/ui_framework/doc_site/src/views/popover/popover_panel_class_name.js
@@ -31,6 +31,7 @@ export default class extends Component {
   render() {
     return (
       <KuiPopover
+        isFocusable
         button={(
           <KuiButton buttonType="basic" onClick={this.onButtonClick.bind(this)}>
             Turn padding off and apply a custom class
diff --git a/ui_framework/doc_site/src/views/popover/popover_with_title.js b/ui_framework/doc_site/src/views/popover/popover_with_title.js
index 9674954770332..d753bb377f425 100644
--- a/ui_framework/doc_site/src/views/popover/popover_with_title.js
+++ b/ui_framework/doc_site/src/views/popover/popover_with_title.js
@@ -41,6 +41,7 @@ export default class extends Component {
 
     return (
       <KuiPopover
+        isFocusable
         button={button}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover.bind(this)}
diff --git a/ui_framework/src/components/context_menu/__snapshots__/context_menu.test.js.snap b/ui_framework/src/components/context_menu/__snapshots__/context_menu.test.js.snap
index a02339d4297cd..bc68b07442635 100644
--- a/ui_framework/src/components/context_menu/__snapshots__/context_menu.test.js.snap
+++ b/ui_framework/src/components/context_menu/__snapshots__/context_menu.test.js.snap
@@ -8,44 +8,14 @@ exports[`KuiContextMenu is rendered 1`] = `
 />
 `;
 
-exports[`KuiContextMenu props idToPanelMap and initialPanelId renders the referenced panel 1`] = `
-<div
-  class="kuiContextMenu"
->
-  <div
-    class="kuiContextMenuPanel kuiContextMenu__panel"
-  >
-    <button
-      class="kuiContextMenuPanelTitle"
-      data-test-subj="contextMenuPanelTitleButton"
-    >
-      <span
-        class="kuiContextMenu__itemLayout"
-      >
-        <span
-          class="kuiContextMenu__icon kuiIcon fa-angle-left"
-        />
-        <span
-          class="kuiContextMenu__text"
-        >
-          2
-        </span>
-      </span>
-    </button>
-    <div>
-      2
-    </div>
-  </div>
-</div>
-`;
-
-exports[`KuiContextMenu props idToPreviousPanelIdMap allows you to click the title button to go back to the previous panel 1`] = `
+exports[`KuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 1`] = `
 <div
   class="kuiContextMenu"
   style="height: 0px;"
 >
   <div
     class="kuiContextMenuPanel kuiContextMenu__panel"
+    tabindex="0"
   >
     <button
       class="kuiContextMenuPanelTitle"
@@ -65,19 +35,22 @@ exports[`KuiContextMenu props idToPreviousPanelIdMap allows you to click the tit
       </span>
     </button>
     <div>
-      2
+      <div>
+        2
+      </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`KuiContextMenu props idToPreviousPanelIdMap allows you to click the title button to go back to the previous panel 2`] = `
+exports[`KuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 2`] = `
 <div
   class="kuiContextMenu"
   style="height: 0px;"
 >
   <div
     class="kuiContextMenuPanel kuiContextMenu__panel kuiContextMenuPanel-txOutRight"
+    tabindex="0"
   >
     <button
       class="kuiContextMenuPanelTitle"
@@ -97,11 +70,14 @@ exports[`KuiContextMenu props idToPreviousPanelIdMap allows you to click the tit
       </span>
     </button>
     <div>
-      2
+      <div>
+        2
+      </div>
     </div>
   </div>
   <div
     class="kuiContextMenuPanel kuiContextMenu__panel kuiContextMenuPanel-txInRight"
+    tabindex="0"
   >
     <button
       class="kuiContextMenuPanelTitle"
@@ -120,65 +96,67 @@ exports[`KuiContextMenu props idToPreviousPanelIdMap allows you to click the tit
         </span>
       </span>
     </button>
-    <button
-      class="kuiContextMenuItem"
-    >
-      <span
-        class="kuiContextMenu__itemLayout"
+    <div>
+      <button
+        class="kuiContextMenuItem"
       >
         <span
-          class="kuiContextMenuItem__text"
+          class="kuiContextMenu__itemLayout"
         >
-          2a
+          <span
+            class="kuiContextMenuItem__text"
+          >
+            2a
+          </span>
+          <span
+            class="kuiContextMenu__arrow kuiIcon fa-angle-right"
+          />
         </span>
-        <span
-          class="kuiContextMenu__arrow kuiIcon fa-angle-right"
-        />
-      </span>
-    </button>
-    <button
-      class="kuiContextMenuItem"
-    >
-      <span
-        class="kuiContextMenu__itemLayout"
+      </button>
+      <button
+        class="kuiContextMenuItem"
       >
         <span
-          class="kuiContextMenuItem__text"
+          class="kuiContextMenu__itemLayout"
         >
-          2b
+          <span
+            class="kuiContextMenuItem__text"
+          >
+            2b
+          </span>
+          <span
+            class="kuiContextMenu__arrow kuiIcon fa-angle-right"
+          />
         </span>
-        <span
-          class="kuiContextMenu__arrow kuiIcon fa-angle-right"
-        />
-      </span>
-    </button>
-    <button
-      class="kuiContextMenuItem"
-    >
-      <span
-        class="kuiContextMenu__itemLayout"
+      </button>
+      <button
+        class="kuiContextMenuItem"
       >
         <span
-          class="kuiContextMenuItem__text"
+          class="kuiContextMenu__itemLayout"
         >
-          2c
+          <span
+            class="kuiContextMenuItem__text"
+          >
+            2c
+          </span>
+          <span
+            class="kuiContextMenu__arrow kuiIcon fa-angle-right"
+          />
         </span>
-        <span
-          class="kuiContextMenu__arrow kuiIcon fa-angle-right"
-        />
-      </span>
-    </button>
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`KuiContextMenu props isVisible causes the first panel to be shown when it becomes true 1`] = `
+exports[`KuiContextMenu props panels and initialPanelId renders the referenced panel 1`] = `
 <div
   class="kuiContextMenu"
-  style="height: 0px;"
 >
   <div
     class="kuiContextMenuPanel kuiContextMenu__panel"
+    tabindex="0"
   >
     <button
       class="kuiContextMenuPanelTitle"
@@ -198,7 +176,9 @@ exports[`KuiContextMenu props isVisible causes the first panel to be shown when
       </span>
     </button>
     <div>
-      2
+      <div>
+        2
+      </div>
     </div>
   </div>
 </div>
diff --git a/ui_framework/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap b/ui_framework/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
index 87386cdc8d3b6..2ee0bba1e0f6c 100644
--- a/ui_framework/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
+++ b/ui_framework/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
@@ -5,14 +5,18 @@ exports[`KuiContextMenuPanel is rendered 1`] = `
   aria-label="aria-label"
   class="kuiContextMenuPanel testClass1 testClass2"
   data-test-subj="test subject string"
+  tabindex="0"
 >
-  Hello
+  <div>
+    Hello
+  </div>
 </div>
 `;
 
 exports[`KuiContextMenuPanel props onClose renders a button as a title 1`] = `
 <div
   class="kuiContextMenuPanel"
+  tabindex="0"
 >
   <button
     class="kuiContextMenuPanelTitle"
@@ -31,12 +35,14 @@ exports[`KuiContextMenuPanel props onClose renders a button as a title 1`] = `
       </span>
     </span>
   </button>
+  <div />
 </div>
 `;
 
 exports[`KuiContextMenuPanel props title is rendered 1`] = `
 <div
   class="kuiContextMenuPanel"
+  tabindex="0"
 >
   <div
     class="kuiPopoverTitle"
@@ -47,29 +53,42 @@ exports[`KuiContextMenuPanel props title is rendered 1`] = `
       Title
     </span>
   </div>
+  <div />
 </div>
 `;
 
 exports[`KuiContextMenuPanel props transitionDirection next with transitionType in is rendered 1`] = `
 <div
   class="kuiContextMenuPanel kuiContextMenuPanel-txInLeft"
-/>
+  tabindex="0"
+>
+  <div />
+</div>
 `;
 
 exports[`KuiContextMenuPanel props transitionDirection next with transitionType out is rendered 1`] = `
 <div
   class="kuiContextMenuPanel kuiContextMenuPanel-txOutLeft"
-/>
+  tabindex="0"
+>
+  <div />
+</div>
 `;
 
 exports[`KuiContextMenuPanel props transitionDirection previous with transitionType in is rendered 1`] = `
 <div
   class="kuiContextMenuPanel kuiContextMenuPanel-txInRight"
-/>
+  tabindex="0"
+>
+  <div />
+</div>
 `;
 
 exports[`KuiContextMenuPanel props transitionDirection previous with transitionType out is rendered 1`] = `
 <div
   class="kuiContextMenuPanel kuiContextMenuPanel-txOutRight"
-/>
+  tabindex="0"
+>
+  <div />
+</div>
 `;
diff --git a/ui_framework/src/components/context_menu/_context_menu_panel.scss b/ui_framework/src/components/context_menu/_context_menu_panel.scss
index 450f20b20bccc..54fcf4c2e828c 100644
--- a/ui_framework/src/components/context_menu/_context_menu_panel.scss
+++ b/ui_framework/src/components/context_menu/_context_menu_panel.scss
@@ -5,6 +5,13 @@
   visibility: visible;
   background-color: #ffffff;
 
+  /**
+   * 1. Override global focus style.
+   */
+  &:focus {
+    box-shadow: none; /* 1 */
+  }
+
   &.kuiContextMenuPanel-txInLeft {
     pointer-events: none;
     animation: kuiContextMenuPanelTxInLeft $kuiAnimSpeedNormal $kuiAnimSlightResistance;
diff --git a/ui_framework/src/components/context_menu/context_menu.js b/ui_framework/src/components/context_menu/context_menu.js
index 2bcb4086b87b3..236b8dee32308 100644
--- a/ui_framework/src/components/context_menu/context_menu.js
+++ b/ui_framework/src/components/context_menu/context_menu.js
@@ -57,12 +57,10 @@ export class KuiContextMenu extends Component {
     className: PropTypes.string,
     panels: PropTypes.array,
     initialPanelId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    isVisible: PropTypes.bool.isRequired,
   }
 
   static defaultProps = {
     panels: [],
-    isVisible: true,
   }
 
   constructor(props) {
@@ -79,6 +77,7 @@ export class KuiContextMenu extends Component {
       transitionDirection: undefined,
       isOutgoingPanelVisible: false,
       focusedItemIndex: undefined,
+      isUsingKeyboardToNavigate: false,
     };
   }
 
@@ -99,6 +98,12 @@ export class KuiContextMenu extends Component {
   showNextPanel = itemIndex => {
     const nextPanelId = this.idAndItemIndexToPanelIdMap[this.state.incomingPanelId][itemIndex];
     if (nextPanelId) {
+      if (this.state.isUsingKeyboardToNavigate) {
+        this.setState({
+          focusedItemIndex: 0,
+        });
+      }
+
       this.showPanel(nextPanelId, 'next');
     }
   };
@@ -128,13 +133,21 @@ export class KuiContextMenu extends Component {
     this.setState({
       height,
     });
-  }
+  };
 
   onOutGoingPanelTransitionComplete = () => {
     this.setState({
       isOutgoingPanelVisible: false,
     });
-  }
+  };
+
+  onUseKeyboardToNavigate = () => {
+    if (!this.state.isUsingKeyboardToNavigate) {
+      this.setState({
+        isUsingKeyboardToNavigate: true,
+      });
+    }
+  };
 
   updatePanelMaps(panels) {
     this.idToPanelMap = mapIdsToPanels(panels);
@@ -147,16 +160,6 @@ export class KuiContextMenu extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    // If the user is opening the context menu, reset the state.
-    if (nextProps.isVisible && !this.props.isVisible) {
-      this.setState({
-        outgoingPanelId: undefined,
-        incomingPanelId: nextProps.initialPanelId,
-        transitionDirection: undefined,
-        focusedItemIndex: undefined,
-      });
-    }
-
     if (nextProps.panels !== this.props.panels) {
       this.updatePanelMaps(nextProps.panels);
     }
@@ -222,12 +225,8 @@ export class KuiContextMenu extends Component {
         transitionDirection={this.state.isOutgoingPanelVisible ? this.state.transitionDirection : undefined}
         hasFocus={transitionType === 'in'}
         items={this.renderItems(panel.items)}
-        focusedItemIndex={
-          // Set focus on the item which shows the panel we're leaving.
-          transitionType === 'in' && this.state.transitionDirection === 'previous'
-          ? this.state.focusedItemIndex
-          : undefined
-        }
+        initialFocusedItemIndex={this.state.isUsingKeyboardToNavigate ? this.state.focusedItemIndex : undefined}
+        onUseKeyboardToNavigate={this.onUseKeyboardToNavigate}
         showNextPanel={this.showNextPanel}
         showPreviousPanel={this.showPreviousPanel}
       >
@@ -241,7 +240,6 @@ export class KuiContextMenu extends Component {
       panels, // eslint-disable-line no-unused-vars
       className,
       initialPanelId, // eslint-disable-line no-unused-vars
-      isVisible, // eslint-disable-line no-unused-vars
       ...rest,
     } = this.props;
 
diff --git a/ui_framework/src/components/context_menu/context_menu.test.js b/ui_framework/src/components/context_menu/context_menu.test.js
index a71f869c4f12d..9d084e62ada88 100644
--- a/ui_framework/src/components/context_menu/context_menu.test.js
+++ b/ui_framework/src/components/context_menu/context_menu.test.js
@@ -54,28 +54,24 @@ describe('KuiContextMenu', () => {
   });
 
   describe('props', () => {
-    describe('idToPanelMap and initialPanelId', () => {
+    describe('panels and initialPanelId', () => {
       it('renders the referenced panel', () => {
         const component = render(
           <KuiContextMenu
             panels={panels}
             initialPanelId={2}
-            isVisible
           />
         );
 
         expect(component)
           .toMatchSnapshot();
       });
-    });
 
-    describe('idToPreviousPanelIdMap', () => {
       it('allows you to click the title button to go back to the previous panel', () => {
         const component = mount(
           <KuiContextMenu
             panels={panels}
             initialPanelId={2}
-            isVisible
           />
         );
 
@@ -89,27 +85,5 @@ describe('KuiContextMenu', () => {
           .toMatchSnapshot();
       });
     });
-
-    describe('isVisible', () => {
-      it('causes the first panel to be shown when it becomes true', () => {
-        const component = mount(
-          <KuiContextMenu
-            panels={panels}
-            initialPanelId={2}
-            isVisible
-          />
-        );
-
-        // Navigate to a different panel.
-        component.find('[data-test-subj="contextMenuPanelTitleButton"]').simulate('click');
-
-        // Hide and then show the menu to reset the panel to the initial one.
-        component.setProps({ isVisible: false });
-        component.setProps({ isVisible: true });
-
-        expect(takeMountedSnapshot(component))
-          .toMatchSnapshot();
-      });
-    });
   });
 });
diff --git a/ui_framework/src/components/context_menu/context_menu_panel.js b/ui_framework/src/components/context_menu/context_menu_panel.js
index 2a8412cf54225..21ec09e227134 100644
--- a/ui_framework/src/components/context_menu/context_menu_panel.js
+++ b/ui_framework/src/components/context_menu/context_menu_panel.js
@@ -30,11 +30,12 @@ export class KuiContextMenuPanel extends Component {
     transitionType: PropTypes.oneOf(['in', 'out']),
     transitionDirection: PropTypes.oneOf(['next', 'previous']),
     onTransitionComplete: PropTypes.func,
+    onUseKeyboardToNavigate: PropTypes.func,
     hasFocus: PropTypes.bool,
     items: PropTypes.array,
     showNextPanel: PropTypes.func,
     showPreviousPanel: PropTypes.func,
-    focusedItemIndex: PropTypes.number,
+    initialFocusedItemIndex: PropTypes.number,
   }
 
   static defaultProps = {
@@ -47,11 +48,33 @@ export class KuiContextMenuPanel extends Component {
 
     this.menuItems = [];
     this.state = {
-      pressedArrowDirection: undefined,
       isTransitioning: Boolean(props.transitionType),
+      focusedItemIndex: props.initialFocusedItemIndex,
     };
   }
 
+  incrementFocusedItemIndex = amount => {
+    let nextFocusedItemIndex;
+
+    if (this.state.focusedItemIndex === undefined) {
+      // If this is the beginning of the user's keyboard navigation of the menu, then we'll focus
+      // either the first or last item.
+      nextFocusedItemIndex = amount < 0 ? this.menuItems.length - 1 : 0;
+    } else {
+      nextFocusedItemIndex = this.state.focusedItemIndex + amount;
+
+      if (nextFocusedItemIndex < 0) {
+        nextFocusedItemIndex = this.menuItems.length - 1;
+      } else if (nextFocusedItemIndex === this.menuItems.length) {
+        nextFocusedItemIndex = 0;
+      }
+    }
+
+    this.setState({
+      focusedItemIndex: nextFocusedItemIndex,
+    });
+  };
+
   onKeyDown = e => {
     // If this panel contains items you can use the left arrow key to go back at any time.
     // But if it doesn't contain items, then you have to focus on the back button specifically,
@@ -61,6 +84,10 @@ export class KuiContextMenuPanel extends Component {
       if (e.keyCode === cascadingMenuKeyCodes.LEFT) {
         if (this.props.showPreviousPanel) {
           this.props.showPreviousPanel();
+
+          if (this.props.onUseKeyboardToNavigate) {
+            this.props.onUseKeyboardToNavigate();
+          }
         }
       }
     }
@@ -68,23 +95,43 @@ export class KuiContextMenuPanel extends Component {
     if (this.props.items.length) {
       switch (e.keyCode) {
         case cascadingMenuKeyCodes.TAB:
-          // Normal tabbing doesn't work within panels with items.
-          e.preventDefault();
+          // We need to sync up with the user if s/he is tabbing through the items.
+          const focusedItemIndex = this.menuItems.indexOf(document.activeElement);
+
+          this.setState({
+            focusedItemIndex:
+              (focusedItemIndex >= 0 && focusedItemIndex < this.menuItems.length)
+              ? focusedItemIndex
+              : undefined,
+          });
           break;
 
         case cascadingMenuKeyCodes.UP:
           e.preventDefault();
-          this.setState({ pressedArrowDirection: 'up' });
+          this.incrementFocusedItemIndex(-1);
+
+          if (this.props.onUseKeyboardToNavigate) {
+            this.props.onUseKeyboardToNavigate();
+          }
           break;
 
         case cascadingMenuKeyCodes.DOWN:
           e.preventDefault();
-          this.setState({ pressedArrowDirection: 'down' });
+          this.incrementFocusedItemIndex(1);
+
+          if (this.props.onUseKeyboardToNavigate) {
+            this.props.onUseKeyboardToNavigate();
+          }
           break;
 
         case cascadingMenuKeyCodes.RIGHT:
           if (this.props.showNextPanel) {
-            this.props.showNextPanel(this.getFocusedMenuItemIndex());
+            e.preventDefault();
+            this.props.showNextPanel(this.state.focusedItemIndex);
+
+            if (this.props.onUseKeyboardToNavigate) {
+              this.props.onUseKeyboardToNavigate();
+            }
           }
           break;
 
@@ -94,19 +141,10 @@ export class KuiContextMenuPanel extends Component {
     }
   };
 
-  isMenuItemFocused() {
-    const indexOfActiveElement = this.menuItems.indexOf(document.activeElement);
-    return indexOfActiveElement !== -1;
-  }
-
-  getFocusedMenuItemIndex() {
-    return this.menuItems.indexOf(document.activeElement);
-  }
-
-  updateFocusedMenuItem() {
-    // If this panel isn't active, don't focus any items.
+  updateFocus() {
+    // If this panel has lost focus, then none of its content should be focused.
     if (!this.props.hasFocus) {
-      if (this.isMenuItemFocused()) {
+      if (this.panel.contains(document.activeElement)) {
         document.activeElement.blur();
       }
       return;
@@ -118,53 +156,31 @@ export class KuiContextMenuPanel extends Component {
       return;
     }
 
-    // If we're active, but nothing is focused then we should focus the first item.
-    if (!this.isMenuItemFocused()) {
-      if (this.props.focusedItemIndex !== undefined) {
-        this.menuItems[this.props.focusedItemIndex].focus();
-        return;
-      }
-
-      if (this.menuItems.length !== 0) {
-        this.menuItems[0].focus();
-        return;
-      }
-
-      // Focus first tabbable item.
-      const tabbableItems = tabbable(this.panel);
-      if (tabbableItems.length) {
-        tabbableItems[0].focus();
+    // If there aren't any items then this is probably a form or something.
+    // So let's focus the first tabbable item and expedite input from the user.
+    if (!this.menuItems.length) {
+      if (this.content) {
+        const tabbableItems = tabbable(this.content);
+        if (tabbableItems.length) {
+          tabbableItems[0].focus();
+        }
       }
       return;
     }
 
-    // Update focused state based on arrow key navigation.
-    if (this.state.pressedArrowDirection) {
-      const indexOfActiveElement = this.getFocusedMenuItemIndex();
-      let nextFocusedMenuItemIndex;
-
-      switch (this.state.pressedArrowDirection) {
-        case 'up':
-          nextFocusedMenuItemIndex =
-            (indexOfActiveElement - 1) !== -1
-            ? indexOfActiveElement - 1
-            : this.menuItems.length - 1;
-          break;
-
-        case 'down':
-          nextFocusedMenuItemIndex =
-            (indexOfActiveElement + 1) !== this.menuItems.length
-            ? indexOfActiveElement + 1
-            : 0;
-          break;
-
-        default:
-          break;
-      }
+    // If an item is focused, focus it.
+    if (this.state.focusedItemIndex !== undefined) {
+      this.menuItems[this.state.focusedItemIndex].focus();
+      return;
+    }
 
-      this.menuItems[nextFocusedMenuItemIndex].focus();
-      this.setState({ pressedArrowDirection: undefined });
+    // If we've already focused on something inside the panel, everything's fine.
+    if (this.panel.contains(document.activeElement)) {
+      return;
     }
+
+    // Focus on the panel as a last resort.
+    this.panel.focus();
   }
 
   onTransitionComplete = () => {
@@ -177,6 +193,10 @@ export class KuiContextMenuPanel extends Component {
     }
   }
 
+  componentDidMount() {
+    this.updateFocus();
+  }
+
   componentWillReceiveProps(nextProps) {
     // Clear refs to menuItems if we're getting new ones.
     if (nextProps.items !== this.props.items) {
@@ -190,16 +210,8 @@ export class KuiContextMenuPanel extends Component {
     }
   }
 
-  componentDidMount() {
-    this.updateFocusedMenuItem();
-  }
-
   componentDidUpdate() {
-    this.updateFocusedMenuItem();
-  }
-
-  componentWillUnmount() {
-    this.panel.removeEventListener('animationend', this.onTransitionComplete);
+    this.updateFocus();
   }
 
   menuItemRef = (index, node) => {
@@ -212,15 +224,18 @@ export class KuiContextMenuPanel extends Component {
   };
 
   panelRef = node => {
-    if (node) {
-      this.panel = node;
-      this.panel.addEventListener('animationend', this.onTransitionComplete);
+    this.panel = node;
 
+    if (this.panel) {
       if (this.props.onHeightChange) {
-        this.props.onHeightChange(node.clientHeight);
+        this.props.onHeightChange(this.panel.clientHeight);
       }
     }
-  }
+  };
+
+  contentRef = node => {
+    this.content = node;
+  };
 
   render() {
     const {
@@ -232,9 +247,10 @@ export class KuiContextMenuPanel extends Component {
       transitionType,
       transitionDirection,
       onTransitionComplete, // eslint-disable-line no-unused-vars
+      onUseKeyboardToNavigate, // eslint-disable-line no-unused-vars
       hasFocus, // eslint-disable-line no-unused-vars
       items,
-      focusedItemIndex, // eslint-disable-line no-unused-vars
+      initialFocusedItemIndex, // eslint-disable-line no-unused-vars
       showNextPanel, // eslint-disable-line no-unused-vars
       showPreviousPanel, // eslint-disable-line no-unused-vars
       ...rest,
@@ -286,10 +302,15 @@ export class KuiContextMenuPanel extends Component {
         ref={this.panelRef}
         className={classes}
         onKeyDown={this.onKeyDown}
+        tabIndex="0"
+        onAnimationEnd={this.onTransitionComplete}
         {...rest}
       >
         {panelTitle}
-        {content}
+
+        <div ref={this.contentRef}>
+          {content}
+        </div>
       </div>
     );
   }
diff --git a/ui_framework/src/components/context_menu/context_menu_panel.test.js b/ui_framework/src/components/context_menu/context_menu_panel.test.js
index c6749b23d37e2..4d0edb06ec83e 100644
--- a/ui_framework/src/components/context_menu/context_menu_panel.test.js
+++ b/ui_framework/src/components/context_menu/context_menu_panel.test.js
@@ -159,12 +159,12 @@ describe('KuiContextMenuPanel', () => {
       });
     });
 
-    describe('focusedItemIndex', () => {
+    describe('initialFocusedItemIndex', () => {
       it('sets focus on the item occupying that index', () => {
         const component = mount(
           <KuiContextMenuPanel
             items={items}
-            focusedItemIndex={1}
+            initialFocusedItemIndex={1}
           />
         );
 
@@ -173,11 +173,103 @@ describe('KuiContextMenuPanel', () => {
         ).toBe(true);
       });
     });
+
+    describe('onUseKeyboardToNavigate', () => {
+      it('is called when up arrow is pressed', () => {
+        const onUseKeyboardToNavigateHandler = sinon.stub();
+
+        const component = mount(
+          <KuiContextMenuPanel
+            items={items}
+            onUseKeyboardToNavigate={onUseKeyboardToNavigateHandler}
+          />
+        );
+
+        component.simulate('keydown', { keyCode: keyCodes.UP });
+        sinon.assert.calledOnce(onUseKeyboardToNavigateHandler);
+      });
+
+      it('is called when down arrow is pressed', () => {
+        const onUseKeyboardToNavigateHandler = sinon.stub();
+
+        const component = mount(
+          <KuiContextMenuPanel
+            items={items}
+            onUseKeyboardToNavigate={onUseKeyboardToNavigateHandler}
+          />
+        );
+
+        component.simulate('keydown', { keyCode: keyCodes.UP });
+        sinon.assert.calledOnce(onUseKeyboardToNavigateHandler);
+      });
+
+      describe('left arrow', () => {
+        it('calls handler if showPreviousPanel exists', () => {
+          const onUseKeyboardToNavigateHandler = sinon.stub();
+
+          const component = mount(
+            <KuiContextMenuPanel
+              items={items}
+              showPreviousPanel={() => {}}
+              onUseKeyboardToNavigate={onUseKeyboardToNavigateHandler}
+            />
+          );
+
+          component.simulate('keydown', { keyCode: keyCodes.LEFT });
+          sinon.assert.calledOnce(onUseKeyboardToNavigateHandler);
+        });
+
+        it(`doesn't call handler if showPreviousPanel doesn't exist`, () => {
+          const onUseKeyboardToNavigateHandler = sinon.stub();
+
+          const component = mount(
+            <KuiContextMenuPanel
+              items={items}
+              onUseKeyboardToNavigate={onUseKeyboardToNavigateHandler}
+            />
+          );
+
+          component.simulate('keydown', { keyCode: keyCodes.LEFT });
+          sinon.assert.notCalled(onUseKeyboardToNavigateHandler);
+        });
+      });
+
+      describe('right arrow', () => {
+        it('calls handler if showNextPanel exists', () => {
+          const onUseKeyboardToNavigateHandler = sinon.stub();
+
+          const component = mount(
+            <KuiContextMenuPanel
+              items={items}
+              showNextPanel={() => {}}
+              onUseKeyboardToNavigate={onUseKeyboardToNavigateHandler}
+            />
+          );
+
+          component.simulate('keydown', { keyCode: keyCodes.RIGHT });
+          sinon.assert.calledOnce(onUseKeyboardToNavigateHandler);
+        });
+
+        it(`doesn't call handler if showNextPanel doesn't exist`, () => {
+          const onUseKeyboardToNavigateHandler = sinon.stub();
+
+          const component = mount(
+            <KuiContextMenuPanel
+              items={items}
+              onUseKeyboardToNavigate={onUseKeyboardToNavigateHandler}
+            />
+          );
+
+          component.simulate('keydown', { keyCode: keyCodes.RIGHT });
+          sinon.assert.notCalled(onUseKeyboardToNavigateHandler);
+        });
+      });
+    });
   });
 
   describe('behavior', () => {
     describe('focus', () => {
-      it('is set on the first focusable element by default, if there are no items', () => {
+      it('is set on the first focusable element by default if there are no items and hasFocus is true', () => {
         const component = mount(
           <KuiContextMenuPanel>
             <button data-test-subj="button" />
@@ -188,6 +280,18 @@ describe('KuiContextMenuPanel', () => {
           component.find('[data-test-subj="button"]').matchesElement(document.activeElement)
         ).toBe(true);
       });
+
+      it('is not set on anything if hasFocus is false', () => {
+        const component = mount(
+          <KuiContextMenuPanel hasFocus={false}>
+            <button data-test-subj="button" />
+          </KuiContextMenuPanel>
+        );
+
+        expect(
+          component.find('[data-test-subj="button"]').matchesElement(document.activeElement)
+        ).toBe(true);
+      });
     });
 
     describe('keyboard navigation of items', () => {
@@ -208,13 +312,20 @@ describe('KuiContextMenuPanel', () => {
         );
       });
 
-      it('focuses the first menu item by default, if there are items', () => {
+      it(`doesn't focus an item by default`, () => {
+        expect(component.find('[data-test-subj]').contains(document.activeElement)).toBe(false);
+      });
+
+      it('down arrow key focuses the first menu item', () => {
+        component.simulate('keydown', { keyCode: keyCodes.DOWN });
+
         expect(
           component.find('[data-test-subj="itemA"]').matchesElement(document.activeElement)
         ).toBe(true);
       });
 
-      it('down arrow key focuses the next menu item', () => {
+      it('subsequently, down arrow key focuses the next menu item', () => {
+        component.simulate('keydown', { keyCode: keyCodes.DOWN });
         component.simulate('keydown', { keyCode: keyCodes.DOWN });
 
         expect(
@@ -222,7 +333,16 @@ describe('KuiContextMenuPanel', () => {
         ).toBe(true);
       });
 
-      it('up arrow key focuses the previous menu item', () => {
+      it('down arrow key wraps to first menu item', () => {
+        component.simulate('keydown', { keyCode: keyCodes.UP });
+        component.simulate('keydown', { keyCode: keyCodes.DOWN });
+
+        expect(
+          component.find('[data-test-subj="itemA"]').matchesElement(document.activeElement)
+        ).toBe(true);
+      });
+
+      it('up arrow key focuses the last menu item', () => {
         component.simulate('keydown', { keyCode: keyCodes.UP });
 
         expect(
@@ -230,7 +350,26 @@ describe('KuiContextMenuPanel', () => {
         ).toBe(true);
       });
 
-      it('right arrow key shows next panel', () => {
+      it('subsequently, up arrow key focuses the previous menu item', () => {
+        component.simulate('keydown', { keyCode: keyCodes.UP });
+        component.simulate('keydown', { keyCode: keyCodes.UP });
+
+        expect(
+          component.find('[data-test-subj="itemB"]').matchesElement(document.activeElement)
+        ).toBe(true);
+      });
+
+      it('up arrow key wraps to last menu item', () => {
+        component.simulate('keydown', { keyCode: keyCodes.DOWN });
+        component.simulate('keydown', { keyCode: keyCodes.UP });
+
+        expect(
+          component.find('[data-test-subj="itemC"]').matchesElement(document.activeElement)
+        ).toBe(true);
+      });
+
+      it(`right arrow key shows next panel with focused item's index`, () => {
+        component.simulate('keydown', { keyCode: keyCodes.DOWN });
         component.simulate('keydown', { keyCode: keyCodes.RIGHT });
         sinon.assert.calledWith(showNextPanelHandler, 0);
       });
diff --git a/ui_framework/src/components/popover/__snapshots__/popover.test.js.snap b/ui_framework/src/components/popover/__snapshots__/popover.test.js.snap
index 407ea3b3024d3..4ae95ac1a5f6c 100644
--- a/ui_framework/src/components/popover/__snapshots__/popover.test.js.snap
+++ b/ui_framework/src/components/popover/__snapshots__/popover.test.js.snap
@@ -42,6 +42,33 @@ exports[`KuiPopover props anchorPosition right is rendered 1`] = `
 </div>
 `;
 
+exports[`KuiPopover props isFocusable defaults to false 1`] = `
+<div
+  class="kuiPopover"
+>
+  <button />
+  <div>
+    <div
+      class="kuiPanelSimple kuiPanelSimple--paddingMedium kuiPanelSimple--shadow kuiPopover__panel"
+    />
+  </div>
+</div>
+`;
+
+exports[`KuiPopover props isFocusable renders true 1`] = `
+<div
+  class="kuiPopover"
+>
+  <button />
+  <div>
+    <div
+      class="kuiPanelSimple kuiPanelSimple--paddingMedium kuiPanelSimple--shadow kuiPopover__panel"
+      tabindex="0"
+    />
+  </div>
+</div>
+`;
+
 exports[`KuiPopover props isOpen defaults to false 1`] = `
 <div
   class="kuiPopover"
diff --git a/ui_framework/src/components/popover/popover.js b/ui_framework/src/components/popover/popover.js
index 1ac321fd5db33..06d2e874c8cae 100644
--- a/ui_framework/src/components/popover/popover.js
+++ b/ui_framework/src/components/popover/popover.js
@@ -71,11 +71,18 @@ export class KuiPopover extends Component {
     clearTimeout(this.closingTransitionTimeout);
   }
 
+  panelRef = node => {
+    if (this.props.isFocusable) {
+      this.panel = node;
+    }
+  };
+
   render() {
     const {
       anchorPosition,
       button,
       isOpen,
+      isFocusable,
       withTitle,
       children,
       className,
@@ -100,17 +107,26 @@ export class KuiPopover extends Component {
     let panel;
 
     if (isOpen || this.state.isClosing) {
+      let tabIndex;
+      let initialFocus;
+
+      if (isFocusable) {
+        tabIndex = '0';
+        initialFocus = () => this.panel;
+      }
+
       panel = (
         <FocusTrap
           focusTrapOptions={{
             clickOutsideDeactivates: true,
-            fallbackFocus: () => this.panel,
+            initialFocus,
           }}
         >
           <KuiPanelSimple
-            panelRef={node => { this.panel = node; }}
+            panelRef={this.panelRef}
             className={panelClasses}
             paddingSize={panelPaddingSize}
+            tabIndex={tabIndex}
             hasShadow
           >
             {children}
@@ -136,6 +152,7 @@ export class KuiPopover extends Component {
 
 KuiPopover.propTypes = {
   isOpen: PropTypes.bool,
+  isFocusable: PropTypes.bool,
   withTitle: PropTypes.bool,
   closePopover: PropTypes.func.isRequired,
   button: PropTypes.node.isRequired,
@@ -147,6 +164,7 @@ KuiPopover.propTypes = {
 
 KuiPopover.defaultProps = {
   isOpen: false,
+  isFocusable: false,
   anchorPosition: 'center',
   panelPaddingSize: 'm',
 };
diff --git a/ui_framework/src/components/popover/popover.test.js b/ui_framework/src/components/popover/popover.test.js
index c79c9097ecfc3..90aa26395195f 100644
--- a/ui_framework/src/components/popover/popover.test.js
+++ b/ui_framework/src/components/popover/popover.test.js
@@ -135,6 +135,35 @@ describe('KuiPopover', () => {
       });
     });
 
+    describe('isFocusable', () => {
+      test('defaults to false', () => {
+        const component = render(
+          <KuiPopover
+            isOpen
+            button={<button />}
+            closePopover={() => {}}
+          />
+        );
+
+        expect(component)
+          .toMatchSnapshot();
+      });
+
+      test('renders true', () => {
+        const component = render(
+          <KuiPopover
+            isOpen
+            isFocusable
+            button={<button />}
+            closePopover={() => {}}
+          />
+        );
+
+        expect(component)
+          .toMatchSnapshot();
+      });
+    });
+
     describe('panelClassName', () => {
       test('is rendered', () => {
         const component = render(