[terra-time-input] Added visual label and status message to announce invalid input

packages/terra-framework-docs/CHANGELOG.md

@@ -2,9 +2,12 @@
 
 ## Unreleased
 
+* Updated
+  * Updated `terra-time-input` example to have visual label.
+
 * Added
   * Added implementation guide for `terra-table`.
-  
+
 * Changed
   * Updates `terra-theme-provider` examples to show the new ability to specify a theme density.
 

packages/terra-framework-docs/src/terra-dev-site/doc/time-input/example/TimeInputNoDefaultTime.jsx

@@ -1,9 +1,6 @@
 import React from 'react';
 import TimeInput from 'terra-time-input';
-import classNames from 'classnames/bind';
-import styles from './TimeInputDocCommon.module.scss';
-
-const cx = classNames.bind(styles);
+import Field from 'terra-form-field';
 
 class timeInput extends React.Component {
   constructor(props) {
@@ -19,14 +16,16 @@ class timeInput extends React.Component {
   render() {
     return (
       <div>
-        <p>
-          Time Provided:
-          <span className={cx('time-wrapper')}>{this.state.time}</span>
-        </p>
-        <TimeInput
-          name="time-input-default"
-          onChange={this.handleTimeChange}
-        />
+        <Field
+          label={`Time Provided: ${this.state.time}`}
+          htmlFor="time-input-value"
+        >
+          <TimeInput
+            a11yLabel="Time Provided"
+            name="time-input-default"
+            onChange={this.handleTimeChange}
+          />
+        </Field>
       </div>
     );
   }

packages/terra-time-input/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated screen response to announce when invalid time is entered.
+
 ## 4.58.0 - (October 11, 2023)
 
 * Changed

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 */