@recursica/adapter-mui-v7 1.3.3 → 1.3.4

package/package.json

@@ -12,7 +12,7 @@
     "type": "git",
     "url": "git+https://github.com/borderux/recursica-adapter-mui-v7.git"
   },
-  "version": "1.3.3",
+  "version": "1.3.4",
   "publishConfig": {
     "access": "public"
   },

package/src/components/Checkbox/CHECKBOX_IMPLEMENTATION_NOTES.md

@@ -12,3 +12,7 @@ is no group-level max-width token in the schema (`checkbox-group_variants_layout
 covers gutter/margin/padding) — fixed by leaving `controlMaxWidth` `undefined`, matching
 `SwitchGroup`'s existing pattern. Same bug existed in `RadioGroup`, fixed the same way.
 Mirrors the identical fix in mantine-adapter (source of truth).
+
+### Accessible name lands on the native `<input>` (2026-10-15)
+
+`RequireAccessibleLabel` enforces a name at compile time (`label`, `aria-label` or `aria-labelledby`). MUI spreads unknown props onto the outer span, so `aria-label`/`aria-labelledby`/`aria-describedby` never reached the `<input>`, and a `label` with no `id` left `<label htmlFor>` unlinked. `useNativeInputA11y` (`src/utils`) moves the aria attributes to `slotProps.input` and generates an `id` for labelled controls. Same fix in Checkbox, Radio and Switch. Covered by `src/components/NativeInputA11y.dom.test.tsx`. Mantine already behaves this way natively and has the same test.

package/src/components/Checkbox/Checkbox.module.css

@@ -66,6 +66,7 @@
   align-items: center;
   justify-content: center;
   margin: 0; /* HARDCODE: structural reset */
+  padding: 0; /* HARDCODE: drops MUI's 9px SwitchBase padding, which would crush the box inside the fixed size */
   width: var(--recursica_ui-kit_components_checkbox_properties_size);
   height: var(--recursica_ui-kit_components_checkbox_properties_size);
   /* Apply font-size to this element so that an 'em' based line-height token evaluates to the correct exact pixel value. */

package/src/components/Checkbox/Checkbox.tsx

@@ -21,6 +21,7 @@ import {
 } from "../FormControlLayout/FormControlLayout";
 import { AssistiveElement } from "../AssistiveElement/AssistiveElement";
 
+import { useNativeInputA11y } from "../../utils/useNativeInputA11y";
 import styles from "./Checkbox.module.css";
 
 export type CheckboxWrapperProps = Omit<MuiCheckboxProps, "size" | "color"> &
@@ -67,9 +68,12 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
       "color", // Colors are token-driven; MUI's native palette isn't exposed
     ] as const satisfies readonly (keyof MuiCheckboxProps)[];
 
-    const sanitizedProps = omitUnsupportedProps(
-      filterStylingProps(rest, overStyled),
-      UNSUPPORTED_PROPS,
+    const sanitizedProps = useNativeInputA11y(
+      omitUnsupportedProps(
+        filterStylingProps(rest, overStyled),
+        UNSUPPORTED_PROPS,
+      ),
+      !!label,
     );
     const restRecord = sanitizedProps as Record<string, unknown>;
 
@@ -175,7 +179,6 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
         {...(isControlled ? { checked: isChecked as boolean } : {})}
         onChange={handleChange}
         disableRipple
-        sx={label ? { padding: 0 } : undefined}
         icon={<div className={styles.input} />}
         checkedIcon={
           <div className={`${styles.input} ${styles.inputChecked}`}>

package/src/components/Modal/Modal.module.css

@@ -38,6 +38,9 @@
     --recursica_ui-kit_components_modal_properties_border-radius
   );
   overflow: hidden;
+  background-color: var(
+    --recursica_ui-kit_components_modal_properties_colors_content-background-color
+  );
 }
 
 .content {
@@ -80,7 +83,9 @@
     var(
       --recursica_ui-kit_components_modal_properties_header-footer-horizontal-padding
     );
-  background-color: transparent; /* Inherit from content */
+  background-color: var(
+    --recursica_ui-kit_components_modal_properties_colors_header-background-color
+  );
 }
 
 .title {
@@ -209,7 +214,9 @@
     var(
       --recursica_ui-kit_components_modal_properties_header-footer-horizontal-padding
     );
-  background-color: transparent;
+  background-color: var(
+    --recursica_ui-kit_components_modal_properties_colors_footer-background-color
+  );
   display: flex;
   justify-content: flex-end;
   gap: var(--recursica_ui-kit_components_modal_properties_button-gap);

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

@@ -0,0 +1,59 @@
+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";
+const wrap = (n: React.ReactElement) => n;
+
+// 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

@@ -10,3 +10,7 @@ layout the group's own label got squeezed into that same 400px alongside the rad
 no group-level max-width token in the schema — fixed by leaving `controlMaxWidth` `undefined`,
 matching `SwitchGroup`'s existing pattern. Same bug existed in `CheckboxGroup`, fixed the same
 way. Mirrors the identical fix in mantine-adapter (source of truth).
+
+### Accessible name lands on the native `<input>` (2026-10-15)
+
+`RequireAccessibleLabel` enforces a name at compile time (`label`, `aria-label` or `aria-labelledby`). MUI spreads unknown props onto the outer span, so `aria-label`/`aria-labelledby`/`aria-describedby` never reached the `<input>`, and a `label` with no `id` left `<label htmlFor>` unlinked. `useNativeInputA11y` (`src/utils`) moves the aria attributes to `slotProps.input` and generates an `id` for labelled controls. Same fix in Checkbox, Radio and Switch. Covered by `src/components/NativeInputA11y.dom.test.tsx`. Mantine already behaves this way natively and has the same test.

package/src/components/Radio/Radio.module.css

@@ -75,6 +75,7 @@
   align-items: center;
   justify-content: center;
   margin: 0; /* HARDCODE: structural reset */
+  padding: 0; /* HARDCODE: drops MUI's 9px SwitchBase padding, which would crush the circle inside the fixed size */
   width: var(--recursica_ui-kit_components_radio-button_properties_size);
   height: var(--recursica_ui-kit_components_radio-button_properties_size);
   /* Apply font-size to this element so that an 'em' based line-height token evaluates to the correct exact pixel value. */

package/src/components/Radio/Radio.tsx

@@ -21,6 +21,7 @@ import {
 } from "../FormControlLayout/FormControlLayout";
 import { AssistiveElement } from "../AssistiveElement/AssistiveElement";
 
+import { useNativeInputA11y } from "../../utils/useNativeInputA11y";
 import styles from "./Radio.module.css";
 
 const RadioIcon: React.FC<{
@@ -81,9 +82,12 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
       "color", // Colors are token-driven; MUI's native palette isn't exposed
     ] as const satisfies readonly (keyof MuiRadioProps)[];
 
-    const sanitizedProps = omitUnsupportedProps(
-      filterStylingProps(rest, overStyled),
-      UNSUPPORTED_PROPS,
+    const sanitizedProps = useNativeInputA11y(
+      omitUnsupportedProps(
+        filterStylingProps(rest, overStyled),
+        UNSUPPORTED_PROPS,
+      ),
+      !!label,
     );
     const restRecord = sanitizedProps as Record<string, unknown>;
 
@@ -159,7 +163,6 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
         classes={mergedClassNames}
         disabled={readOnly || disabled}
         disableRipple
-        sx={label ? { padding: 0 } : undefined}
       />
     );
 

package/src/components/Switch/SWITCH_IMPLEMENTATION_NOTES.md

@@ -145,3 +145,7 @@ pattern, not a MUI-only bug). Fixed by not capping the group's control width at
 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>` (2026-10-15)
+
+`RequireAccessibleLabel` enforces a name at compile time (`label`, `aria-label` or `aria-labelledby`). MUI spreads unknown props onto the outer span, so `aria-label`/`aria-labelledby`/`aria-describedby` never reached the `<input>`, and a `label` with no `id` left `<label htmlFor>` unlinked. `useNativeInputA11y` (`src/utils`) moves the aria attributes to `slotProps.input` and generates an `id` for labelled controls. Same fix in Checkbox, Radio and Switch. Covered by `src/components/NativeInputA11y.dom.test.tsx`. Mantine already behaves this way natively and has the same test.

package/src/components/Switch/Switch.tsx

@@ -20,6 +20,7 @@ import {
   type FormControlLayoutProps,
 } from "../FormControlLayout/FormControlLayout";
 import { AssistiveElement } from "../AssistiveElement/AssistiveElement";
+import { useNativeInputA11y } from "../../utils/useNativeInputA11y";
 import styles from "./Switch.module.css";
 
 import { SwitchGroup, SwitchGroupContext } from "./SwitchGroup";
@@ -110,9 +111,12 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       "color", // Recursica hardcodes color="default" below; MUI's palette-driven colors are unused
     ] as const satisfies readonly (keyof MuiSwitchProps)[];
 
-    const sanitizedProps = omitUnsupportedProps(
-      filterStylingProps(rest, overStyled),
-      UNSUPPORTED_PROPS,
+    const sanitizedProps = useNativeInputA11y(
+      omitUnsupportedProps(
+        filterStylingProps(rest, overStyled),
+        UNSUPPORTED_PROPS,
+      ),
+      !!label,
     );
     const restRecord = sanitizedProps as Record<string, unknown>;
 

package/src/utils/useNativeInputA11y.ts

@@ -0,0 +1,43 @@
+import { useId } from "react";
+
+const INPUT_ARIA_KEYS = [
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+] as const;
+
+/**
+ * MUI's Checkbox/Radio/Switch spread unknown props (including `aria-*`) onto the outer span,
+ * so a screen reader never sees them on the native `<input>`. Moves the naming attributes to
+ * `slotProps.input`, and guarantees a labelled control has an `id` so `<label htmlFor>` links.
+ */
+export function useNativeInputA11y<T extends object>(
+  props: T,
+  hasLabel: boolean,
+): T {
+  const generatedId = useId();
+  const source = { ...props } as Record<string, unknown>;
+  const slotProps = (source.slotProps ?? {}) as Record<string, unknown>;
+  if (typeof slotProps.input === "function") {
+    throw new Error(
+      "slotProps.input must be an object; function form is not supported",
+    );
+  }
+  const input = { ...(slotProps.input as object | undefined) } as Record<
+    string,
+    unknown
+  >;
+
+  for (const key of INPUT_ARIA_KEYS) {
+    if (key in source) {
+      input[key] = source[key];
+      delete source[key];
+    }
+  }
+  if (hasLabel && source.id === undefined) source.id = generatedId;
+
+  if (Object.keys(input).length > 0) {
+    source.slotProps = { ...slotProps, input };
+  }
+  return source as T;
+}