Updating EuiPopover screen reader text to include mobile cues. (#6567)

* Updating EuiPopover screen reader text to include mobile cues. * Updating screen reader help text in EuiPopver and i18nJSON. * Updating EuiPopover snapshots. * Added a changelog entry. * Edited SR text to explain close actions more clearly. * Snapshots updated to use latest screen reader text.
elastic · Feb 1, 2023 · 5ccdbed · 5ccdbed
1 parent a8de8df
commit 5ccdbed
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 17 deletions.
diff --git a/i18ntokens.json b/i18ntokens.json
@@ -5121,7 +5121,7 @@
   },
   {
     "token": "euiPopover.screenReaderAnnouncement",
-    "defString": "You are in a dialog. To close this dialog, hit escape.",
+    "defString": "You are in a dialog. Press Escape, or tap/click outside the dialog to close.",
     "highlighting": "string",
     "loc": {
       "start": {

diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
     class="emotion-euiScreenReaderOnly"
     id="generated-id"
   >
-    You are in a dialog. To close this dialog, hit escape.
+    You are in a dialog. Press Escape, or tap/click outside the dialog to close.
   </p>
   <div>
     <div>

diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
     class="emotion-euiScreenReaderOnly"
     id="generated-id"
   >
-    You are in a dialog. To close this dialog, hit escape.
+    You are in a dialog. Press Escape, or tap/click outside the dialog to close.
   </p>
   <div>
     <div

diff --git a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`useDataGridKeyboardShortcuts returns a popover containing a list of key
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, hit escape.
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
         </p>
         <div>
           <div

diff --git a/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap b/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap
@@ -64,7 +64,7 @@ exports[`EuiPopover snapshot testing renders with popover contents 1`] = `
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, hit escape.
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
         </p>
         <div>
           Hello world

diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -121,7 +121,7 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, hit escape.
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
         </p>
         <div />
       </div>
@@ -175,7 +175,7 @@ exports[`EuiPopover props buffer 1`] = `
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, hit escape.
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
         </p>
         <div />
       </div>
@@ -229,7 +229,7 @@ exports[`EuiPopover props buffer for all sides 1`] = `
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, hit escape.
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
         </p>
         <div />
       </div>
@@ -296,7 +296,7 @@ exports[`EuiPopover props focusTrapProps is rendered 1`] = `
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, hit escape.
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
         </p>
         <div />
       </div>
@@ -363,7 +363,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, hit escape.
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
         </p>
         <div />
       </div>
@@ -417,7 +417,7 @@ exports[`EuiPopover props offset with arrow 1`] = `
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, hit escape.
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
         </p>
         <div />
       </div>
@@ -466,7 +466,7 @@ exports[`EuiPopover props offset without arrow 1`] = `
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, hit escape.
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
         </p>
         <div />
       </div>
@@ -520,7 +520,7 @@ exports[`EuiPopover props ownFocus defaults to true 1`] = `
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, hit escape.
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
         </p>
         <div />
       </div>
@@ -619,7 +619,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, hit escape.
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
         </p>
         <div />
       </div>
@@ -673,7 +673,7 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, hit escape.
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
         </p>
         <div />
       </div>
@@ -728,7 +728,7 @@ exports[`EuiPopover props panelProps is rendered 1`] = `
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, hit escape.
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
         </p>
         <div />
       </div>

diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
@@ -687,7 +687,7 @@ export class EuiPopover extends Component<Props, State> {
               {ownFocus && (
                 <EuiI18n
                   token="euiPopover.screenReaderAnnouncement"
-                  default="You are in a dialog. To close this dialog, hit escape."
+                  default="You are in a dialog. Press Escape, or tap/click outside the dialog to close."
                 />
               )}
               {popoverScreenReaderText}

diff --git a/upcoming_changelogs/6567.md b/upcoming_changelogs/6567.md
@@ -0,0 +1 @@
+- Updated `EuiPopover` screen reader instructions for mobile and click behaviors
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Updated `EuiPopover` screen reader instructions for mobile and click behaviors