fix(core): keep disabled SelectableCard focusable with aria-disabled

Author: Geervan

.changeset/selectable-card-focusable-disabled.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] SelectableCard: keep disabled cards in sequential focus navigation with aria-disabled, form detachment, and gated interaction handlers.
+
+@Geervan

apps/storybook/stories/SelectableCard.stories.tsx

@@ -234,7 +234,7 @@ export const Disabled: Story = {
     docs: {
       description: {
         story:
-          '`isDisabled` suppresses toggle, hover, focus. Accent border remains visible on disabled+selected cards.',
+          '`isDisabled` suppresses toggle and hover; the control remains focusable and exposes aria-disabled. Accent border remains visible on disabled+selected cards.',
       },
     },
   },

packages/core/src/SelectableCard/SelectableCard.test.tsx

@@ -78,7 +78,7 @@ describe('SelectableCard', () => {
     expect(handleChange).toHaveBeenCalledWith(true);
   });
 
-  it('disabled checkbox is disabled', () => {
+  it('applies aria-disabled, drops native disabled, and detaches form when isDisabled', () => {
     const handleChange = vi.fn();
     render(
       <SelectableCard
@@ -90,7 +90,28 @@ describe('SelectableCard', () => {
       </SelectableCard>,
     );
     const checkbox = screen.getByRole('checkbox', {name: 'Disabled'});
-    expect(checkbox).toBeDisabled();
+    expect(checkbox).toHaveAttribute('aria-disabled', 'true');
+    expect(checkbox).not.toHaveAttribute('disabled');
+    expect(checkbox).toHaveAttribute('form', '');
+    checkbox.focus();
+    expect(checkbox).toHaveFocus();
+  });
+
+  it('does not toggle on Space or direct checkbox click when disabled', () => {
+    const handleChange = vi.fn();
+    render(
+      <SelectableCard
+        label="Disabled"
+        isSelected={false}
+        onChange={handleChange}
+        isDisabled>
+        Content
+      </SelectableCard>,
+    );
+    const checkbox = screen.getByRole('checkbox', {name: 'Disabled'});
+    fireEvent.click(checkbox);
+    fireEvent.keyDown(checkbox, {key: ' '});
+    expect(handleChange).not.toHaveBeenCalled();
   });
 
   it('does not call onChange when disabled card is clicked', () => {

packages/core/src/SelectableCard/SelectableCard.tsx

@@ -332,7 +332,13 @@ export function SelectableCard({
   // handling, so we deliberately do not toggle on Space here (would double).
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLInputElement>) => {
-      if (!isDisabled && event.key === 'Enter') {
+      if (isDisabled) {
+        if (event.key === ' ' || event.key === 'Enter') {
+          event.preventDefault();
+        }
+        return;
+      }
+      if (event.key === 'Enter') {
         event.preventDefault();
         onChange(!isSelected);
       }
@@ -397,8 +403,14 @@ export function SelectableCard({
         type="checkbox"
         checked={isSelected}
         aria-label={label}
-        disabled={isDisabled}
-        onChange={() => onChange(!isSelected)}
+        aria-disabled={isDisabled ? 'true' : undefined}
+        form={isDisabled ? '' : undefined}
+        onChange={() => {
+          if (isDisabled) {
+            return;
+          }
+          onChange(!isSelected);
+        }}
         onKeyDown={handleKeyDown}
         {...stylex.props(styles.srOnly)}
       />