From 5eadefe0ffe4cb8425b5f022e05f1a98ad797b40 Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Mon, 7 Mar 2022 12:13:56 -0500 Subject: [PATCH] Turn error message container into a live regin presently if someone were to cause a validation error with one of the date picker fields, error messages will appear at the bottom of the dialog. However, as these messages are not presently injected into a live region, these error messages will not be exposed to screen reader users - failing wcag 4.1.3 Status Messages. This PR adds an `aria-live=assertive` to the `tsi-errorMessageContainer` which will help ensure that these messages are announced when they dynamically appear. --- src/UXClient/Components/DateTimePicker/DateTimePicker.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/UXClient/Components/DateTimePicker/DateTimePicker.ts b/src/UXClient/Components/DateTimePicker/DateTimePicker.ts index 23c05f13..1d2e8443 100644 --- a/src/UXClient/Components/DateTimePicker/DateTimePicker.ts +++ b/src/UXClient/Components/DateTimePicker/DateTimePicker.ts @@ -190,7 +190,7 @@ class DateTimePicker extends ChartComponent{ this.setFromMillis(fromMillis); this.setToMillis(toMillis); - this.targetElement.append("div").classed("tsi-errorMessageContainer", true); + this.targetElement.append("div").classed("tsi-errorMessageContainer", true).attr('aria-live', 'assertive'); this.createTimePicker(); this.createCalendar(); this.calendarPicker.draw(); @@ -591,4 +591,4 @@ class DateTimePicker extends ChartComponent{ } } -export default DateTimePicker; \ No newline at end of file +export default DateTimePicker;