Update: status message

packages/terra-time-input/src/TimeInput.jsx

@@ -8,6 +8,7 @@ import { injectIntl } from 'react-intl';
 import { v4 as uuidv4 } from 'uuid';
 
 import * as KeyCode from 'keycode-js';
+import VisuallyHiddenText from 'terra-visually-hidden-text';
 import TimeUtil from './TimeUtil';
 import styles from './TimeInput.module.scss';
 
@@ -179,6 +180,9 @@ class TimeInput extends React.Component {
     this.handleMeridiemButtonChange = this.handleMeridiemButtonChange.bind(this);
     this.getCurrentTime = this.getCurrentTime.bind(this);
     this.setTime = this.setTime.bind(this);
+    this.visuallyHiddenComponent = null;
+    this.handleInvalidInputChange = this.handleInvalidInputChange.bind(this);
+    this.setVisuallyHiddenComponent = this.setVisuallyHiddenComponent.bind(this);
 
     let hour = TimeUtil.splitHour(value);
     let meridiem;
@@ -251,6 +255,12 @@ class TimeInput extends React.Component {
     });
   }
 
+  handleInvalidInputChange = () => {
+    if (this.visuallyHiddenComponent) {
+      this.visuallyHiddenComponent.innerText = this.props.intl.formatMessage({ id: 'Terra.timeInput.invalidTime' });
+    }
+  };
+
   handleFocus(event) {
     if (this.props.onFocus && !this.timeInputContainer.current.contains(event.relatedTarget)) {
       this.props.onFocus(event);
@@ -342,6 +352,7 @@ class TimeInput extends React.Component {
 
   handleHourChange(event) {
     if (!TimeUtil.validNumericInput(event.target.value)) {
+      this.handleInvalidInputChange();
       return;
     }
 
@@ -387,6 +398,7 @@ class TimeInput extends React.Component {
 
   handleMinuteChange(event) {
     if (!TimeUtil.validNumericInput(event.target.value)) {
+      this.handleInvalidInputChange();
       return;
     }
 
@@ -422,6 +434,7 @@ class TimeInput extends React.Component {
 
   handleSecondChange(event) {
     if (!TimeUtil.validNumericInput(event.target.value)) {
+      this.handleInvalidInputChange();
       return;
     }
 
@@ -741,6 +754,10 @@ class TimeInput extends React.Component {
     this.handleValueChange(event, TimeUtil.inputType.HOUR, this.state.hour.toString(), selectedKey);
   }
 
+  setVisuallyHiddenComponent = (node) => {
+    this.visuallyHiddenComponent = node;
+  };
+
   get a11yLabel() {
     const { a11yLabel, intl } = this.props;
     /**
@@ -1153,6 +1170,12 @@ class TimeInput extends React.Component {
         Screen readers should not read this because it will not make sense.
         */}
         <div aria-hidden className={cx('format-text')}>{mask()}</div>
+        <VisuallyHiddenText
+          aria-atomic="true"
+          aria-relevant="all"
+          aria-live="assertive"
+          refCallback={this.setVisuallyHiddenComponent}
+        />
       </div>
     );
     /* eslint-enable jsx-a11y/no-static-element-interactions */

packages/terra-time-input/translations/de.json

@@ -18,5 +18,6 @@
   "Terra.timeInput.textValueTwentyFourHourMinute": "{hour}:{minute}",
   "Terra.timeInput.textValueTwentyFourHourMinuteSecond": "{hour}:{minute}:{second}",
   "Terra.timeInput.timeFormatLabel": "Zeitformat:",
-  "Terra.timeInput.timeSpacer": ":"
+  "Terra.timeInput.timeSpacer": ":",
+  "Terra.timeInput.invalidTime": "Please enter a valid Time"
 }

packages/terra-time-input/translations/en.json

@@ -18,5 +18,6 @@
   "Terra.timeInput.textValueTwentyFourHourMinute": "{hour}:{minute}",
   "Terra.timeInput.textValueTwentyFourHourMinuteSecond": "{hour}:{minute}:{second}",
   "Terra.timeInput.timeFormatLabel": "Time Format:",
-  "Terra.timeInput.timeSpacer": ":"
+  "Terra.timeInput.timeSpacer": ":",
+  "Terra.timeInput.invalidTime": "Please enter a valid Time"
 }

packages/terra-time-input/translations/es-ES.json

@@ -1,3 +1,4 @@
 {
-  "Terra.timeInput.seconds": "segundos"
+  "Terra.timeInput.seconds": "segundos",
+  "Terra.timeInput.invalidTime": "Please enter a valid Time"
 }

packages/terra-time-input/translations/es-US.json

@@ -1,3 +1,4 @@
 {
-  "Terra.timeInput.seconds": "segundos"
+  "Terra.timeInput.seconds": "segundos",
+  "Terra.timeInput.invalidTime": "Please enter a valid Time"
 }

packages/terra-time-input/translations/es.json

@@ -18,5 +18,6 @@
   "Terra.timeInput.textValueTwentyFourHourMinute": "{hour}:{minute}",
   "Terra.timeInput.textValueTwentyFourHourMinuteSecond": "{hour}:{minute}:{second}",
   "Terra.timeInput.timeFormatLabel": "Formato de hora:",
-  "Terra.timeInput.timeSpacer": ":"
+  "Terra.timeInput.timeSpacer": ":",
+  "Terra.timeInput.invalidTime": "Please enter a valid Time"
 }

packages/terra-time-input/translations/fr-FR.json

@@ -1,3 +1,4 @@
 {
-  "Terra.timeInput.timeFormatLabel": "Format d'heure:"
+  "Terra.timeInput.timeFormatLabel": "Format d'heure:",
+  "Terra.timeInput.invalidTime": "Please enter a valid Time"
 }

packages/terra-time-input/translations/fr.json

@@ -18,5 +18,6 @@
   "Terra.timeInput.textValueTwentyFourHourMinute": "{hour}:{minute}",
   "Terra.timeInput.textValueTwentyFourHourMinuteSecond": "{hour}:{minute}:{second}",
   "Terra.timeInput.timeFormatLabel": "Format d'heure :",
-  "Terra.timeInput.timeSpacer": ":"
+  "Terra.timeInput.timeSpacer": ":",
+  "Terra.timeInput.invalidTime": "Please enter a valid Time"
 }

packages/terra-time-input/translations/nl.json

@@ -18,5 +18,6 @@
   "Terra.timeInput.textValueTwentyFourHourMinute": "{hour}:{minute}",
   "Terra.timeInput.textValueTwentyFourHourMinuteSecond": "{hour}:{minute}:{second}",
   "Terra.timeInput.timeFormatLabel": "Tijdformaat:",
-  "Terra.timeInput.timeSpacer": ":"
+  "Terra.timeInput.timeSpacer": ":",
+  "Terra.timeInput.invalidTime": "Please enter a valid Time"
 }

packages/terra-time-input/translations/pt.json

@@ -18,5 +18,6 @@
   "Terra.timeInput.textValueTwentyFourHourMinute": "{hour}:{minute}",
   "Terra.timeInput.textValueTwentyFourHourMinuteSecond": "{hour}:{minute}:{second}",
   "Terra.timeInput.timeFormatLabel": "Formato da hora:",
-  "Terra.timeInput.timeSpacer": ":"
+  "Terra.timeInput.timeSpacer": ":",
+  "Terra.timeInput.invalidTime": "Please enter a valid Time"
 }

packages/terra-time-input/translations/sv-SE.json

@@ -1,3 +1,4 @@
 {
-  "Terra.timeInput.seconds": "Sekunder"
+  "Terra.timeInput.seconds": "Sekunder",
+  "Terra.timeInput.invalidTime": "Please enter a valid Time"
 }

packages/terra-time-input/translations/sv.json

@@ -18,5 +18,6 @@
   "Terra.timeInput.textValueTwentyFourHourMinute": "{hour}:{minute}",
   "Terra.timeInput.textValueTwentyFourHourMinuteSecond": "{hour}:{minute}:{second}",
   "Terra.timeInput.timeFormatLabel": "Tidsformat:",
-  "Terra.timeInput.timeSpacer": ":"
+  "Terra.timeInput.timeSpacer": ":",
+  "Terra.timeInput.invalidTime": "Please enter a valid Time"
 }