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 37439948249..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 = ( -

- 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.`} -

+ <> +

+ You are a in a time selector. Use the up and down keys to select from + other common times then press enter to confirm. +

+ {/* Note: needs to be separate paragraph nodes for aria-atomic="false" to work correctly */} +

+ {this.state.preSelection ? `${formatDate(this.state.preSelection, this.timeFormat)} is currently + focused.`: `No time is currently focused.`} +

+ ); } @@ -362,7 +367,9 @@ export default class Time extends React.Component { {this.props.timeCaption} - {screenReaderInstructions} + + {screenReaderInstructions} +