fix(sbb-radio-group): avoid focusing disabled radios (#3125)

sbb-design-systems · Oct 1, 2024 · e4745c4 · e4745c4
1 parent 8ff7b7c
commit e4745c4
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 4 deletions.
diff --git a/src/elements/radio-button/radio-button-group/radio-button-group.ts b/src/elements/radio-button/radio-button-group/radio-button-group.ts
@@ -241,9 +241,9 @@ export class SbbRadioButtonGroupElement extends SbbDisabledMixin(LitElement) {
   }
 
   private _getRadioTabIndex(radio: SbbRadioButtonElement | SbbRadioButtonPanelElement): number {
-    const isSelected: boolean = radio.checked && !radio.disabled && !this.disabled;
+    const isEnabled = !radio.disabled && !this.disabled;
 
-    return isSelected || this._hasSelectionExpansionPanelElement ? 0 : -1;
+    return (radio.checked || this._hasSelectionExpansionPanelElement) && isEnabled ? 0 : -1;
   }
 
   private _handleKeyDown(evt: KeyboardEvent): void {

diff --git a/src/elements/selection-expansion-panel/selection-expansion-panel.spec.ts b/src/elements/selection-expansion-panel/selection-expansion-panel.spec.ts
@@ -4,16 +4,17 @@ import type { TemplateResult } from 'lit';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
 import {
-  SbbCheckboxPanelElement,
   type SbbCheckboxElement,
   type SbbCheckboxGroupElement,
+  SbbCheckboxPanelElement,
 } from '../checkbox.js';
+import { tabKey } from '../core/testing/private/keys.js';
 import { fixture } from '../core/testing/private.js';
 import { EventSpy, waitForCondition, waitForLitRender } from '../core/testing.js';
 import {
-  SbbRadioButtonPanelElement,
   type SbbRadioButtonElement,
   type SbbRadioButtonGroupElement,
+  SbbRadioButtonPanelElement,
 } from '../radio-button.js';
 
 import { SbbSelectionExpansionPanelElement } from './selection-expansion-panel.js';
@@ -223,6 +224,61 @@ describe(`sbb-selection-expansion-panel`, () => {
       expect(firstInput.checked).to.be.true;
     });
 
+    it('does not focus disabled', async () => {
+      await sendKeys({ press: tabKey });
+      expect(document.activeElement).to.be.equal(firstInput);
+
+      await sendKeys({ press: tabKey });
+      expect(document.activeElement).to.be.equal(secondInput);
+      await sendKeys({ press: tabKey });
+
+      expect(document.activeElement!.id).to.be.equal('sbb-input-4');
+
+      // Assert disabled state
+      expect(wrapper.querySelector('#sbb-selection-expansion-panel-3')).to.have.attribute(
+        'data-disabled',
+      );
+      expect(disabledInput.tabIndex).to.be.equal(-1);
+    });
+
+    it('does update on disabled change', async () => {
+      disabledInput.disabled = false;
+      await waitForLitRender(wrapper);
+
+      expect(wrapper.querySelector('#sbb-selection-expansion-panel-3')).not.to.have.attribute(
+        'data-disabled',
+      );
+      expect(disabledInput.tabIndex).to.be.equal(0);
+    });
+
+    it('does update on disabled change on group', async () => {
+      wrapper.disabled = true;
+      await waitForLitRender(wrapper);
+
+      expect(firstInput.tabIndex).to.be.equal(-1);
+      expect(wrapper.querySelector('#sbb-selection-expansion-panel-1')).to.have.attribute(
+        'data-disabled',
+      );
+
+      expect(disabledInput.tabIndex).to.be.equal(-1);
+      expect(wrapper.querySelector('#sbb-selection-expansion-panel-3')).to.have.attribute(
+        'data-disabled',
+      );
+
+      wrapper.disabled = false;
+      await waitForLitRender(wrapper);
+
+      expect(firstInput.tabIndex).to.be.equal(0);
+      expect(wrapper.querySelector('#sbb-selection-expansion-panel-1')).not.to.have.attribute(
+        'data-disabled',
+      );
+
+      expect(disabledInput.tabIndex).to.be.equal(-1);
+      expect(wrapper.querySelector('#sbb-selection-expansion-panel-3')).to.have.attribute(
+        'data-disabled',
+      );
+    });
+
     it('preserves input button disabled state after being disabled from group', async () => {
       await preservesDisabled(wrapper, disabledInput, secondInput);
     });