@recursica/adapter-mantine-v8 1.3.5 → 1.3.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @recursica/adapter-mantine-v8
 
+## 1.3.6
+
+### Patch Changes
+
+- f21301b: Added tests and notes confirming Checkbox, Radio and Switch put their accessible name on the native input. No behavior change.
+
 ## 1.3.5
 
 ### Patch Changes

package/package.json

@@ -12,7 +12,7 @@
     "type": "git",
     "url": "git+https://github.com/borderux/recursica-adapter-mantine-v8.git"
   },
-  "version": "1.3.5",
+  "version": "1.3.6",
   "publishConfig": {
     "access": "public"
   },

package/src/components/Checkbox/CHECKBOX_IMPLEMENTATION_NOTES.md

@@ -23,3 +23,7 @@ This calculation ensures that the optical center of the `.inner` checkmark vecto
 ### Checkbox.Group Overrides
 
 To decouple `<CheckboxGroup>` away from `<Input.Wrapper>`, we explicitly extract the raw array execution mapped correctly against our identical `RecursicaFormControlWrapperProps` schema structurally!
+
+### Accessible name lands on the native `<input>` (verified 2026-10-15)
+
+`RequireAccessibleLabel` enforces a name at compile time (`label`, `aria-label` or `aria-labelledby`). Mantine forwards `aria-*` to the native `<input>` and auto-generates the `id` that links `<label for>`, so no adapter code is needed. This is the behavior the other adapters must match. Covered by `src/components/NativeInputA11y.dom.test.tsx`, which asserts it for Checkbox, Radio and Switch.

package/src/components/NativeInputA11y.dom.test.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
+import { Checkbox } from "./Checkbox/Checkbox";
+import { Radio } from "./Radio/Radio";
+import { Switch } from "./Switch/Switch";
+import { MantineProvider } from "@mantine/core";
+const wrap = (n: React.ReactElement) => <MantineProvider>{n}</MantineProvider>;
+
+// Where the naming attributes land matters, not just that they render: a screen reader reads
+// the native <input>, so aria-* on a wrapper leaves the control unnamed.
+function render(node: React.ReactElement): HTMLElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  flushSync(() => createRoot(container).render(wrap(node)));
+  return container;
+}
+
+const controls = [
+  ["Checkbox", Checkbox],
+  ["Radio", Radio],
+  ["Switch", Switch],
+] as const;
+
+describe.each(controls)("%s accessible name", (_name, Control) => {
+  // The union type under test is already enforced at compile time; cast to exercise each branch.
+  const C = Control as unknown as React.ComponentType<Record<string, unknown>>;
+
+  it("puts aria-label on the native input only", () => {
+    const c = render(<C aria-label="Select all" />);
+    expect(c.querySelector("input")!.getAttribute("aria-label")).toBe(
+      "Select all",
+    );
+    expect(c.querySelectorAll("[aria-label]")).toHaveLength(1);
+  });
+
+  it("puts aria-labelledby and aria-describedby on the native input only", () => {
+    const c = render(<C aria-labelledby="a" aria-describedby="b" />);
+    const input = c.querySelector("input")!;
+    expect(input.getAttribute("aria-labelledby")).toBe("a");
+    expect(input.getAttribute("aria-describedby")).toBe("b");
+    expect(c.querySelectorAll("[aria-labelledby]")).toHaveLength(1);
+    expect(c.querySelectorAll("[aria-describedby]")).toHaveLength(1);
+  });
+
+  it("links a visible label to the input without a caller-supplied id", () => {
+    const c = render(<C label="Hello" />);
+    const input = c.querySelector("input")!;
+    const label = c.querySelector("label")!;
+    expect(input.id).not.toBe("");
+    expect(label.getAttribute("for")).toBe(input.id);
+  });
+
+  it("keeps a caller-supplied id", () => {
+    const c = render(<C label="Hello" id="mine" />);
+    expect(c.querySelector("input")!.id).toBe("mine");
+    expect(c.querySelector("label")!.getAttribute("for")).toBe("mine");
+  });
+});

package/src/components/Radio/RADIO_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,5 @@
+# Radio Implementation Notes
+
+### Accessible name lands on the native `<input>` (verified 2026-10-15)
+
+`RequireAccessibleLabel` enforces a name at compile time (`label`, `aria-label` or `aria-labelledby`). Mantine forwards `aria-*` to the native `<input>` and auto-generates the `id` that links `<label for>`, so no adapter code is needed. This is the behavior the other adapters must match. Covered by `src/components/NativeInputA11y.dom.test.tsx`, which asserts it for Checkbox, Radio and Switch.

package/src/components/Switch/SWITCH_IMPLEMENTATION_NOTES.md

@@ -62,3 +62,7 @@ mui-only bug: same code pattern, same result, here. Fixed by not capping the gro
 width at all — each switch's own label already wraps at 200px via `.labelWrapper`, so no
 group-level cap is needed. Verified live in both adapters: side-by-side now shows the label
 column at left with the switches beside it; stacked layout unaffected.
+
+### Accessible name lands on the native `<input>` (verified 2026-10-15)
+
+`RequireAccessibleLabel` enforces a name at compile time (`label`, `aria-label` or `aria-labelledby`). Mantine forwards `aria-*` to the native `<input>` and auto-generates the `id` that links `<label for>`, so no adapter code is needed. This is the behavior the other adapters must match. Covered by `src/components/NativeInputA11y.dom.test.tsx`, which asserts it for Checkbox, Radio and Switch.