From a4d763854a5a165bacbef45e2e882442a1e540cc Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Thu, 16 May 2024 16:28:15 -0700
Subject: [PATCH] [EuiDatePicker][a11y] Fix screen reader announcements on time
 selection and intermittently broken up/down navigation on NVDA/JAWS (#7726)

---
 packages/eui/changelogs/upcoming/7726.md      |  3 +++
 .../date_picker/react-datepicker/src/time.js  | 21 ++++++++++++-------
 2 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 packages/eui/changelogs/upcoming/7726.md

diff --git a/packages/eui/changelogs/upcoming/7726.md b/packages/eui/changelogs/upcoming/7726.md
new file mode 100644
index 00000000000..c273a7c1433
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7726.md
@@ -0,0 +1,3 @@
+**Accessibility**
+
+- Improved `EuiDatePicker` and `EuiSuperDatePicker`'s time selection screen reader UX
diff --git a/packages/eui/src/components/date_picker/react-datepicker/src/time.js b/packages/eui/src/components/date_picker/react-datepicker/src/time.js
index 95215a688d1..5fc6c610b9b 100644
--- a/packages/eui/src/components/date_picker/react-datepicker/src/time.js
+++ b/packages/eui/src/components/date_picker/react-datepicker/src/time.js
@@ -341,12 +341,17 @@ export default class Time extends React.Component {
     let screenReaderInstructions;
     if (this.state.readInstructions) {
       screenReaderInstructions = (
-        <p aria-live>
-          You are a in a time selector. Use the up and down keys to select from
-          other common times then press enter to confirm.
-          {this.state.preSelection ? `${formatDate(this.state.preSelection, this.timeFormat)} is currently
-          focused.`: `No time is currently focused.`}
-        </p>
+        <>
+          <p>
+            You are a in a time selector. Use the up and down keys to select from
+            other common times then press enter to confirm.
+          </p>
+          {/* Note: needs to be separate paragraph nodes for aria-atomic="false" to work correctly */}
+          <p>
+            {this.state.preSelection ? `${formatDate(this.state.preSelection, this.timeFormat)} is currently
+            focused.`: `No time is currently focused.`}
+          </p>
+        </>
       );
     }
 
@@ -362,7 +367,9 @@ export default class Time extends React.Component {
             {this.props.timeCaption}
           </div>
           <EuiScreenReaderOnly>
-            <span>{screenReaderInstructions}</span>
+            <span aria-live="polite" aria-atomic="false">
+              {screenReaderInstructions}
+            </span>
           </EuiScreenReaderOnly>
         </div>
         <div className="react-datepicker__time">