fix(a11y): error message announcement in form elements (VIV-1593) (#1662

) * fix: error message announcement in form elements * chore: fixes stylelint * chore: address stylelint * chore: fixes broken ui test * chore: addresses pr comments * chore: fixes broken unit test --------- Co-authored-by: James Taylor <jstaylor@vonht2fg32k90.home>
Vonage · Apr 10, 2024 · 3bc7707 · 3bc7707
1 parent 80775df
commit 3bc7707
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/libs/components/src/lib/date-range-picker/ui.test.ts b/libs/components/src/lib/date-range-picker/ui.test.ts
@@ -185,7 +185,7 @@ test.describe('constraints validation', async () => {
 
 		await expect(
 			page.locator('vwc-date-range-picker .error-message')
-		).toBeVisible();
+		).not.toHaveClass(/sr-only/);
 	});
 
 	test('should hide a validation error after resetting the form', async ({
@@ -206,6 +206,6 @@ test.describe('constraints validation', async () => {
 
 		await expect(
 			page.locator('vwc-date-range-picker .error-message')
-		).not.toBeVisible();
+		).toHaveClass(/sr-only/);
 	});
 });
diff --git a/libs/components/src/shared/patterns/form-elements/form-elements.spec.ts b/libs/components/src/shared/patterns/form-elements/form-elements.spec.ts
@@ -347,7 +347,7 @@ describe('getFeedbackTemplate', () => {
 
 	const getMessage = (type: string) => {
 		const messageEl = element.shadowRoot!.querySelector(
-			`.${type}-message.message--visible`
+			`.${type}-message.message--visible:not(.sr-only)`
 		);
 		if (!messageEl) {
 			return null;

diff --git a/libs/components/src/shared/patterns/form-elements/form-elements.ts b/libs/components/src/shared/patterns/form-elements/form-elements.ts
@@ -176,6 +176,7 @@ type FeedbackConfig = {
 		name: string;
 		slottedContentProperty: '_helperTextSlottedContent';
 	};
+	role: 'status' | 'none';
 };
 const feedback: Record<string, FeedbackConfig> = {
 	helper: {
@@ -185,16 +186,19 @@ const feedback: Record<string, FeedbackConfig> = {
 			name: 'helper-text',
 			slottedContentProperty: '_helperTextSlottedContent',
 		},
+		role: 'none',
 	},
 	error: {
 		messageProperty: 'errorValidationMessage',
 		className: 'error',
 		iconType: 'info-line',
+		role: 'status',
 	},
 	success: {
 		messageProperty: 'successText',
 		className: 'success',
 		iconType: 'check-circle-line',
+		role: 'none',
 	},
 };
 
@@ -249,10 +253,14 @@ function getFeedbackTypeTemplate(
 
 	return html<SomeFormElement>`<div
 		class="${(x) =>
-			classNames('message', `${config.className}-message`, [
-				'message--visible',
-				shouldShow(x),
-			])}"
+			classNames(
+				'message',
+				`${config.className}-message`,
+				['message--visible', config.role === 'status' || shouldShow(x)],
+				['sr-only', !shouldShow(x)]
+			)}"
+		role="${config.role}"
+		aria-atomic="false"
 	>
 		${when(
 			(x) => shouldShow(x) && config.iconType,

diff --git a/libs/components/src/shared/patterns/form-elements/message.scss b/libs/components/src/shared/patterns/form-elements/message.scss
@@ -2,6 +2,16 @@
 
 $low-ink-color: --_low-ink-color;
 
+.sr-only {
+	position: absolute;
+	overflow: hidden;
+	width: 1px;
+	height: 1px;
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+
 .message {
 	display: none;
 	contain: inline-size;