From 69790d7faba06143a300b33ea2a53c93d9485af8 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 4 Nov 2020 16:08:51 +0000
Subject: [PATCH 1/8] Defaulting to ownfocus

---
 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             |   2 +-
 .../__snapshots__/popover.test.tsx.snap       | 152 +++++++++++++-----
 src/components/popover/popover.tsx            |   2 +-
 15 files changed, 117 insertions(+), 78 deletions(-)

diff --git a/src-docs/src/views/popover/popover.js b/src-docs/src/views/popover/popover.js
index ba69af62976..b6b0bbd2a9e 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 526c442016e..4942c58ffeb 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 8eaa775f7d3..ecb0c21913f 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 48371f81a90..20b2edfe2da 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 7d6fef277f2..f5418e77ff9 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 a4c69f16b3b..2fdb020f764 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 2b9359239bc..8b70e232552 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 b2595b1f8b8..b5906d7cefd 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 9a0d17b6884..4dc2fef7cab 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 9d137cc1757..4d128a39ee9 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 973943043ee..d7e3f30c663 100644
--- a/src-docs/src/views/popover/trap_focus.js
+++ b/src-docs/src/views/popover/trap_focus.js
@@ -26,6 +26,7 @@ export default () => {
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}
+      ownFocus={false}
       initialFocus="[id=asdf2]">
       <EuiFormRow
         label="Generate a public snapshot?"
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 0ecfdaf9f61..2b51eb48c4a 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 06c25f28ce6..8b8b4d4c659 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,7 +355,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                       display="inlineBlock"
                       hasArrow={true}
                       isOpen={false}
-                      ownFocus={false}
+                      ownFocus={true}
                       panelPaddingSize="none"
                     >
                       <EuiOutsideClickDetector
diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap
index 48aa88fbf76..303681bc696 100644
--- a/src/components/popover/__snapshots__/popover.test.tsx.snap
+++ b/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -95,22 +95,25 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="0"
       />
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="1"
       />
       <div
-        data-focus-lock-disabled="disabled"
+        data-focus-lock-disabled="false"
       >
         <div
-          aria-live="assertive"
+          aria-describedby="htmlId"
+          aria-live="off"
           aria-modal="true"
           class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+          data-autofocus="true"
           role="dialog"
           style="top: 16px; left: -22px; z-index: 2000;"
+          tabindex="0"
         >
           <div
             class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
@@ -118,13 +121,19 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
           >
             <span />
           </div>
+          <p
+            class="euiScreenReaderOnly"
+            id="htmlId"
+          >
+            You are in a dialog. To close this dialog, hit escape.
+          </p>
           <div />
         </div>
       </div>
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="0"
       />
     </div>
   </div>
@@ -146,34 +155,43 @@ exports[`EuiPopover props buffer 1`] = `
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="0"
       />
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="1"
       />
       <div
-        data-focus-lock-disabled="disabled"
+        data-focus-lock-disabled="false"
       >
         <div
-          aria-live="assertive"
+          aria-describedby="htmlId"
+          aria-live="off"
           aria-modal="true"
           class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+          data-autofocus="true"
           role="dialog"
           style="top: 16px; left: -22px; z-index: 2000;"
+          tabindex="0"
         >
           <div
             class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
             style="left: 10px; top: 0px;"
           />
+          <p
+            class="euiScreenReaderOnly"
+            id="htmlId"
+          >
+            You are in a dialog. To close this dialog, hit escape.
+          </p>
           <div />
         </div>
       </div>
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="0"
       />
     </div>
   </div>
@@ -221,34 +239,43 @@ exports[`EuiPopover props isOpen renders true 1`] = `
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="0"
       />
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="1"
       />
       <div
-        data-focus-lock-disabled="disabled"
+        data-focus-lock-disabled="false"
       >
         <div
-          aria-live="assertive"
+          aria-describedby="htmlId"
+          aria-live="off"
           aria-modal="true"
           class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+          data-autofocus="true"
           role="dialog"
           style="top: 16px; left: -22px; z-index: 2000;"
+          tabindex="0"
         >
           <div
             class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
             style="left: 10px; top: 0px;"
           />
+          <p
+            class="euiScreenReaderOnly"
+            id="htmlId"
+          >
+            You are in a dialog. To close this dialog, hit escape.
+          </p>
           <div />
         </div>
       </div>
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="0"
       />
     </div>
   </div>
@@ -271,34 +298,43 @@ exports[`EuiPopover props offset with arrow 1`] = `
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="0"
       />
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="1"
       />
       <div
-        data-focus-lock-disabled="disabled"
+        data-focus-lock-disabled="false"
       >
         <div
-          aria-live="assertive"
+          aria-describedby="htmlId"
+          aria-live="off"
           aria-modal="true"
           class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+          data-autofocus="true"
           role="dialog"
           style="top: 26px; left: -22px; z-index: 2000;"
+          tabindex="0"
         >
           <div
             class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
             style="left: 10px; top: 0px;"
           />
+          <p
+            class="euiScreenReaderOnly"
+            id="htmlId"
+          >
+            You are in a dialog. To close this dialog, hit escape.
+          </p>
           <div />
         </div>
       </div>
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="0"
       />
     </div>
   </div>
@@ -321,33 +357,42 @@ exports[`EuiPopover props offset without arrow 1`] = `
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="0"
       />
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="1"
       />
       <div
-        data-focus-lock-disabled="disabled"
+        data-focus-lock-disabled="false"
       >
         <div
-          aria-live="assertive"
+          aria-describedby="htmlId"
+          aria-live="off"
           aria-modal="true"
           class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen euiPopover__panel-noArrow"
+          data-autofocus="true"
           role="dialog"
           style="top: 18px; left: -22px; z-index: 2000;"
+          tabindex="0"
         >
           <div
             class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
           />
+          <p
+            class="euiScreenReaderOnly"
+            id="htmlId"
+          >
+            You are in a dialog. To close this dialog, hit escape.
+          </p>
           <div />
         </div>
       </div>
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="0"
       />
     </div>
   </div>
@@ -369,34 +414,43 @@ exports[`EuiPopover props ownFocus defaults to false 1`] = `
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="0"
       />
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="1"
       />
       <div
-        data-focus-lock-disabled="disabled"
+        data-focus-lock-disabled="false"
       >
         <div
-          aria-live="assertive"
+          aria-describedby="htmlId"
+          aria-live="off"
           aria-modal="true"
           class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+          data-autofocus="true"
           role="dialog"
           style="top: 16px; left: -22px; z-index: 2000;"
+          tabindex="0"
         >
           <div
             class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
             style="left: 10px; top: 0px;"
           />
+          <p
+            class="euiScreenReaderOnly"
+            id="htmlId"
+          >
+            You are in a dialog. To close this dialog, hit escape.
+          </p>
           <div />
         </div>
       </div>
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="0"
       />
     </div>
   </div>
@@ -476,34 +530,43 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="0"
       />
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="1"
       />
       <div
-        data-focus-lock-disabled="disabled"
+        data-focus-lock-disabled="false"
       >
         <div
-          aria-live="assertive"
+          aria-describedby="htmlId"
+          aria-live="off"
           aria-modal="true"
           class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen test"
+          data-autofocus="true"
           role="dialog"
           style="top: 16px; left: -22px; z-index: 2000;"
+          tabindex="0"
         >
           <div
             class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
             style="left: 10px; top: 0px;"
           />
+          <p
+            class="euiScreenReaderOnly"
+            id="htmlId"
+          >
+            You are in a dialog. To close this dialog, hit escape.
+          </p>
           <div />
         </div>
       </div>
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="0"
       />
     </div>
   </div>
@@ -525,34 +588,43 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="0"
       />
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="1"
       />
       <div
-        data-focus-lock-disabled="disabled"
+        data-focus-lock-disabled="false"
       >
         <div
-          aria-live="assertive"
+          aria-describedby="htmlId"
+          aria-live="off"
           aria-modal="true"
           class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+          data-autofocus="true"
           role="dialog"
           style="top: 16px; left: -22px; z-index: 2000;"
+          tabindex="0"
         >
           <div
             class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
             style="left: 10px; top: 0px;"
           />
+          <p
+            class="euiScreenReaderOnly"
+            id="htmlId"
+          >
+            You are in a dialog. To close this dialog, hit escape.
+          </p>
           <div />
         </div>
       </div>
       <div
         data-focus-guard="true"
         style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-        tabindex="-1"
+        tabindex="0"
       />
     </div>
   </div>
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index 25e8733e92b..479908514e8 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -297,7 +297,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,

From 8fded20b422d5f61e6b857b05990348a35fd1afb Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 5 Nov 2020 16:17:24 +0000
Subject: [PATCH 2/8] Defaulting ownFocus to true

---
 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 -
 .../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 |  12 +-
 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 -
 .../collapsed_item_actions.test.tsx.snap      |   2 +-
 .../in_memory_table.test.tsx.snap             | 105 ++++++++----------
 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 -
 .../quick_select_popover.tsx                  |   3 +-
 .../header/header_links/header_links.tsx      |   1 -
 .../__snapshots__/popover.test.tsx.snap       |  77 +++++++++++--
 src/components/popover/popover.test.tsx       |   3 +-
 src/components/popover/popover.tsx            |   2 +-
 .../filters/field_value_selection_filter.tsx  |   1 -
 .../table/mobile/table_sort_mobile.tsx        |   1 -
 34 files changed, 128 insertions(+), 136 deletions(-)

diff --git a/src-docs/src/views/color_picker/containers.js b/src-docs/src/views/color_picker/containers.js
index 7e70312e2bc..eb654f4933b 100644
--- a/src-docs/src/views/color_picker/containers.js
+++ b/src-docs/src/views/color_picker/containers.js
@@ -98,7 +98,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 de12e482761..135bc3b9845 100644
--- a/src-docs/src/views/combo_box/containers.js
+++ b/src-docs/src/views/combo_box/containers.js
@@ -146,7 +146,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 46efe053ece..2128386fc8b 100644
--- a/src-docs/src/views/datagrid/control_columns.js
+++ b/src-docs/src/views/datagrid/control_columns.js
@@ -95,8 +95,7 @@ const SelectionButton = () => {
             selected
           </EuiButtonEmpty>
         }
-        closePopover={() => setIsPopoverOpen(false)}
-        ownFocus={true}>
+        closePopover={() => setIsPopoverOpen(false)}>
         <EuiPopoverTitle>
           {selectedRows.size} {selectedRows.size > 1 ? 'items' : 'item'}
         </EuiPopoverTitle>
@@ -265,8 +264,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 7024a855e75..6adf770236e 100644
--- a/src-docs/src/views/datagrid/datagrid.js
+++ b/src-docs/src/views/datagrid/datagrid.js
@@ -179,8 +179,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/expression/columns.js b/src-docs/src/views/expression/columns.js
index b5bed2035bf..4e93a4169b8 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 25ca938343b..ca7730ee389 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 423d8d0098c..c8596e251a4 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 196493bf3c2..33270402aa1 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 beb097f276b..4e2345a9980 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 5ef03b12cb7..025ffe09093 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 88e440e08b4..ccd8fe42321 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 3073341095e..606dae82ba6 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_anchor_position.js b/src-docs/src/views/popover/popover_anchor_position.js
index 526c442016e..4942c58ffeb 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 8eaa775f7d3..ecb0c21913f 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 48371f81a90..20b2edfe2da 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 7d6fef277f2..7e88fd95358 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}>
@@ -74,7 +73,6 @@ const trapFocusSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverAnchorSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -83,7 +81,6 @@ const popoverAnchorSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverWithTitleSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}>
@@ -93,7 +90,6 @@ const popoverWithTitleSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverPanelClassNameSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -103,7 +99,6 @@ const popoverPanelClassNameSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverWithTitlePaddingSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -114,7 +109,6 @@ const popoverWithTitlePaddingSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverContainerSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -123,7 +117,6 @@ const popoverContainerSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverFixedSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -132,7 +125,6 @@ const popoverFixedSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverBlockSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -428,8 +420,8 @@ export const PopoverExample = {
         <>
           <p>
             If the popover should not trap focus within itself, then you can
-            remove it with <EuiCode language="ts">{'ownFocus={false}'}</EuiCode>
-            .
+            remove it with remove it with{' '}
+            <EuiCode language="ts">{'ownFocus={false}'}</EuiCode>.
           </p>
           <EuiCallOut
             iconType="accessibility"
diff --git a/src-docs/src/views/popover/popover_fixed.js b/src-docs/src/views/popover/popover_fixed.js
index a4c69f16b3b..2fdb020f764 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 2b9359239bc..8b70e232552 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 b2595b1f8b8..b5906d7cefd 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 9a0d17b6884..4dc2fef7cab 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 9d137cc1757..4d128a39ee9 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/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
index 0ecfdaf9f61..2b51eb48c4a 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 d5a8f674145..173842abe31 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,80 +355,71 @@ 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"
                               onClick={[Function]}
-                              size="xs"
+                              type="button"
                             >
-                              <button
-                                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
-                                data-test-subj="tablePaginationPopoverButton"
-                                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 1c8b61223ac..f28e62cccd0 100644
--- a/src/components/datagrid/column_selector.tsx
+++ b/src/components/datagrid/column_selector.tsx
@@ -150,7 +150,6 @@ export const useColumnSelector = (
       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 1710e29f6a4..8e419b38403 100644
--- a/src/components/datagrid/column_sorting.tsx
+++ b/src/components/datagrid/column_sorting.tsx
@@ -141,7 +141,6 @@ export const useColumnSorting = (
       isOpen={isOpen}
       closePopover={() => setIsOpen(false)}
       anchorPosition="downLeft"
-      ownFocus
       panelPaddingSize="s"
       panelClassName="euiDataGridColumnSortingPopover"
       button={
@@ -212,7 +211,6 @@ export const useColumnSorting = (
                   isOpen={avilableColumnsisOpen}
                   closePopover={() => setAvailableColumnsIsOpen(false)}
                   anchorPosition="downLeft"
-                  ownFocus
                   panelPaddingSize="s"
                   button={
                     <EuiButtonEmpty
diff --git a/src/components/datagrid/data_grid_cell_popover.tsx b/src/components/datagrid/data_grid_cell_popover.tsx
index 288ae7dce8f..d2bd42a6a67 100644
--- a/src/components/datagrid/data_grid_cell_popover.tsx
+++ b/src/components/datagrid/data_grid_cell_popover.tsx
@@ -68,7 +68,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 d15b57c6f86..a2eb51aa38a 100644
--- a/src/components/datagrid/style_selector.tsx
+++ b/src/components/datagrid/style_selector.tsx
@@ -79,7 +79,6 @@ export const useStyleSelector = (
       isOpen={isOpen}
       closePopover={() => setIsOpen(false)}
       anchorPosition="downCenter"
-      ownFocus
       panelPaddingSize="s"
       panelClassName="euiDataGridColumnSelectorPopover"
       button={
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 09ba63afd5a..4d8e97f2a72 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 6899c3fa391..39fab32d0a1 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 0bc184e994e..167e356c59b 100644
--- a/src/components/popover/__snapshots__/popover.test.tsx.snap
+++ b/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -105,11 +105,14 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-describedby="htmlId"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+        data-autofocus="true"
         role="dialog"
         style="top: 16px; left: -22px; z-index: 2000;"
+        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
@@ -117,6 +120,12 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
         >
           <span />
         </div>
+        <p
+          class="euiScreenReaderOnly"
+          id="htmlId"
+        >
+          You are in a dialog. To close this dialog, hit escape.
+        </p>
         <div />
       </div>
     </div>
@@ -154,16 +163,25 @@ exports[`EuiPopover props buffer 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-describedby="htmlId"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+        data-autofocus="true"
         role="dialog"
         style="top: 16px; left: -22px; z-index: 2000;"
+        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
           style="left: 10px; top: 0px;"
         />
+        <p
+          class="euiScreenReaderOnly"
+          id="htmlId"
+        >
+          You are in a dialog. To close this dialog, hit escape.
+        </p>
         <div />
       </div>
     </div>
@@ -227,16 +245,25 @@ exports[`EuiPopover props isOpen renders true 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-describedby="htmlId"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+        data-autofocus="true"
         role="dialog"
         style="top: 16px; left: -22px; z-index: 2000;"
+        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
           style="left: 10px; top: 0px;"
         />
+        <p
+          class="euiScreenReaderOnly"
+          id="htmlId"
+        >
+          You are in a dialog. To close this dialog, hit escape.
+        </p>
         <div />
       </div>
     </div>
@@ -275,16 +302,25 @@ exports[`EuiPopover props offset with arrow 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-describedby="htmlId"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+        data-autofocus="true"
         role="dialog"
         style="top: 26px; left: -22px; z-index: 2000;"
+        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
           style="left: 10px; top: 0px;"
         />
+        <p
+          class="euiScreenReaderOnly"
+          id="htmlId"
+        >
+          You are in a dialog. To close this dialog, hit escape.
+        </p>
         <div />
       </div>
     </div>
@@ -323,15 +359,24 @@ exports[`EuiPopover props offset without arrow 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-describedby="htmlId"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen euiPopover__panel-noArrow"
+        data-autofocus="true"
         role="dialog"
         style="top: 18px; left: -22px; z-index: 2000;"
+        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
         />
+        <p
+          class="euiScreenReaderOnly"
+          id="htmlId"
+        >
+          You are in a dialog. To close this dialog, hit escape.
+        </p>
         <div />
       </div>
     </div>
@@ -472,16 +517,25 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-describedby="htmlId"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen test"
+        data-autofocus="true"
         role="dialog"
         style="top: 16px; left: -22px; z-index: 2000;"
+        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
           style="left: 10px; top: 0px;"
         />
+        <p
+          class="euiScreenReaderOnly"
+          id="htmlId"
+        >
+          You are in a dialog. To close this dialog, hit escape.
+        </p>
         <div />
       </div>
     </div>
@@ -519,16 +573,25 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-describedby="htmlId"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+        data-autofocus="true"
         role="dialog"
         style="top: 16px; left: -22px; z-index: 2000;"
+        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
           style="left: 10px; top: 0px;"
         />
+        <p
+          class="euiScreenReaderOnly"
+          id="htmlId"
+        >
+          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 21c980ecb12..125bb920a1a 100644
--- a/src/components/popover/popover.test.tsx
+++ b/src/components/popover/popover.test.tsx
@@ -103,6 +103,7 @@ describe('EuiPopover', () => {
 
         const component = mount(
           <EuiPopover
+            ownFocus={false}
             id={getId()}
             button={<button />}
             closePopover={closePopoverHandler}
@@ -207,6 +208,7 @@ describe('EuiPopover', () => {
         const component = mount(
           <div>
             <EuiPopover
+              ownFocus={false}
               id={getId()}
               isOpen
               button={<button />}
@@ -224,7 +226,6 @@ describe('EuiPopover', () => {
             <EuiPopover
               id={getId()}
               isOpen
-              ownFocus
               button={<button />}
               closePopover={() => {}}
             />
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index 9cf2b0191c4..fbc7f6b81f1 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -297,7 +297,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 06905a5e651..b1ef26ba4d1 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 653b43674b9..afd829368db 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}

From f43f5a8a0377a2cdd317cd96dcab7c5dccf15d4e Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 5 Nov 2020 16:19:44 +0000
Subject: [PATCH 3/8] Trap focus example

---
 src-docs/src/views/popover/trap_focus.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src-docs/src/views/popover/trap_focus.js b/src-docs/src/views/popover/trap_focus.js
index 973943043ee..c1109085e1b 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}

From e6b48c46c1c70e49b5115c51bc8b7a83a17a239f Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 5 Nov 2020 17:26:30 +0000
Subject: [PATCH 4/8] Removing ownFocus prop

---
 .../super_date_picker/date_popover/date_popover_button.tsx       | 1 -
 1 file changed, 1 deletion(-)

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 918775d6a23..4da6acccebd 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}

From f5868e337326d8608057211e3addda19297a352e Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 5 Nov 2020 18:17:55 +0000
Subject: [PATCH 5/8] Adding CL

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d7464b88ce4..db93c41a2fb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Added `EuiColorPaletteDisplay` component ([#3865](https://github.com/elastic/eui/pull/3865)) 
 - Added `initialFocusedItemIndex` support to `EuiContextMenuPanelDescriptor` ([#4223](https://github.com/elastic/eui/pull/4223))
+- Updated the default of the `EuiPopover`s `ownFocus` prop from `false` to `true` ([#4228](https://github.com/elastic/eui/pull/4228))
 
 **Bug fixes**
 

From 61eed48999d3ed0aef1430b2cb39983df3c040d3 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 6 Nov 2020 16:29:47 +0000
Subject: [PATCH 6/8] Test for default ownFocus and  tour step popover ownFocus
 changed to false.

---
 .../popover/__snapshots__/popover.test.tsx.snap     | 13 +++++++++++--
 src/components/popover/popover.test.tsx             |  3 +--
 src/components/tour/tour_step.tsx                   |  1 +
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap
index 167e356c59b..1d5d96b0759 100644
--- a/src/components/popover/__snapshots__/popover.test.tsx.snap
+++ b/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -389,7 +389,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"
@@ -414,16 +414,25 @@ exports[`EuiPopover props ownFocus defaults to false 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-describedby="htmlId"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+        data-autofocus="true"
         role="dialog"
         style="top: 16px; left: -22px; z-index: 2000;"
+        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
           style="left: 10px; top: 0px;"
         />
+        <p
+          class="euiScreenReaderOnly"
+          id="htmlId"
+        >
+          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 125bb920a1a..1bcdbdfa5d9 100644
--- a/src/components/popover/popover.test.tsx
+++ b/src/components/popover/popover.test.tsx
@@ -204,11 +204,10 @@ describe('EuiPopover', () => {
     });
 
     describe('ownFocus', () => {
-      test('defaults to false', () => {
+      test('defaults to true', () => {
         const component = mount(
           <div>
             <EuiPopover
-              ownFocus={false}
               id={getId()}
               isOpen
               button={<button />}
diff --git a/src/components/tour/tour_step.tsx b/src/components/tour/tour_step.tsx
index 96707fba7b4..424ed391abe 100644
--- a/src/components/tour/tour_step.tsx
+++ b/src/components/tour/tour_step.tsx
@@ -213,6 +213,7 @@ export const EuiTourStep: FunctionComponent<EuiTourStepProps> = ({
       button={children}
       closePopover={closePopover}
       isOpen={isStepOpen}
+      ownFocus={false}
       panelClassName={classes}
       panelStyle={newStyle || style}
       offset={hasBeacon ? 10 : 0}

From ab9358d5ad772bc40e915b166d7a70007f9d55dc Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Mon, 9 Nov 2020 10:56:27 +0000
Subject: [PATCH 7/8] Update src-docs/src/views/popover/popover_example.js

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 src-docs/src/views/popover/popover_example.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/popover/popover_example.js b/src-docs/src/views/popover/popover_example.js
index 939cf172e20..7454b4777b2 100644
--- a/src-docs/src/views/popover/popover_example.js
+++ b/src-docs/src/views/popover/popover_example.js
@@ -421,7 +421,7 @@ export const PopoverExample = {
         <>
           <p>
             If the popover should not trap focus within itself, then you can
-            remove it <EuiCode language="ts">{'ownFocus={false}'}</EuiCode>.
+            remove it with <EuiCode language="ts">{'ownFocus={false}'}</EuiCode>.
           </p>
           <EuiCallOut
             iconType="accessibility"

From 79ce953c8eef0f9b42cbfe6297b1e58a09fa4ca9 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Mon, 9 Nov 2020 11:05:41 +0000
Subject: [PATCH 8/8] Fixing tests

---
 src-docs/src/views/popover/popover_example.js       |  3 ++-
 .../popover/__snapshots__/popover.test.tsx.snap     | 13 ++-----------
 src/components/popover/popover.test.tsx             |  3 ++-
 3 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src-docs/src/views/popover/popover_example.js b/src-docs/src/views/popover/popover_example.js
index 7454b4777b2..f5418e77ff9 100644
--- a/src-docs/src/views/popover/popover_example.js
+++ b/src-docs/src/views/popover/popover_example.js
@@ -421,7 +421,8 @@ export const PopoverExample = {
         <>
           <p>
             If the popover should not trap focus within itself, then you can
-            remove it with <EuiCode language="ts">{'ownFocus={false}'}</EuiCode>.
+            remove it with <EuiCode language="ts">{'ownFocus={false}'}</EuiCode>
+            .
           </p>
           <EuiCallOut
             iconType="accessibility"
diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap
index 1d5d96b0759..4eaeeaa32a6 100644
--- a/src/components/popover/__snapshots__/popover.test.tsx.snap
+++ b/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -445,7 +445,7 @@ exports[`EuiPopover props ownFocus defaults to true 1`] = `
 </div>
 `;
 
-exports[`EuiPopover props ownFocus renders true 1`] = `
+exports[`EuiPopover props ownFocus renders false 1`] = `
 <div>
   <div
     class="euiPopover euiPopover--anchorDownCenter euiPopover-isOpen"
@@ -470,25 +470,16 @@ exports[`EuiPopover props ownFocus renders true 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-describedby="htmlId"
-        aria-live="off"
+        aria-live="assertive"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
-        data-autofocus="true"
         role="dialog"
         style="top: 16px; left: -22px; z-index: 2000;"
-        tabindex="0"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
           style="left: 10px; top: 0px;"
         />
-        <p
-          class="euiScreenReaderOnly"
-          id="htmlId"
-        >
-          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 1bcdbdfa5d9..e25fa3d2048 100644
--- a/src/components/popover/popover.test.tsx
+++ b/src/components/popover/popover.test.tsx
@@ -219,10 +219,11 @@ describe('EuiPopover', () => {
         expect(component.render()).toMatchSnapshot();
       });
 
-      test('renders true', () => {
+      test('renders false', () => {
         const component = mount(
           <div>
             <EuiPopover
+              ownFocus={false}
               id={getId()}
               isOpen
               button={<button />}