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 index ae87ef6747..8eccef5a3e 100644 --- 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 index 62406ea22a..9243ee9ac0 100644 --- 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); });