Cleanup code and tests

tests/accessibility/ContextMenu.a11y.test.jsx

@@ -17,7 +17,7 @@ describe("ContextMenu Components Accessibility", () => {
         <ContextMenu>
           <ContextMenuItem onClick={vi.fn()}>Item 1</ContextMenuItem>
           <ContextMenuItem onClick={vi.fn()}>Item 2</ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
       const results = await axe(container);
       expect(results).toHaveNoViolations();
@@ -28,7 +28,7 @@ describe("ContextMenu Components Accessibility", () => {
         <ContextMenu>
           <ContextMenuItem onClick={vi.fn()}>Item 1</ContextMenuItem>
           <ContextMenuItem onClick={vi.fn()}>Item 2</ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       const menu = screen.getByRole("menu");
@@ -44,7 +44,7 @@ describe("ContextMenu Components Accessibility", () => {
         <ContextMenu>
           <ContextMenuItem onClick={vi.fn()}>Item 1</ContextMenuItem>
           <ContextMenuItem onClick={vi.fn()}>Item 2</ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       const firstItem = screen.getByRole("menuitem", { name: "Item 1" });
@@ -58,7 +58,7 @@ describe("ContextMenu Components Accessibility", () => {
       const { container } = render(
         <ContextMenu>
           <ContextMenuItem onClick={vi.fn()}>Test Item</ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
       const results = await axe(container);
       expect(results).toHaveNoViolations();
@@ -68,7 +68,7 @@ describe("ContextMenu Components Accessibility", () => {
       render(
         <ContextMenu>
           <ContextMenuItem onClick={vi.fn()}>Test Item</ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       const item = screen.getByRole("menuitem");
@@ -81,7 +81,7 @@ describe("ContextMenu Components Accessibility", () => {
           <ContextMenuItem onClick={vi.fn()} selected={true}>
             Test Item
           </ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       const item = screen.getByRole("menuitem");
@@ -94,7 +94,7 @@ describe("ContextMenu Components Accessibility", () => {
       render(
         <ContextMenu>
           <ContextMenuItem onClick={onClick}>Test Item</ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       const item = screen.getByRole("menuitem");
@@ -110,7 +110,7 @@ describe("ContextMenu Components Accessibility", () => {
       render(
         <ContextMenu>
           <ContextMenuItem onClick={onClick}>Test Item</ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       const item = screen.getByRole("menuitem");
@@ -124,12 +124,12 @@ describe("ContextMenu Components Accessibility", () => {
       render(
         <ContextMenu>
           <ContextMenuItem onClick={vi.fn()}>Test Item</ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       const item = screen.getByRole("menuitem");
       expect(item).toHaveClass(
-        "hover:!bg-[var(--color-surface-default-secondary)]"
+        "hover:!bg-[var(--color-surface-default-secondary)]",
       );
     });
 
@@ -139,7 +139,7 @@ describe("ContextMenu Components Accessibility", () => {
           <ContextMenuItem onClick={vi.fn()} selected={true}>
             Test Item
           </ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       const item = screen.getByRole("menuitem");
@@ -154,7 +154,7 @@ describe("ContextMenu Components Accessibility", () => {
           <ContextMenuSection title="Test Section">
             <ContextMenuItem onClick={vi.fn()}>Item 1</ContextMenuItem>
           </ContextMenuSection>
-        </ContextMenu>
+        </ContextMenu>,
       );
       const results = await axe(container);
       expect(results).toHaveNoViolations();
@@ -166,7 +166,7 @@ describe("ContextMenu Components Accessibility", () => {
           <ContextMenuSection title="Test Section">
             <ContextMenuItem onClick={vi.fn()}>Item 1</ContextMenuItem>
           </ContextMenuSection>
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       const title = screen.getByText("Test Section");
@@ -179,7 +179,7 @@ describe("ContextMenu Components Accessibility", () => {
           <ContextMenuSection title="Test Section">
             <ContextMenuItem onClick={vi.fn()}>Item 1</ContextMenuItem>
           </ContextMenuSection>
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       const title = screen.getByText("Test Section");
@@ -206,7 +206,7 @@ describe("ContextMenu Components Accessibility", () => {
 
       const divider = screen.getByRole("separator");
       expect(divider).toHaveClass(
-        "border-[var(--color-border-default-tertiary)]"
+        "border-[var(--color-border-default-tertiary)]",
       );
     });
   });
@@ -268,7 +268,7 @@ describe("ContextMenu Components Accessibility", () => {
         <ContextMenu>
           <ContextMenuItem onClick={onClick}>Item 1</ContextMenuItem>
           <ContextMenuItem onClick={vi.fn()}>Item 2</ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       const items = screen.getAllByRole("menuitem");
@@ -284,12 +284,12 @@ describe("ContextMenu Components Accessibility", () => {
       render(
         <ContextMenu>
           <ContextMenuItem onClick={vi.fn()}>Test Item</ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       const item = screen.getByRole("menuitem");
       expect(item).toHaveClass(
-        "text-[var(--color-content-default-brand-primary)]"
+        "text-[var(--color-content-default-brand-primary)]",
       );
     });
 
@@ -297,7 +297,7 @@ describe("ContextMenu Components Accessibility", () => {
       render(
         <ContextMenu>
           <ContextMenuSection title="Test Section" />
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       const title = screen.getByText("Test Section");
@@ -308,12 +308,12 @@ describe("ContextMenu Components Accessibility", () => {
       render(
         <ContextMenu>
           <ContextMenuDivider />
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       const divider = screen.getByRole("separator");
       expect(divider).toHaveClass(
-        "border-[var(--color-border-default-tertiary)]"
+        "border-[var(--color-border-default-tertiary)]",
       );
     });
   });
@@ -328,7 +328,7 @@ describe("ContextMenu Components Accessibility", () => {
               Item 2
             </ContextMenuItem>
           </ContextMenuSection>
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       const menu = screen.getByRole("menu");
@@ -344,7 +344,7 @@ describe("ContextMenu Components Accessibility", () => {
       const { rerender } = render(
         <ContextMenuItem onClick={vi.fn()} selected={false}>
           Test Item
-        </ContextMenuItem>
+        </ContextMenuItem>,
       );
 
       const item = screen.getByRole("menuitem");
@@ -353,7 +353,7 @@ describe("ContextMenu Components Accessibility", () => {
       rerender(
         <ContextMenuItem onClick={vi.fn()} selected={true}>
           Test Item
-        </ContextMenuItem>
+        </ContextMenuItem>,
       );
 
       expect(item).toHaveAttribute("aria-current", "true");
@@ -372,7 +372,7 @@ describe("ContextMenu Components Accessibility", () => {
           </ContextMenuSection>
           <ContextMenuDivider />
           <ContextMenuItem onClick={vi.fn()}>Item 3</ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
       const results = await axe(container);
       expect(results).toHaveNoViolations();
@@ -390,7 +390,7 @@ describe("ContextMenu Components Accessibility", () => {
           <ContextMenuItem onClick={vi.fn()} disabled={true}>
             Disabled Item
           </ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
       const results = await axe(container);
       expect(results).toHaveNoViolations();

tests/accessibility/Input.a11y.test.jsx

@@ -27,7 +27,7 @@ describe("Input Component Accessibility", () => {
 
   test("has no accessibility violations with horizontal label", async () => {
     const { container } = render(
-      <Input label="Test input" labelVariant="horizontal" />
+      <Input label="Test input" labelVariant="horizontal" />,
     );
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -98,7 +98,7 @@ describe("Input Component Accessibility", () => {
       <div>
         <Input label="First input" />
         <Input label="Second input" />
-      </div>
+      </div>,
     );
 
     const firstInput = screen.getByLabelText("First input");
@@ -119,7 +119,7 @@ describe("Input Component Accessibility", () => {
       <div>
         <Input label="First input" />
         <Input label="Second input" />
-      </div>
+      </div>,
     );
 
     const firstInput = screen.getByLabelText("First input");
@@ -184,7 +184,7 @@ describe("Input Component Accessibility", () => {
     const handleBlur = vi.fn();
 
     render(
-      <Input label="Test input" onFocus={handleFocus} onBlur={handleBlur} />
+      <Input label="Test input" onFocus={handleFocus} onBlur={handleBlur} />,
     );
 
     const input = screen.getByRole("textbox");
@@ -206,7 +206,7 @@ describe("Input Component Accessibility", () => {
     render(
       <form>
         <Input name="test-field" label="Test input" />
-      </form>
+      </form>,
     );
 
     const input = screen.getByRole("textbox");
@@ -219,7 +219,7 @@ describe("Input Component Accessibility", () => {
         label="Test input"
         aria-describedby="help-text"
         aria-required="true"
-      />
+      />,
     );
 
     const input = screen.getByRole("textbox");
@@ -239,7 +239,7 @@ describe("Input Component Accessibility", () => {
         <Input label="First input" />
         <Input label="Second input" />
         <Input label="Third input" />
-      </div>
+      </div>,
     );
 
     const firstInput = screen.getByLabelText("First input");

tests/accessibility/Select.a11y.test.jsx

@@ -272,7 +272,9 @@ describe("Select Component Accessibility", () => {
       render(<Select {...defaultProps} />);
 
       const label = screen.getByText("Test Select");
-      expect(label).toHaveClass("text-[var(--color-content-default-primary)]");
+      expect(label).toHaveClass(
+        "text-[var(--color-content-default-secondary)]"
+      );
     });
   });
 

tests/accessibility/Toggle.a11y.test.jsx

@@ -56,7 +56,7 @@ describe("Toggle Accessibility", () => {
   test("handles disabled state accessibility", () => {
     const handleChange = vi.fn();
     render(
-      <Toggle label="Test Toggle" disabled={true} onChange={handleChange} />
+      <Toggle label="Test Toggle" disabled={true} onChange={handleChange} />,
     );
 
     const toggle = screen.getByRole("switch");
@@ -88,7 +88,7 @@ describe("Toggle Accessibility", () => {
 
   test("has no accessibility violations when disabled", async () => {
     const { container } = render(
-      <Toggle label="Test Toggle" disabled={true} />
+      <Toggle label="Test Toggle" disabled={true} />,
     );
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -96,7 +96,7 @@ describe("Toggle Accessibility", () => {
 
   test("has no accessibility violations with icon", async () => {
     const { container } = render(
-      <Toggle label="Test Toggle" showIcon={true} icon="I" />
+      <Toggle label="Test Toggle" showIcon={true} icon="I" />,
     );
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -104,7 +104,7 @@ describe("Toggle Accessibility", () => {
 
   test("has no accessibility violations with text", async () => {
     const { container } = render(
-      <Toggle label="Test Toggle" showText={true} text="Toggle" />
+      <Toggle label="Test Toggle" showText={true} text="Toggle" />,
     );
     const results = await axe(container);
     expect(results).toHaveNoViolations();

tests/accessibility/ToggleGroup.a11y.test.jsx

@@ -46,7 +46,7 @@ describe("ToggleGroup Accessibility", () => {
     const toggleGroup = screen.getByRole("button");
     expect(toggleGroup).toHaveClass("bg-[var(--color-magenta-magenta100)]");
     expect(toggleGroup).toHaveClass(
-      "shadow-[inset_0_0_0_1px_var(--color-border-default-secondary)]"
+      "shadow-[inset_0_0_0_1px_var(--color-border-default-secondary)]",
     );
   });
 
@@ -58,7 +58,7 @@ describe("ToggleGroup Accessibility", () => {
 
   it("has no accessibility violations when focused", async () => {
     const { container } = render(
-      <ToggleGroup state="focus">Focused Toggle</ToggleGroup>
+      <ToggleGroup state="focus">Focused Toggle</ToggleGroup>,
     );
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -66,7 +66,7 @@ describe("ToggleGroup Accessibility", () => {
 
   it("has no accessibility violations when selected", async () => {
     const { container } = render(
-      <ToggleGroup state="selected">Selected Toggle</ToggleGroup>
+      <ToggleGroup state="selected">Selected Toggle</ToggleGroup>,
     );
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -74,7 +74,7 @@ describe("ToggleGroup Accessibility", () => {
 
   it("has no accessibility violations with text", async () => {
     const { container } = render(
-      <ToggleGroup showText={true}>Text Toggle</ToggleGroup>
+      <ToggleGroup showText={true}>Text Toggle</ToggleGroup>,
     );
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -84,7 +84,7 @@ describe("ToggleGroup Accessibility", () => {
     const { container } = render(
       <ToggleGroup showText={false} ariaLabel="Icon Toggle">
         Icon Toggle
-      </ToggleGroup>
+      </ToggleGroup>,
     );
     const results = await axe(container);
     expect(results).toHaveNoViolations();

tests/accessibility/unit/Checkbox.a11y.test.jsx

@@ -15,7 +15,7 @@ describe("Checkbox Accessibility", () => {
 
   test("should not have accessibility violations when checked", async () => {
     const { container } = render(
-      <Checkbox label="Test checkbox" checked={true} />
+      <Checkbox label="Test checkbox" checked={true} />,
     );
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -23,7 +23,7 @@ describe("Checkbox Accessibility", () => {
 
   test("should not have accessibility violations when disabled", async () => {
     const { container } = render(
-      <Checkbox label="Test checkbox" disabled={true} />
+      <Checkbox label="Test checkbox" disabled={true} />,
     );
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -31,7 +31,7 @@ describe("Checkbox Accessibility", () => {
 
   test("should not have accessibility violations in inverse mode", async () => {
     const { container } = render(
-      <Checkbox label="Test checkbox" mode="inverse" />
+      <Checkbox label="Test checkbox" mode="inverse" />,
     );
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -80,7 +80,7 @@ describe("Checkbox Accessibility", () => {
 
     expect(checkbox).toHaveAttribute(
       "aria-label",
-      "Custom accessibility label"
+      "Custom accessibility label",
     );
   });
 
@@ -92,9 +92,7 @@ describe("Checkbox Accessibility", () => {
     expect(checkbox).toHaveAttribute("tabIndex", "0");
 
     // Should not be focusable when disabled
-    rerender(
-      <Checkbox label="Test checkbox disabled" disabled={true} />
-    );
+    rerender(<Checkbox label="Test checkbox disabled" disabled={true} />);
     const disabledCheckbox = screen.getByRole("checkbox");
     expect(disabledCheckbox).toHaveAttribute("tabIndex", "-1");
   });
@@ -131,7 +129,7 @@ describe("Checkbox Accessibility", () => {
 
     // Check for color contrast violations
     const contrastViolations = results.violations.filter(
-      (violation) => violation.id === "color-contrast"
+      (violation) => violation.id === "color-contrast",
     );
     expect(contrastViolations).toHaveLength(0);
   });
@@ -142,7 +140,7 @@ describe("Checkbox Accessibility", () => {
 
     // Check for focus indicator violations
     const focusViolations = results.violations.filter(
-      (violation) => violation.id === "focus-order-semantics"
+      (violation) => violation.id === "focus-order-semantics",
     );
     expect(focusViolations).toHaveLength(0);
   });

tests/accessibility/unit/RadioButton.a11y.test.jsx

@@ -16,7 +16,7 @@ describe("RadioButton Accessibility", () => {
 
   it("updates aria-checked when checked state changes", () => {
     const { rerender } = render(
-      <RadioButton checked={false} label="Test Radio" />
+      <RadioButton checked={false} label="Test Radio" />,
     );
 
     let radioButton = screen.getByRole("radio");
@@ -117,7 +117,7 @@ describe("RadioButton Accessibility", () => {
         <RadioButton label="First Radio" />
         <RadioButton label="Second Radio" />
         <RadioButton label="Third Radio" />
-      </div>
+      </div>,
     );
 
     const radioButtons = screen.getAllByRole("radio");
@@ -132,7 +132,7 @@ describe("RadioButton Accessibility", () => {
         <RadioButton label="Radio 1" />
         <RadioButton label="Radio 2" />
         <RadioButton label="Radio 3" />
-      </div>
+      </div>,
     );
 
     const radioButtons = screen.getAllByRole("radio");
@@ -176,7 +176,7 @@ describe("RadioButton Accessibility", () => {
         checked={false}
         onChange={handleChange}
         label="Focus Radio"
-      />
+      />,
     );
 
     const radioButton = screen.getByRole("radio");
@@ -185,7 +185,11 @@ describe("RadioButton Accessibility", () => {
 
     // Change checked state
     rerender(
-      <RadioButton checked={true} onChange={handleChange} label="Focus Radio" />
+      <RadioButton
+        checked={true}
+        onChange={handleChange}
+        label="Focus Radio"
+      />,
     );
 
     // Should still be focusable
@@ -206,7 +210,7 @@ describe("RadioButton Accessibility", () => {
         <RadioButton label="First Option" />
         <RadioButton label="Second Option" />
         <RadioButton label="Third Option" />
-      </div>
+      </div>,
     );
 
     const radioButtons = screen.getAllByRole("radio");
@@ -220,7 +224,7 @@ describe("RadioButton Accessibility", () => {
 
   it("has proper form association", () => {
     render(
-      <RadioButton name="test-radio" value="test-value" label="Form Radio" />
+      <RadioButton name="test-radio" value="test-value" label="Form Radio" />,
     );
 
     const hiddenInput = screen.getByDisplayValue("test-value");

tests/accessibility/unit/RadioGroup.a11y.test.jsx

@@ -20,7 +20,7 @@ describe("RadioGroup Accessibility", () => {
 
   it("has proper ARIA attributes on radiogroup", () => {
     render(
-      <RadioGroup options={defaultOptions} aria-label="Test Radio Group" />
+      <RadioGroup options={defaultOptions} aria-label="Test Radio Group" />,
     );
 
     const radioGroup = screen.getByRole("radiogroup");
@@ -50,7 +50,7 @@ describe("RadioGroup Accessibility", () => {
 
   it("updates selection state correctly", () => {
     const { rerender } = render(
-      <RadioGroup options={defaultOptions} value="option1" />
+      <RadioGroup options={defaultOptions} value="option1" />,
     );
 
     let radioButtons = screen.getAllByRole("radio");
@@ -98,7 +98,7 @@ describe("RadioGroup Accessibility", () => {
         options={defaultOptions}
         value="option1"
         onChange={handleChange}
-      />
+      />,
     );
 
     const radioButtons = screen.getAllByRole("radio");
@@ -125,7 +125,7 @@ describe("RadioGroup Accessibility", () => {
         options={defaultOptions}
         value="option1"
         onChange={handleChange}
-      />
+      />,
     );
 
     const radioButtons = screen.getAllByRole("radio");
@@ -144,7 +144,7 @@ describe("RadioGroup Accessibility", () => {
         options={defaultOptions}
         value="option1"
         onChange={handleChange}
-      />
+      />,
     );
 
     const radioButtons = screen.getAllByRole("radio");
@@ -163,7 +163,7 @@ describe("RadioGroup Accessibility", () => {
         options={defaultOptions}
         value="option1"
         onChange={handleChange}
-      />
+      />,
     );
 
     const radioButtons = screen.getAllByRole("radio");
@@ -190,7 +190,7 @@ describe("RadioGroup Accessibility", () => {
       <div>
         <RadioGroup options={defaultOptions} />
         <RadioGroup options={defaultOptions} />
-      </div>
+      </div>,
     );
 
     const radioButtons = screen.getAllByRole("radio");
@@ -212,7 +212,7 @@ describe("RadioGroup Accessibility", () => {
 
   it("has proper form association", () => {
     render(
-      <RadioGroup options={defaultOptions} name="test-group" value="option2" />
+      <RadioGroup options={defaultOptions} name="test-group" value="option2" />,
     );
 
     const hiddenInputs = screen.getAllByDisplayValue("option1");
@@ -235,7 +235,7 @@ describe("RadioGroup Accessibility", () => {
         options={defaultOptions}
         value="option1"
         onChange={handleChange}
-      />
+      />,
     );
 
     const radioButtons = screen.getAllByRole("radio");
@@ -248,7 +248,7 @@ describe("RadioGroup Accessibility", () => {
         options={defaultOptions}
         value="option2"
         onChange={handleChange}
-      />
+      />,
     );
 
     // Should still be focusable
@@ -301,7 +301,7 @@ describe("RadioGroup Accessibility", () => {
         options={defaultOptions}
         value="option1"
         onChange={handleChange}
-      />
+      />,
     );
 
     const radioButtons = screen.getAllByRole("radio");