UX-59 - add accessibility state labels to switch component (#456)

* feat: add aria-checked, aria-label, role to input

* add changeset

* fix: change role switch to checkbox

* test: add tests for mt-switch

* format code

.changeset/slimy-cameras-joke.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Add aria attributes to mt-switch

packages/component-library/src/components/form/mt-switch/mt-switch.spec.ts

@@ -0,0 +1,43 @@
+import { mount } from "@vue/test-utils";
+import MtSwitch from "./mt-switch.vue";
+
+async function createWrapper(props = {}, options = {}) {
+  return mount(MtSwitch, {
+    propsData: {
+      label: "Test Switch",
+      ...props,
+    },
+    ...options,
+  });
+}
+
+describe("mt-switch", () => {
+  let wrapper: Awaited<ReturnType<typeof createWrapper>>;
+
+  afterEach(() => {
+    wrapper?.unmount();
+  });
+
+  it("should update checked state when checked", async () => {
+    wrapper = await createWrapper();
+    const checkbox = wrapper?.find('input[type="checkbox"]');
+
+    await wrapper.setProps({ checked: true });
+    expect(checkbox.element).toBeChecked();
+
+    await wrapper.setProps({ checked: false });
+    expect(checkbox.element).not.toBeChecked();
+  });
+
+  it("should have correct ARIA attributes", async () => {
+    wrapper = await createWrapper({
+      checked: true,
+      label: "Accessibility Test",
+    });
+    const checkbox = wrapper.find('input[type="checkbox"]');
+
+    expect(checkbox.attributes("role")).toBe("checkbox");
+    expect(checkbox.attributes("aria-checked")).toBe("true");
+    expect(checkbox.attributes("aria-label")).toBe("Accessibility Test");
+  });
+});

packages/component-library/src/components/form/mt-switch/mt-switch.vue

@@ -10,6 +10,9 @@
             :name="formFieldName || identification"
             :checked="inputState"
             :disabled="isDisabled"
+            :aria-checked="inputState"
+            :aria-label="label"
+            role="checkbox"
             @change.stop="onChange"
           />
           <div class="mt-field__switch-state">