Improve screen reader experience further with aria-atomic="false"

elastic · May 16, 2024 · 03949be · 03949be
1 parent 399aa7e
commit 03949be
Showing 1 changed file with 14 additions and 7 deletions.
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>
-          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 aria-live="polite">{screenReaderInstructions}</span>
+            <span aria-live="polite" aria-atomic="false">
+              {screenReaderInstructions}
+            </span>
           </EuiScreenReaderOnly>
         </div>
         <div className="react-datepicker__time">