@astryxdesign/core 0.7.5 → 0.7.6-canary.0d71e8d

package/src/RadioList/RadioList.spec.md

@@ -120,7 +120,7 @@ Consumer migration instructions belong in consumer docs and release notes.
 | FR3 | Selecting an enabled option calls `onChange(value)` once; RadioList holds no selection of its own.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Current tests                                           |
 | FR4 | With an empty `value`, keyboard focus entering the group lands on the first radio that is not natively disabled (in a group disabled with a reason, that is its first `aria-disabled` radio, keeping the enabled focus order under `spec:AST-085` FR1), or stays on the last one when entering backward. Focus moving between radios inside the group is not redirected. With a selection, the selected radio is the Tab stop. Arrow keys follow the browser's native radio behavior, which stops on `aria-disabled` radios.                                                                                                                                                            | WAI-ARIA radio group pattern; current tests             |
 | FR5 | `isDisabled` MUST disable every item: each radio stays focusable with `aria-disabled="true"`, is detached from the form so it does not submit, and refuses selection (`spec:AST-085` FR1–FR3, FR7). With `disabledMessage`, a reason tooltip also opens on group hover and keyboard focus, and the reason MUST describe each focusable radio (`spec:AST-085` FR5, FR7). Implementation gap: the reason describes only the radiogroup, so a focused radio is not described by it; and without a `disabledMessage`, each radio gets native `disabled` instead, which removes it from the tab order, and a radio focused when the group becomes disabled loses focus (`spec:AST-085` FR4). | `spec:AST-085` FR1–FR5, FR7; current tests              |
-| FR6 | `status.type === 'error'` sets `aria-invalid` on the radiogroup. The radiogroup exposes the effective required state (including a form-level default) with `aria-required`, while each radio's native `required` follows only the explicit `isRequired`.                                                                                                                                                                                                                                                                                                                                                                                                                                | Current source and tests                                |
+| FR6 | `status.type === 'error'` sets `aria-invalid` on the radiogroup. The radiogroup exposes the effective required state (including a form-level default) with `aria-required`, while each radio's native `required` follows only the explicit `isRequired`; a natively required radio's `aria-invalid` follows the same status, so the browser's own invalid state never shows before an error.                                                                                                                                                                                                                                                                                            | Current source and tests                                |
 | FR7 | The radiogroup lays options in a column with a small gap, or a row with a wider gap when horizontal, and passes `size` to every item.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Current source and tests                                |
 | FR8 | Base props (`ref`, `id`, `aria-*`, `data-*`, `hidden`, `inert`, `dir`, DOM handlers) reach the radiogroup; a caller `onFocus` runs after FR4's entry handling. `container*` reaches the Field box where one renders (in a `horizontal-labels` FormLayout none renders, and `container*` has no effect and warns), and `control*` the radiogroup; root `xstyle`, `className`, and `style` are not accepted.                                                                                                                                                                                                                                                                              | `family:input-fields` FR10; current tests               |
 | FR9 | The radiogroup carries `astryx-radio-list` and reflects `data-orientation` and `data-size`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `architecture:component-theming-surface`; current tests |

package/src/RadioList/RadioList.test.tsx

@@ -165,6 +165,34 @@ describe('RadioList', () => {
     expect(screen.getByText(/Required/)).toBeInTheDocument();
   });
 
+  it('keeps required radios valid until the group shows an error', () => {
+    const {rerender} = render(
+      <RadioList label="Preference" value="" onChange={() => {}} isRequired>
+        <RadioListItem label="Option A" value="a" />
+        <RadioListItem label="Option B" value="b" />
+      </RadioList>,
+    );
+    // Native required alone makes Chromium report every radio invalid.
+    for (const radio of screen.getAllByRole('radio')) {
+      expect(radio).toBeRequired();
+      expect(radio).toHaveAttribute('aria-invalid', 'false');
+    }
+    rerender(
+      <RadioList
+        label="Preference"
+        value=""
+        onChange={() => {}}
+        isRequired
+        status={{type: 'error', message: 'Pick one'}}>
+        <RadioListItem label="Option A" value="a" />
+        <RadioListItem label="Option B" value="b" />
+      </RadioList>,
+    );
+    for (const radio of screen.getAllByRole('radio')) {
+      expect(radio).toHaveAttribute('aria-invalid', 'true');
+    }
+  });
+
   it('shows Optional indicator when isOptional is true', () => {
     render(
       <RadioList label="Preference" value="" onChange={() => {}} isOptional>
@@ -471,6 +499,62 @@ describe('RadioList', () => {
       fireEvent.click(pro);
       expect(onChange).not.toHaveBeenCalled();
     });
+
+    it('does not run a caller onClick while focusable-disabled', () => {
+      const onClick = vi.fn();
+      render(
+        <RadioList
+          label="Plan"
+          value="free"
+          onChange={() => {}}
+          isDisabled
+          disabledMessage="Upgrade your account to change plans">
+          <RadioListItem label="Free" value="free" onClick={onClick} />
+          <RadioListItem label="Pro" value="pro" onClick={onClick} />
+        </RadioList>,
+      );
+      fireEvent.click(screen.getByRole('radio', {name: 'Pro', hidden: true}));
+      fireEvent.click(screen.getByRole('radio', {name: 'Free', hidden: true}));
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('does not run a caller onClick from the keyboard while focusable-disabled', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      render(
+        <RadioList
+          label="Plan"
+          value="free"
+          onChange={() => {}}
+          isDisabled
+          disabledMessage="Upgrade your account to change plans">
+          <RadioListItem label="Free" value="free" onClick={onClick} />
+          <RadioListItem label="Pro" value="pro" onClick={onClick} />
+        </RadioList>,
+      );
+      await user.tab();
+      expect(
+        screen.getByRole('radio', {name: 'Free', hidden: true}),
+      ).toHaveFocus();
+      // Space activates the focused radio.
+      await user.keyboard(' ');
+      expect(onClick).not.toHaveBeenCalled();
+      // An arrow key moves onto the next radio, and the browser clicks it.
+      await user.keyboard('{ArrowDown}');
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('still runs a caller onClick on an enabled radio', () => {
+      const onClick = vi.fn();
+      render(
+        <RadioList label="Plan" value="free" onChange={() => {}}>
+          <RadioListItem label="Free" value="free" />
+          <RadioListItem label="Pro" value="pro" onClick={onClick} />
+        </RadioList>,
+      );
+      fireEvent.click(screen.getByRole('radio', {name: 'Pro'}));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
   });
   describe('form participation', () => {
     it('submits the selected value under htmlName', () => {

package/src/RadioList/RadioListItem.tsx

@@ -326,6 +326,12 @@ export function RadioListItem({
         // from submission, matching a natively disabled control.
         form={keepsFocusableForMessage ? '' : undefined}
         required={context.isRequired}
+        // Chromium reports an unanswered native-required radio invalid before
+        // any interaction; the invalid state follows the group's status
+        // instead (RadioList FR6).
+        aria-invalid={
+          context.isRequired ? context.status?.type === 'error' : undefined
+        }
         onChange={() => {
           if (isDisabled) {
             return;
@@ -334,8 +340,11 @@ export function RadioListItem({
         }}
         // A consumer onClick rides on the radio input itself, so it fires for
         // both direct control clicks and row-surface clicks the row delegates
-        // to the input — the same routing CheckboxListItem uses.
-        onClick={onClick}
+        // to the input — the same routing CheckboxListItem uses. A disabled
+        // radio that stays focusable (`aria-disabled`, not native `disabled`)
+        // is not silenced by the browser, so drop the handler here
+        // (`spec:AST-085` FR2), as CheckboxInput does.
+        onClick={isDisabled ? undefined : onClick}
         // The radio names itself from the visible label element, which works
         // for a rich label as well as a plain string. `aria-label` replaces
         // that name rather than adding to it, so the two are mutually