fix(selectable box): screen-reader accessibility when box is clickable (

VIV-000) (#1907) * fix: selectable-box announced as a toggle btn when clickable * chore: formatting --------- Co-authored-by: James Taylor <jstaylor@vonht2fg32k90.home>
Vonage · Sep 17, 2024 · 512cc7c · 512cc7c
1 parent 40b8a95
commit 512cc7c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/libs/components/src/lib/selectable-box/selectable-box.spec.ts b/libs/components/src/lib/selectable-box/selectable-box.spec.ts
@@ -434,6 +434,7 @@ describe('vwc-selectable-box', () => {
 
 			expect(control?.getAttribute('tabindex')).toBe(null);
 			expect(control?.getAttribute('aria-label')).toBe('Box 1');
+			expect(control?.getAttribute('aria-press')).toBe(null);
 		});
 
 		describe('radio', () => {
@@ -473,7 +474,7 @@ describe('vwc-selectable-box', () => {
 
 			it('should put the correct a11y attributes on the base element', async () => {
 				expect(baseElement?.getAttribute('aria-label')).toBe('Box 1');
-				expect(baseElement?.getAttribute('aria-pressed')).toBe(null);
+				expect(baseElement?.getAttribute('aria-pressed')).toBe('false');
 				expect(baseElement?.getAttribute('role')).toBe('button');
 				expect(baseElement?.getAttribute('tabindex')).toBe('0');
 			});
@@ -518,7 +519,7 @@ describe('vwc-selectable-box', () => {
 
 			it('should put the correct a11y attributes on the base element', async () => {
 				expect(baseElement?.getAttribute('aria-label')).toBe('Box 1');
-				expect(baseElement?.getAttribute('aria-pressed')).toBe(null);
+				expect(baseElement?.getAttribute('aria-pressed')).toBe('false');
 				expect(baseElement?.getAttribute('role')).toBe('button');
 				expect(baseElement?.getAttribute('tabindex')).toBe('0');
 			});

diff --git a/libs/components/src/lib/selectable-box/selectable-box.template.ts b/libs/components/src/lib/selectable-box/selectable-box.template.ts
@@ -84,7 +84,7 @@ export const SelectableBoxTemplate: (
 			tabindex="${(x) => (x.clickableBox || x.clickable ? '0' : null)}"
 			role="${(x) => (x.clickableBox || x.clickable ? 'button' : null)}"
 			aria-pressed="${(x) =>
-				(x.clickableBox || x.clickable) && x.checked ? x.checked : null}"
+				x.clickableBox || x.clickable ? (x.checked ? 'true' : 'false') : null}"
 			aria-label="${(x) =>
 				x.clickableBox || x.clickable ? x.ariaLabel : null}"
 			@keydown="${(x, c) => x._handleKeydown(c.event as KeyboardEvent)}"