From df90c3bb9067c05745787a1db993d3af3c66c894 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@gmail.com>
Date: Wed, 11 Nov 2020 18:33:05 +0000
Subject: [PATCH] [EuiPopover] Default to ownFocus (#4228)

* Defaulting to ownfocus

* Defaulting ownFocus to true

* Trap focus example

* Removing ownFocus prop

* Adding CL

* Test for default ownFocus and  tour step popover ownFocus changed to false.

* Update src-docs/src/views/popover/popover_example.js

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

* Fixing tests

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
---
 src-docs/src/views/color_picker/containers.js |   1 -
 src-docs/src/views/combo_box/containers.js    |   1 -
 .../src/views/datagrid/control_columns.js     |   6 +-
 src-docs/src/views/datagrid/datagrid.js       |   3 +-
 src-docs/src/views/expression/columns.js      |   2 -
 src-docs/src/views/expression/expression.js   |   2 -
 .../src/views/filter_group/filter_group.js    |   1 -
 .../views/filter_group/filter_group_multi.js  |   1 -
 .../src/views/form_layouts/inline_popover.js  |   2 -
 src-docs/src/views/header/header.js           |   3 -
 src-docs/src/views/header/header_alert.js     |   1 -
 .../views/header/header_elastic_pattern.js    |   3 -
 src-docs/src/views/popover/popover.js         |   1 -
 .../views/popover/popover_anchor_position.js  |  12 --
 src-docs/src/views/popover/popover_block.js   |   1 -
 .../src/views/popover/popover_container.js    |   1 -
 src-docs/src/views/popover/popover_example.js |   9 +-
 src-docs/src/views/popover/popover_fixed.js   |   1 -
 .../popover/popover_htmlelement_anchor.js     |   1 -
 .../views/popover/popover_panel_class_name.js |   1 -
 .../src/views/popover/popover_with_title.js   |   3 -
 .../popover/popover_with_title_padding.js     |   6 -
 src-docs/src/views/popover/trap_focus.js      |   1 +
 .../collapsed_item_actions.test.tsx.snap      |   2 +-
 .../in_memory_table.test.tsx.snap             | 107 ++++++++--------
 src/components/datagrid/column_selector.tsx   |   1 -
 src/components/datagrid/column_sorting.tsx    |   2 -
 .../datagrid/data_grid_cell_popover.tsx       |   1 -
 src/components/datagrid/style_selector.tsx    |   1 -
 .../date_popover/date_popover_button.tsx      |   1 -
 .../quick_select_popover.tsx                  |   3 +-
 .../header/header_links/header_links.tsx      |   1 -
 .../__snapshots__/popover.test.tsx.snap       | 114 ++++++++++++++----
 src/components/popover/popover.test.tsx       |   7 +-
 src/components/popover/popover.tsx            |   2 +-
 .../filters/field_value_selection_filter.tsx  |   1 -
 .../table/mobile/table_sort_mobile.tsx        |   1 -
 src/components/tour/tour_step.tsx             |   1 +
 38 files changed, 155 insertions(+), 153 deletions(-)

diff --git a/src-docs/src/views/color_picker/containers.js b/src-docs/src/views/color_picker/containers.js
index b96e0e90a01f..0b706dbd8f85 100644
--- a/src-docs/src/views/color_picker/containers.js
+++ b/src-docs/src/views/color_picker/containers.js
@@ -95,7 +95,6 @@ export default () => {
       <EuiFormRow label="Unruly focus management">
         <EuiPopover
           id="popover"
-          ownFocus={true}
           button={button}
           isOpen={isPopoverOpen}
           closePopover={closePopover}>
diff --git a/src-docs/src/views/combo_box/containers.js b/src-docs/src/views/combo_box/containers.js
index 17043d453075..576229fa02fb 100644
--- a/src-docs/src/views/combo_box/containers.js
+++ b/src-docs/src/views/combo_box/containers.js
@@ -143,7 +143,6 @@ export default () => {
 
       <EuiPopover
         id="popover"
-        ownFocus
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}>
diff --git a/src-docs/src/views/datagrid/control_columns.js b/src-docs/src/views/datagrid/control_columns.js
index 8cab35736584..71a0151766b0 100644
--- a/src-docs/src/views/datagrid/control_columns.js
+++ b/src-docs/src/views/datagrid/control_columns.js
@@ -94,8 +94,7 @@ const SelectionButton = () => {
             selected
           </EuiButtonEmpty>
         }
-        closePopover={() => setIsPopoverOpen(false)}
-        ownFocus={true}>
+        closePopover={() => setIsPopoverOpen(false)}>
         <EuiPopoverTitle>
           {selectedRows.size} {selectedRows.size > 1 ? 'items' : 'item'}
         </EuiPopoverTitle>
@@ -264,8 +263,7 @@ const trailingControlColumns = [
                 onClick={() => setIsPopoverOpen(!isPopoverOpen)}
               />
             }
-            closePopover={() => setIsPopoverOpen(false)}
-            ownFocus={true}>
+            closePopover={() => setIsPopoverOpen(false)}>
             <EuiPopoverTitle>Actions</EuiPopoverTitle>
             <div style={{ width: 150 }}>
               <button onClick={() => {}} component="span">
diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
index f496a176b42f..3ee800261039 100644
--- a/src-docs/src/views/datagrid/datagrid.js
+++ b/src-docs/src/views/datagrid/datagrid.js
@@ -188,8 +188,7 @@ const trailingControlColumns = [
                 onClick={() => setIsPopoverOpen(!isPopoverOpen)}
               />
             }
-            closePopover={() => setIsPopoverOpen(false)}
-            ownFocus={true}>
+            closePopover={() => setIsPopoverOpen(false)}>
             <EuiPopoverTitle>Actions</EuiPopoverTitle>
             <div style={{ width: 150 }}>
               <button onClick={() => {}}>
diff --git a/src-docs/src/views/expression/columns.js b/src-docs/src/views/expression/columns.js
index b5bed2035bfc..4e93a4169b8b 100644
--- a/src-docs/src/views/expression/columns.js
+++ b/src-docs/src/views/expression/columns.js
@@ -155,7 +155,6 @@ export default () => {
         }
         isOpen={example1.isOpen}
         closePopover={closeExample1}
-        ownFocus
         display="block"
         panelPaddingSize="s"
         anchorPosition="downLeft">
@@ -176,7 +175,6 @@ export default () => {
         }
         isOpen={example2.isOpen}
         closePopover={closeExample2}
-        ownFocus
         display="block"
         anchorPosition="downLeft">
         {renderPopover2()}
diff --git a/src-docs/src/views/expression/expression.js b/src-docs/src/views/expression/expression.js
index 25ca938343b3..ca7730ee389f 100644
--- a/src-docs/src/views/expression/expression.js
+++ b/src-docs/src/views/expression/expression.js
@@ -143,7 +143,6 @@ export default () => {
           }
           isOpen={example1.isOpen}
           closePopover={closeExample1}
-          ownFocus
           panelPaddingSize="s"
           anchorPosition="downLeft">
           {renderPopover1()}
@@ -164,7 +163,6 @@ export default () => {
           }
           isOpen={example2.isOpen}
           closePopover={closeExample2}
-          ownFocus
           anchorPosition="downLeft">
           {renderPopover2()}
         </EuiPopover>
diff --git a/src-docs/src/views/filter_group/filter_group.js b/src-docs/src/views/filter_group/filter_group.js
index 423d8d0098c6..c8596e251a4a 100644
--- a/src-docs/src/views/filter_group/filter_group.js
+++ b/src-docs/src/views/filter_group/filter_group.js
@@ -71,7 +71,6 @@ export default () => {
       </EuiFilterButton>
       <EuiPopover
         id="popover"
-        ownFocus
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}
diff --git a/src-docs/src/views/filter_group/filter_group_multi.js b/src-docs/src/views/filter_group/filter_group_multi.js
index 196493bf3c2d..33270402aa1a 100644
--- a/src-docs/src/views/filter_group/filter_group_multi.js
+++ b/src-docs/src/views/filter_group/filter_group_multi.js
@@ -84,7 +84,6 @@ export default () => {
     <EuiFilterGroup>
       <EuiPopover
         id="popoverExampleMultiSelect"
-        ownFocus
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}
diff --git a/src-docs/src/views/form_layouts/inline_popover.js b/src-docs/src/views/form_layouts/inline_popover.js
index beb097f276b5..4e2345a99802 100644
--- a/src-docs/src/views/form_layouts/inline_popover.js
+++ b/src-docs/src/views/form_layouts/inline_popover.js
@@ -112,7 +112,6 @@ export default () => {
     <div>
       <EuiPopover
         id="inlineFormPopover"
-        ownFocus
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}>
@@ -121,7 +120,6 @@ export default () => {
       &emsp;
       <EuiPopover
         id="formPopover"
-        ownFocus
         button={button2}
         isOpen={isPopover2Open}
         closePopover={closePopover2}>
diff --git a/src-docs/src/views/header/header.js b/src-docs/src/views/header/header.js
index 5ef03b12cb72..025ffe090938 100644
--- a/src-docs/src/views/header/header.js
+++ b/src-docs/src/views/header/header.js
@@ -161,7 +161,6 @@ const HeaderUserMenu = () => {
   return (
     <EuiPopover
       id={id}
-      ownFocus
       button={button}
       isOpen={isOpen}
       anchorPosition="downRight"
@@ -286,7 +285,6 @@ const HeaderSpacesMenu = () => {
   return (
     <EuiPopover
       id={id}
-      ownFocus
       button={button}
       isOpen={isOpen}
       anchorPosition="downLeft"
@@ -358,7 +356,6 @@ const HeaderAppMenu = () => {
   return (
     <EuiPopover
       id={popoverId}
-      ownFocus
       button={button}
       isOpen={isOpen}
       anchorPosition="downRight"
diff --git a/src-docs/src/views/header/header_alert.js b/src-docs/src/views/header/header_alert.js
index 88e440e08b48..ccd8fe42321b 100644
--- a/src-docs/src/views/header/header_alert.js
+++ b/src-docs/src/views/header/header_alert.js
@@ -277,7 +277,6 @@ const HeaderUserMenu = () => {
   return (
     <EuiPopover
       id={id}
-      ownFocus
       repositionOnScroll
       button={button}
       isOpen={isOpen}
diff --git a/src-docs/src/views/header/header_elastic_pattern.js b/src-docs/src/views/header/header_elastic_pattern.js
index 3073341095e9..606dae82ba68 100644
--- a/src-docs/src/views/header/header_elastic_pattern.js
+++ b/src-docs/src/views/header/header_elastic_pattern.js
@@ -145,7 +145,6 @@ export default ({ theme }) => {
   const userMenu = (
     <EuiPopover
       id="guideHeaderUserMenuExample"
-      ownFocus
       repositionOnScroll
       button={
         <EuiHeaderSectionItemButton
@@ -181,7 +180,6 @@ export default ({ theme }) => {
   const spacesMenu = (
     <EuiPopover
       id="guideHeaderSpacesMenuExample"
-      ownFocus
       repositionOnScroll
       button={
         <EuiHeaderSectionItemButton
@@ -217,7 +215,6 @@ export default ({ theme }) => {
   const deploymentMenu = (
     <EuiPopover
       id="guideHeaderDeploymentMenuExample"
-      ownFocus
       repositionOnScroll
       button={
         <EuiBadge
diff --git a/src-docs/src/views/popover/popover.js b/src-docs/src/views/popover/popover.js
index ba69af629761..b6b0bbd2a9e5 100644
--- a/src-docs/src/views/popover/popover.js
+++ b/src-docs/src/views/popover/popover.js
@@ -17,7 +17,6 @@ export default () => {
 
   return (
     <EuiPopover
-      ownFocus
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}>
diff --git a/src-docs/src/views/popover/popover_anchor_position.js b/src-docs/src/views/popover/popover_anchor_position.js
index 526c442016e8..4942c58ffeb0 100644
--- a/src-docs/src/views/popover/popover_anchor_position.js
+++ b/src-docs/src/views/popover/popover_anchor_position.js
@@ -86,7 +86,6 @@ export default () => {
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -104,7 +103,6 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -122,7 +120,6 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -144,7 +141,6 @@ export default () => {
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -162,7 +158,6 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -180,7 +175,6 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -202,7 +196,6 @@ export default () => {
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -220,7 +213,6 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -238,7 +230,6 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -260,7 +251,6 @@ export default () => {
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -278,7 +268,6 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -296,7 +285,6 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
diff --git a/src-docs/src/views/popover/popover_block.js b/src-docs/src/views/popover/popover_block.js
index 8eaa775f7d37..ecb0c21913f9 100644
--- a/src-docs/src/views/popover/popover_block.js
+++ b/src-docs/src/views/popover/popover_block.js
@@ -17,7 +17,6 @@ export default () => {
 
   return (
     <EuiPopover
-      ownFocus
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}
diff --git a/src-docs/src/views/popover/popover_container.js b/src-docs/src/views/popover/popover_container.js
index 48371f81a903..20b2edfe2dac 100644
--- a/src-docs/src/views/popover/popover_container.js
+++ b/src-docs/src/views/popover/popover_container.js
@@ -29,7 +29,6 @@ export default () => {
   return (
     <EuiPanel panelRef={setPanelRef}>
       <EuiPopover
-        ownFocus
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}
diff --git a/src-docs/src/views/popover/popover_example.js b/src-docs/src/views/popover/popover_example.js
index 7d6fef277f2f..f5418e77ff94 100644
--- a/src-docs/src/views/popover/popover_example.js
+++ b/src-docs/src/views/popover/popover_example.js
@@ -59,7 +59,6 @@ const inputPopoverSource = require('!!raw-loader!./input_popover');
 const inputPopoverHtml = renderToHtml(PopoverBlock);
 
 const popOverSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}>
@@ -67,6 +66,7 @@ const popOverSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const trapFocusSnippet = `<EuiPopover
+  ownFocus={false}
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}>
@@ -74,7 +74,6 @@ const trapFocusSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverAnchorSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -83,7 +82,6 @@ const popoverAnchorSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverWithTitleSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}>
@@ -93,7 +91,6 @@ const popoverWithTitleSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverPanelClassNameSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -103,7 +100,6 @@ const popoverPanelClassNameSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverWithTitlePaddingSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -114,7 +110,6 @@ const popoverWithTitlePaddingSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverContainerSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -123,7 +118,6 @@ const popoverContainerSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverFixedSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -132,7 +126,6 @@ const popoverFixedSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverBlockSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
diff --git a/src-docs/src/views/popover/popover_fixed.js b/src-docs/src/views/popover/popover_fixed.js
index a4c69f16b3b8..2fdb020f7645 100644
--- a/src-docs/src/views/popover/popover_fixed.js
+++ b/src-docs/src/views/popover/popover_fixed.js
@@ -28,7 +28,6 @@ export default () => {
       <EuiButton onClick={toggleExample}>Toggle example</EuiButton>
       {isExampleShown && (
         <EuiPopover
-          ownFocus
           button={button}
           isOpen={isPopoverOpen}
           closePopover={closePopover}
diff --git a/src-docs/src/views/popover/popover_htmlelement_anchor.js b/src-docs/src/views/popover/popover_htmlelement_anchor.js
index 2b9359239bc3..8b70e232552a 100644
--- a/src-docs/src/views/popover/popover_htmlelement_anchor.js
+++ b/src-docs/src/views/popover/popover_htmlelement_anchor.js
@@ -19,7 +19,6 @@ const PopoverApp = (props) => {
 
   return (
     <EuiWrappingPopover
-      ownFocus
       button={props.anchor}
       isOpen={isPopoverOpen}
       closePopover={closePopover}>
diff --git a/src-docs/src/views/popover/popover_panel_class_name.js b/src-docs/src/views/popover/popover_panel_class_name.js
index b2595b1f8b84..b5906d7cefd4 100644
--- a/src-docs/src/views/popover/popover_panel_class_name.js
+++ b/src-docs/src/views/popover/popover_panel_class_name.js
@@ -11,7 +11,6 @@ export default () => {
 
   return (
     <EuiPopover
-      ownFocus
       button={
         <EuiButton
           iconType="arrowDown"
diff --git a/src-docs/src/views/popover/popover_with_title.js b/src-docs/src/views/popover/popover_with_title.js
index 9a0d17b6884e..4dc2fef7cab4 100644
--- a/src-docs/src/views/popover/popover_with_title.js
+++ b/src-docs/src/views/popover/popover_with_title.js
@@ -32,7 +32,6 @@ export default () => {
     <EuiFlexGroup>
       <EuiFlexItem grow={false}>
         <EuiPopover
-          ownFocus
           button={
             <EuiButton
               iconType="arrowDown"
@@ -58,7 +57,6 @@ export default () => {
 
       <EuiFlexItem grow={false}>
         <EuiPopover
-          ownFocus
           button={
             <EuiButton
               iconType="arrowDown"
@@ -88,7 +86,6 @@ export default () => {
 
       <EuiFlexItem grow={false}>
         <EuiPopover
-          ownFocus
           button={
             <EuiButton
               iconType="arrowDown"
diff --git a/src-docs/src/views/popover/popover_with_title_padding.js b/src-docs/src/views/popover/popover_with_title_padding.js
index 9d137cc1757c..4d128a39ee96 100644
--- a/src-docs/src/views/popover/popover_with_title_padding.js
+++ b/src-docs/src/views/popover/popover_with_title_padding.js
@@ -49,7 +49,6 @@ export default () => {
         <EuiFlexItem grow={false}>
           <EuiPopover
             panelPaddingSize="s"
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -78,7 +77,6 @@ export default () => {
         <EuiFlexItem grow={false}>
           <EuiPopover
             panelPaddingSize="none"
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -108,7 +106,6 @@ export default () => {
       <EuiFlexGroup wrap={true}>
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -140,7 +137,6 @@ export default () => {
         <EuiFlexItem grow={false}>
           <EuiPopover
             panelPaddingSize="none"
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -172,7 +168,6 @@ export default () => {
       <EuiFlexGroup wrap={true}>
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -202,7 +197,6 @@ export default () => {
         <EuiFlexItem grow={false}>
           <EuiPopover
             panelPaddingSize="none"
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
diff --git a/src-docs/src/views/popover/trap_focus.js b/src-docs/src/views/popover/trap_focus.js
index 973943043eec..c1109085e1b6 100644
--- a/src-docs/src/views/popover/trap_focus.js
+++ b/src-docs/src/views/popover/trap_focus.js
@@ -23,6 +23,7 @@ export default () => {
 
   return (
     <EuiPopover
+      ownFocus={false}
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}
diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
index 0ecfdaf9f61b..2b51eb48c4a2 100644
--- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`CollapsedItemActions render with href and _target provided 1`] = `
   hasArrow={true}
   id="id-actions"
   isOpen={true}
-  ownFocus={false}
+  ownFocus={true}
   panelPaddingSize="none"
   popoverRef={[Function]}
 >
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
index 415efa62d7f8..d77b9b6b4d1e 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -355,81 +355,72 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                       display="inlineBlock"
                       hasArrow={true}
                       isOpen={false}
-                      ownFocus={false}
+                      ownFocus={true}
                       panelPaddingSize="none"
                     >
-                      <EuiOutsideClickDetector
-                        onOutsideClick={[Function]}
+                      <div
+                        className="euiPopover euiPopover--anchorUpRight"
                       >
                         <div
-                          className="euiPopover euiPopover--anchorUpRight"
-                          onKeyDown={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseUp={[Function]}
-                          onTouchEnd={[Function]}
-                          onTouchStart={[Function]}
+                          className="euiPopover__anchor"
                         >
-                          <div
-                            className="euiPopover__anchor"
+                          <EuiButtonEmpty
+                            color="text"
+                            data-test-subj="tablePaginationPopoverButton"
+                            iconSide="right"
+                            iconType="arrowDown"
+                            onClick={[Function]}
+                            size="xs"
                           >
-                            <EuiButtonEmpty
-                              color="text"
+                            <button
+                              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
                               data-test-subj="tablePaginationPopoverButton"
-                              iconSide="right"
-                              iconType="arrowDown"
+                              disabled={false}
                               onClick={[Function]}
-                              size="xs"
+                              type="button"
                             >
-                              <button
-                                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
-                                data-test-subj="tablePaginationPopoverButton"
-                                disabled={false}
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <EuiButtonContent
-                                  className="euiButtonEmpty__content"
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  textProps={
-                                    Object {
-                                      "className": "euiButtonEmpty__text",
-                                    }
+                              <EuiButtonContent
+                                className="euiButtonEmpty__content"
+                                iconSide="right"
+                                iconType="arrowDown"
+                                textProps={
+                                  Object {
+                                    "className": "euiButtonEmpty__text",
                                   }
+                                }
+                              >
+                                <span
+                                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                                 >
-                                  <span
-                                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                  <EuiIcon
+                                    className="euiButtonContent__icon"
+                                    size="m"
+                                    type="arrowDown"
                                   >
-                                    <EuiIcon
+                                    <span
                                       className="euiButtonContent__icon"
+                                      data-euiicon-type="arrowDown"
                                       size="m"
-                                      type="arrowDown"
-                                    >
-                                      <span
-                                        className="euiButtonContent__icon"
-                                        data-euiicon-type="arrowDown"
-                                        size="m"
-                                      />
-                                    </EuiIcon>
-                                    <span
-                                      className="euiButtonEmpty__text"
+                                    />
+                                  </EuiIcon>
+                                  <span
+                                    className="euiButtonEmpty__text"
+                                  >
+                                    <EuiI18n
+                                      default="Rows per page"
+                                      token="euiTablePagination.rowsPerPage"
                                     >
-                                      <EuiI18n
-                                        default="Rows per page"
-                                        token="euiTablePagination.rowsPerPage"
-                                      >
-                                        Rows per page
-                                      </EuiI18n>
-                                      : 
-                                      2
-                                    </span>
+                                      Rows per page
+                                    </EuiI18n>
+                                    : 
+                                    2
                                   </span>
-                                </EuiButtonContent>
-                              </button>
-                            </EuiButtonEmpty>
-                          </div>
+                                </span>
+                              </EuiButtonContent>
+                            </button>
+                          </EuiButtonEmpty>
                         </div>
-                      </EuiOutsideClickDetector>
+                      </div>
                     </EuiPopover>
                   </div>
                 </EuiFlexItem>
diff --git a/src/components/datagrid/column_selector.tsx b/src/components/datagrid/column_selector.tsx
index f67d06197bc6..1efa878cba94 100644
--- a/src/components/datagrid/column_selector.tsx
+++ b/src/components/datagrid/column_selector.tsx
@@ -159,7 +159,6 @@ export const useDataGridColumnSelector = (
       isOpen={isOpen}
       closePopover={() => setIsOpen(false)}
       anchorPosition="downLeft"
-      ownFocus
       panelPaddingSize="s"
       panelClassName="euiDataGridColumnSelectorPopover"
       button={
diff --git a/src/components/datagrid/column_sorting.tsx b/src/components/datagrid/column_sorting.tsx
index 542e057181f8..890d1562d611 100644
--- a/src/components/datagrid/column_sorting.tsx
+++ b/src/components/datagrid/column_sorting.tsx
@@ -141,7 +141,6 @@ export const useDataGridColumnSorting = (
       isOpen={isOpen}
       closePopover={() => setIsOpen(false)}
       anchorPosition="downLeft"
-      ownFocus
       panelPaddingSize="s"
       panelClassName="euiDataGridColumnSortingPopover"
       button={
@@ -212,7 +211,6 @@ export const useDataGridColumnSorting = (
                   isOpen={avilableColumnsisOpen}
                   closePopover={() => setAvailableColumnsIsOpen(false)}
                   anchorPosition="downLeft"
-                  ownFocus
                   panelPaddingSize="none"
                   button={
                     <EuiButtonEmpty
diff --git a/src/components/datagrid/data_grid_cell_popover.tsx b/src/components/datagrid/data_grid_cell_popover.tsx
index 60724d4627e2..fd60256d8ae7 100644
--- a/src/components/datagrid/data_grid_cell_popover.tsx
+++ b/src/components/datagrid/data_grid_cell_popover.tsx
@@ -66,7 +66,6 @@ export function EuiDataGridCellPopover({
       button={anchorContent}
       isOpen={popoverIsOpen}
       panelRef={panelRefFn}
-      ownFocus
       panelClassName="euiDataGridRowCell__popover"
       panelPaddingSize="s"
       zIndex={8001}
diff --git a/src/components/datagrid/style_selector.tsx b/src/components/datagrid/style_selector.tsx
index 0335273debdc..5a836b998f6d 100644
--- a/src/components/datagrid/style_selector.tsx
+++ b/src/components/datagrid/style_selector.tsx
@@ -79,7 +79,6 @@ export const useDataGridStyleSelector = (
       isOpen={isOpen}
       closePopover={() => setIsOpen(false)}
       anchorPosition="downCenter"
-      ownFocus
       panelPaddingSize="s"
       panelClassName="euiDataGridColumnSelectorPopover"
       button={
diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
index 918775d6a235..4da6acccebdc 100644
--- a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
+++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
@@ -112,7 +112,6 @@ export const EuiDatePopoverButton: FunctionComponent<EuiDatePopoverButtonProps>
       anchorPosition={position === 'start' ? 'downLeft' : 'downRight'}
       display="block"
       panelPaddingSize="none"
-      ownFocus
       {...rest}>
       <EuiDatePopoverContent
         value={value}
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
index 09ba63afd5af..4d8e97f2a723 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
@@ -187,8 +187,7 @@ export class EuiQuickSelectPopover extends Component<
         isOpen={isOpen}
         closePopover={this.closePopover}
         anchorPosition="downLeft"
-        anchorClassName="euiQuickSelectPopover__anchor"
-        ownFocus>
+        anchorClassName="euiQuickSelectPopover__anchor">
         <div
           className="euiQuickSelectPopover__content"
           data-test-subj="superDatePickerQuickMenu">
diff --git a/src/components/header/header_links/header_links.tsx b/src/components/header/header_links/header_links.tsx
index 6899c3fa3915..39fab32d0a18 100644
--- a/src/components/header/header_links/header_links.tsx
+++ b/src/components/header/header_links/header_links.tsx
@@ -134,7 +134,6 @@ export const EuiHeaderLinks: FunctionComponent<EuiHeaderLinksProps> = ({
 
           <EuiShowFor sizes={popoverBreakpoints}>
             <EuiPopover
-              ownFocus
               button={button}
               isOpen={mobileMenuIsOpen}
               anchorPosition="downRight"
diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap
index 6788f6cf263c..3ecc06962c19 100644
--- a/src/components/popover/__snapshots__/popover.test.tsx.snap
+++ b/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -104,11 +104,14 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-describedby="generated-id"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+        data-autofocus="true"
         role="dialog"
         style="top: 16px; left: -22px; z-index: 2000; will-change: transform, opacity;"
+        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
@@ -116,6 +119,12 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
         >
           <span />
         </div>
+        <p
+          class="euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a dialog. To close this dialog, hit escape.
+        </p>
         <div />
       </div>
     </div>
@@ -153,16 +162,25 @@ exports[`EuiPopover props buffer 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-describedby="generated-id"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+        data-autofocus="true"
         role="dialog"
         style="top: 16px; left: -22px; z-index: 2000; will-change: transform, opacity;"
+        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
           style="left: 10px; top: 0px;"
         />
+        <p
+          class="euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a dialog. To close this dialog, hit escape.
+        </p>
         <div />
       </div>
     </div>
@@ -200,16 +218,25 @@ exports[`EuiPopover props buffer for all sides 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-describedby="generated-id"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+        data-autofocus="true"
         role="dialog"
         style="top: 16px; left: -22px; z-index: 2000; will-change: transform, opacity;"
+        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
           style="left: 10px; top: 0px;"
         />
+        <p
+          class="euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a dialog. To close this dialog, hit escape.
+        </p>
         <div />
       </div>
     </div>
@@ -273,16 +300,25 @@ exports[`EuiPopover props isOpen renders true 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-describedby="generated-id"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+        data-autofocus="true"
         role="dialog"
         style="top: 16px; left: -22px; z-index: 2000; will-change: transform, opacity;"
+        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
           style="left: 10px; top: 0px;"
         />
+        <p
+          class="euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a dialog. To close this dialog, hit escape.
+        </p>
         <div />
       </div>
     </div>
@@ -321,16 +357,25 @@ exports[`EuiPopover props offset with arrow 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-describedby="generated-id"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+        data-autofocus="true"
         role="dialog"
         style="top: 26px; left: -22px; z-index: 2000; will-change: transform, opacity;"
+        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
           style="left: 10px; top: 0px;"
         />
+        <p
+          class="euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a dialog. To close this dialog, hit escape.
+        </p>
         <div />
       </div>
     </div>
@@ -369,15 +414,24 @@ exports[`EuiPopover props offset without arrow 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-describedby="generated-id"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen euiPopover__panel-noArrow"
+        data-autofocus="true"
         role="dialog"
         style="top: 18px; left: -22px; z-index: 2000; will-change: transform, opacity;"
+        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
         />
+        <p
+          class="euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a dialog. To close this dialog, hit escape.
+        </p>
         <div />
       </div>
     </div>
@@ -390,7 +444,7 @@ exports[`EuiPopover props offset without arrow 1`] = `
 </div>
 `;
 
-exports[`EuiPopover props ownFocus defaults to false 1`] = `
+exports[`EuiPopover props ownFocus defaults to true 1`] = `
 <div>
   <div
     class="euiPopover euiPopover--anchorDownCenter euiPopover-isOpen"
@@ -415,16 +469,25 @@ exports[`EuiPopover props ownFocus defaults to false 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-describedby="generated-id"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+        data-autofocus="true"
         role="dialog"
         style="top: 16px; left: -22px; z-index: 2000; will-change: transform, opacity;"
+        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
           style="left: 10px; top: 0px;"
         />
+        <p
+          class="euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a dialog. To close this dialog, hit escape.
+        </p>
         <div />
       </div>
     </div>
@@ -437,7 +500,7 @@ exports[`EuiPopover props ownFocus defaults to false 1`] = `
 </div>
 `;
 
-exports[`EuiPopover props ownFocus renders true 1`] = `
+exports[`EuiPopover props ownFocus renders false 1`] = `
 <div>
   <div
     class="euiPopover euiPopover--anchorDownCenter euiPopover-isOpen"
@@ -462,25 +525,16 @@ exports[`EuiPopover props ownFocus renders true 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-describedby="generated-id"
-        aria-live="off"
+        aria-live="assertive"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
-        data-autofocus="true"
         role="dialog"
         style="top: 16px; left: -22px; z-index: 2000; will-change: transform, opacity;"
-        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
           style="left: 10px; top: 0px;"
         />
-        <p
-          class="euiScreenReaderOnly"
-          id="generated-id"
-        >
-          You are in a dialog. To close this dialog, hit escape.
-        </p>
         <div />
       </div>
     </div>
@@ -518,16 +572,25 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-describedby="generated-id"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen test"
+        data-autofocus="true"
         role="dialog"
         style="top: 16px; left: -22px; z-index: 2000; will-change: transform, opacity;"
+        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
           style="left: 10px; top: 0px;"
         />
+        <p
+          class="euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a dialog. To close this dialog, hit escape.
+        </p>
         <div />
       </div>
     </div>
@@ -565,16 +628,25 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-describedby="generated-id"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+        data-autofocus="true"
         role="dialog"
         style="top: 16px; left: -22px; z-index: 2000; will-change: transform, opacity;"
+        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
           style="left: 10px; top: 0px;"
         />
+        <p
+          class="euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a dialog. To close this dialog, hit escape.
+        </p>
         <div />
       </div>
     </div>
diff --git a/src/components/popover/popover.test.tsx b/src/components/popover/popover.test.tsx
index 3056da3927c3..25db2a15bf20 100644
--- a/src/components/popover/popover.test.tsx
+++ b/src/components/popover/popover.test.tsx
@@ -98,6 +98,7 @@ describe('EuiPopover', () => {
 
         const component = mount(
           <EuiPopover
+            ownFocus={false}
             id={getId()}
             button={<button />}
             closePopover={closePopoverHandler}
@@ -198,7 +199,7 @@ describe('EuiPopover', () => {
     });
 
     describe('ownFocus', () => {
-      test('defaults to false', () => {
+      test('defaults to true', () => {
         const component = mount(
           <div>
             <EuiPopover
@@ -213,13 +214,13 @@ describe('EuiPopover', () => {
         expect(component.render()).toMatchSnapshot();
       });
 
-      test('renders true', () => {
+      test('renders false', () => {
         const component = mount(
           <div>
             <EuiPopover
+              ownFocus={false}
               id={getId()}
               isOpen
-              ownFocus
               button={<button />}
               closePopover={() => {}}
             />
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index 923f78b3f45c..9d5fb61cd9e5 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -309,7 +309,7 @@ type PropsWithDefaults = Props & {
 export class EuiPopover extends Component<Props, State> {
   static defaultProps: Partial<PropsWithDefaults> = {
     isOpen: false,
-    ownFocus: false,
+    ownFocus: true,
     anchorPosition: 'downCenter',
     panelPaddingSize: 'm',
     hasArrow: true,
diff --git a/src/components/search_bar/filters/field_value_selection_filter.tsx b/src/components/search_bar/filters/field_value_selection_filter.tsx
index 06905a5e6512..b1ef26ba4d1d 100644
--- a/src/components/search_bar/filters/field_value_selection_filter.tsx
+++ b/src/components/search_bar/filters/field_value_selection_filter.tsx
@@ -366,7 +366,6 @@ export class FieldValueSelectionFilter extends Component<
     return (
       <EuiPopover
         id={`${config.type}_${index}`}
-        ownFocus
         button={button}
         isOpen={this.state.popoverOpen}
         closePopover={this.closePopover.bind(this)}
diff --git a/src/components/table/mobile/table_sort_mobile.tsx b/src/components/table/mobile/table_sort_mobile.tsx
index 653b43674b9b..afd829368db5 100644
--- a/src/components/table/mobile/table_sort_mobile.tsx
+++ b/src/components/table/mobile/table_sort_mobile.tsx
@@ -82,7 +82,6 @@ export class EuiTableSortMobile extends Component<
 
     const mobileSortPopover = (
       <EuiPopover
-        ownFocus
         button={mobileSortButton}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}
diff --git a/src/components/tour/tour_step.tsx b/src/components/tour/tour_step.tsx
index b4dc44ef746a..208d32f42703 100644
--- a/src/components/tour/tour_step.tsx
+++ b/src/components/tour/tour_step.tsx
@@ -216,6 +216,7 @@ export const EuiTourStep: FunctionComponent<EuiTourStepProps> = ({
       button={children}
       closePopover={closePopover}
       isOpen={isStepOpen}
+      ownFocus={false}
       panelClassName={classes}
       panelStyle={newStyle || style}
       offset={hasBeacon ? 10 : 0}