Merge pull request #1169 from searchspring/checkbox-a11y

checkbox a11y
searchspring · Sep 24, 2024 · 0721bfc · 0721bfc
2 parents 9476134 + ff633ea
commit 0721bfc
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/packages/snap-preact-components/src/components/Molecules/Checkbox/Checkbox.test.tsx b/packages/snap-preact-components/src/components/Molecules/Checkbox/Checkbox.test.tsx
@@ -1,6 +1,6 @@
 import { h } from 'preact';
 
-import { render } from '@testing-library/preact';
+import { render, waitFor } from '@testing-library/preact';
 import userEvent from '@testing-library/user-event';
 
 import { Checkbox } from './Checkbox';
@@ -72,6 +72,20 @@ describe('Checkbox Component', () => {
 			expect(clickFn).toHaveBeenCalled();
 		});
 
+		it('adjusts aria attributes', async () => {
+			const rendered = render(<Checkbox />);
+
+			const checkboxElement = rendered.container.querySelector('.ss__checkbox')!;
+
+			expect(checkboxElement.getAttribute('aria-checked')).toBe('false');
+
+			userEvent.click(checkboxElement);
+
+			await waitFor(() => {
+				expect(checkboxElement.getAttribute('aria-checked')).toBe('true');
+			});
+		});
+
 		it('renders with additional style using prop', () => {
 			const style = {
 				padding: '20px',
@@ -104,6 +118,7 @@ describe('Checkbox Component', () => {
 			const rendered = render(<Checkbox disabled onClick={clickFn} />);
 			const checkboxElement = rendered.container.querySelector('.ss__checkbox');
 
+			expect(checkboxElement?.getAttribute('aria-disabled')).toBe('true');
 			expect(checkboxElement?.className.match(/disabled/)).toBeTruthy();
 			if (checkboxElement) userEvent.click(checkboxElement);
 			expect(clickFn).not.toHaveBeenCalled();

diff --git a/packages/snap-preact-components/src/components/Molecules/Checkbox/Checkbox.tsx b/packages/snap-preact-components/src/components/Molecules/Checkbox/Checkbox.tsx
@@ -112,6 +112,7 @@ export const Checkbox = observer((properties: CheckboxProps): JSX.Element => {
 					{...styling}
 					className={classnames('ss__checkbox', { 'ss__checkbox--disabled': disabled }, className)}
 					type="checkbox"
+					aria-checked={checkedState}
 					onClick={(e) => clickFunc(e)}
 					disabled={disabled}
 					checked={checkedState}
@@ -122,8 +123,9 @@ export const Checkbox = observer((properties: CheckboxProps): JSX.Element => {
 					className={classnames('ss__checkbox', { 'ss__checkbox--disabled': disabled }, className)}
 					onClick={(e) => clickFunc(e)}
 					ref={(e) => (!disableA11y ? useA11y(e) : null)}
-					aria-label={`${disabled ? 'disabled' : ''} ${checkedState ? 'checked' : 'unchecked'} checkbox`}
+					aria-disabled={disabled}
 					role="checkbox"
+					aria-checked={checkedState}
 				>
 					{checkedState ? <Icon {...subProps.icon} /> : <span className="ss__checkbox__empty" />}
 				</span>

diff --git a/packages/snap-preact-components/src/components/Molecules/List/List.test.tsx b/packages/snap-preact-components/src/components/Molecules/List/List.test.tsx
@@ -333,7 +333,7 @@ describe('List Component', () => {
 		expect(optionElements).toBeInTheDocument();
 
 		expect(optionElements.innerHTML).toBe(
-			`<span class=\"ss__checkbox ss-v51376-I\" aria-label=\" unchecked checkbox\" role=\"checkbox\"><span class=\"ss__checkbox__empty\"></span></span>`
+			`<span class=\"ss__checkbox ss-v51376-I\" role=\"checkbox\" aria-checked=\"false\"><span class=\"ss__checkbox__empty\"></span></span>`
 		);
 
 		await userEvent.click(optionElements);