From 58f236c3dcf1af75cee4e9cbe7658ba047eaac59 Mon Sep 17 00:00:00 2001
From: Chris <chris.frazier@searchspring.com>
Date: Tue, 24 Sep 2024 08:24:40 -0700
Subject: [PATCH 1/3] refactor(preact-components/checkbox): some small a11y
 changes to checkbox component

---
 .../src/components/Molecules/Checkbox/Checkbox.tsx            | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/snap-preact-components/src/components/Molecules/Checkbox/Checkbox.tsx b/packages/snap-preact-components/src/components/Molecules/Checkbox/Checkbox.tsx
index f41060fef..7d060832f 100644
--- 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>

From 2658c64f98a7327c639a87d94404f0dced635bbd Mon Sep 17 00:00:00 2001
From: Chris <chris.frazier@searchspring.com>
Date: Tue, 24 Sep 2024 08:40:03 -0700
Subject: [PATCH 2/3] test(preact-components/list): fixing broken list test

---
 .../src/components/Molecules/List/List.test.tsx                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 38dcd1979..c892d9732 100644
--- 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);

From ff633ea2ec8dbda9c27daf8c7749565174d1db49 Mon Sep 17 00:00:00 2001
From: Chris <chris.frazier@searchspring.com>
Date: Tue, 24 Sep 2024 10:34:28 -0700
Subject: [PATCH 3/3] test(preact-components/checkbox): addings tests for a11y
 attributes

---
 .../Molecules/Checkbox/Checkbox.test.tsx        | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

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
index 7845bc209..a1093a11f 100644
--- 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();