[EuiDatePicker][a11y] Fix screen reader announcements on time selecti…

…on and intermittently broken up/down navigation on NVDA/JAWS (#7726)
elastic · May 16, 2024 · a4d7638 · a4d7638
1 parent 1b9c4d5
commit a4d7638
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/packages/eui/changelogs/upcoming/7726.md 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
@@ -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">