fix(toggle-group): re-introduce disabled on items

.changeset/loose-suns-stay.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-react": patch
+"@digdir/designsystemet-web": patch
+---
+
+**toggle-group**: re-introduce support for disabled items

packages/react/src/components/toggle-group/toggle-group-item.tsx

@@ -30,6 +30,7 @@ export type ToggleGroupItemProps = {
     | 'required'
     | 'formNoValidate'
     | 'value'
+    | 'disabled'
   >;
 
 /**
@@ -57,6 +58,8 @@ export const ToggleGroupItem = forwardRef<
     formNoValidate,
     formTarget,
     required,
+    disabled,
+    'aria-disabled': ariaDisabled,
     ...labelProps
   } = rest;
 
@@ -69,6 +72,8 @@ export const ToggleGroupItem = forwardRef<
     formNoValidate,
     formTarget,
     required,
+    disabled,
+    'aria-disabled': ariaDisabled,
   };
 
   return (
@@ -77,6 +82,7 @@ export const ToggleGroupItem = forwardRef<
       {...labelProps}
       className={cl('ds-button', className)}
       data-variant='tertiary'
+      aria-disabled={ariaDisabled ?? disabled}
     >
       <input
         {...inputProps}
@@ -85,6 +91,8 @@ export const ToggleGroupItem = forwardRef<
         onChange={() => toggleGroup.onChange?.(value)}
         type='radio'
         value={value}
+        disabled={disabled}
+        aria-disabled={ariaDisabled}
       />
       {children}
     </label>

packages/react/src/components/toggle-group/toggle-group.stories.tsx

@@ -114,3 +114,34 @@ SecondaryOnlyIcons.args = {
   'data-toggle-group': 'Filtering', // Set data-toggle-group attribute for accessibility
   variant: 'secondary',
 };
+
+export const Disabled: StoryFn<typeof ToggleGroup> = () => {
+  return (
+    <ToggleGroup>
+      <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
+      <ToggleGroup.Item disabled value='utkast'>
+        Utkast
+      </ToggleGroup.Item>
+      <ToggleGroup.Item disabled value='arkiv'>
+        Arkiv
+      </ToggleGroup.Item>
+      <ToggleGroup.Item value='Søppelpost'>Søppelpost</ToggleGroup.Item>
+      <ToggleGroup.Item value='sendt'>Sendt</ToggleGroup.Item>
+    </ToggleGroup>
+  );
+};
+export const AriaDisabled: StoryFn<typeof ToggleGroup> = () => {
+  return (
+    <ToggleGroup>
+      <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
+      <ToggleGroup.Item aria-disabled='true' value='utkast'>
+        Utkast
+      </ToggleGroup.Item>
+      <ToggleGroup.Item aria-disabled='true' value='arkiv'>
+        Arkiv
+      </ToggleGroup.Item>
+      <ToggleGroup.Item value='Søppelpost'>Søppelpost</ToggleGroup.Item>
+      <ToggleGroup.Item value='sendt'>Sendt</ToggleGroup.Item>
+    </ToggleGroup>
+  );
+};

packages/react/src/components/toggle-group/toggle-group.test.tsx

@@ -56,6 +56,67 @@ describe('ToggleGroup', () => {
     await user.keyboard('{ArrowLeft}');
     expect(item2).toHaveFocus();
   });
+
+  test('arrow keys will skip disabled items', async () => {
+    render(
+      <ToggleGroup data-toggle-group='Label'>
+        <ToggleGroup.Item value='test'>test</ToggleGroup.Item>
+        <ToggleGroup.Item disabled value='test2'>
+          test2
+        </ToggleGroup.Item>
+        <ToggleGroup.Item disabled value='test3'>
+          test3
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value='test4'>test4</ToggleGroup.Item>
+      </ToggleGroup>,
+    );
+
+    const item1 = screen.getByRole<HTMLButtonElement>('radio', {
+      name: 'test',
+    });
+    const item4 = screen.getByRole<HTMLButtonElement>('radio', {
+      name: 'test4',
+    });
+    await user.tab();
+    expect(item1).toHaveFocus();
+    await user.keyboard('{ArrowRight}');
+    expect(item4).toHaveFocus();
+    await user.keyboard('{ArrowLeft}');
+    expect(item1).toHaveFocus();
+  });
+
+  test('click will not check disabled item', async () => {
+    const onChangeMock = vi.fn();
+
+    render(
+      <ToggleGroup
+        data-toggle-group='Label'
+        defaultValue='test1'
+        onChange={onChangeMock}
+      >
+        <ToggleGroup.Item value='test1'>test1</ToggleGroup.Item>
+        <ToggleGroup.Item disabled value='test2'>
+          test2
+        </ToggleGroup.Item>
+      </ToggleGroup>,
+    );
+
+    const item1 = screen.getByRole('radio', {
+      name: 'test1',
+    });
+    const item2 = screen.getByRole('radio', {
+      name: 'test2',
+    });
+
+    expect(item1).toHaveProperty('checked', true);
+    expect(item2).toHaveProperty('checked', false);
+
+    await user.click(item2.parentElement as HTMLLabelElement);
+
+    expect(onChangeMock).toBeCalledTimes(0);
+    expect(item2).toHaveProperty('checked', false);
+  });
+
   test('has correct ToggleGroupItem defaultChecked & checked when defaultValue is used', () => {
     render(
       <ToggleGroup data-toggle-group='Label' defaultValue='test2'>

packages/web/src/toggle-group/toggle-group.ts

@@ -24,10 +24,18 @@ const handleKeydown = (event: Partial<KeyboardEvent>) => {
   if (event.key === 'Enter') event.target.click(); // Forward Enter, but no need to listen for space key, as this is handled by the browser
   if (event.key?.startsWith('Arrow')) {
     event.preventDefault?.();
-    const inputs = group.getElementsByTagName('input');
-    const index = [...inputs].indexOf(event.target);
+    const inputs = [...group.getElementsByTagName('input')];
+    const index = inputs.indexOf(event.target);
     const move = event.key.match(/Arrow(Right|Down)/) ? 1 : -1;
-    inputs[(inputs.length + index + move) % inputs.length]?.focus();
+    let nextIndex = index;
+
+    for (let i = 0; i < inputs.length; i++) {
+      nextIndex = (inputs.length + nextIndex + move) % inputs.length;
+      if (!inputs[nextIndex]?.disabled) {
+        inputs[nextIndex]?.focus();
+        break;
+      }
+    }
   }
 };