diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss index acb964f983..00d6afc1ec 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss +++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss @@ -14,7 +14,7 @@ display: block; } -:host([active]) { +:host([data-active]) { --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x)); } @@ -41,7 +41,7 @@ padding-inline: var(--sbb-option-padding-inline); color: var(--sbb-option-color); - :host([active]) & { + :host([data-active]) & { @include sbb.focus-outline; border-radius: var(--sbb-option-border-radius); diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts index dcd04e83ec..d809b6b7e7 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts +++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts @@ -25,7 +25,7 @@ describe(`sbb-autocomplete-grid-option`, () => { Value ${i + 1}Option label -Option label - Option label ``` @@ -86,13 +84,12 @@ which is needed to correctly set the `aria-activedescendant` on the related `inp ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ----------- | ------- | ---------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `active` | `active` | public | `boolean \| undefined` | | Whether the option is currently active. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `selected` | `selected` | public | `boolean` | | Whether the option is selected. | -| `value` | `value` | public | `string` | | Value of the option. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ----------- | ------- | --------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `selected` | `selected` | public | `boolean` | | Whether the option is selected. | +| `value` | `value` | public | `string` | | Value of the option. | ## Events diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts index aebd7ced75..50e0d663b7 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts +++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts @@ -208,30 +208,30 @@ describe(`sbb-autocomplete-grid`, () => { await sendKeys({ press: 'ArrowDown' }); await sendKeys({ press: 'ArrowDown' }); await waitForLitRender(element); - expect(optTwo).to.have.attribute('active'); + expect(optTwo).to.have.attribute('data-active'); expect(buttonTwo).not.to.have.attribute('data-focus-visible'); expect(buttonThree).not.to.have.attribute('data-focus-visible'); expect(input).to.have.attribute('aria-activedescendant', 'option-2'); await sendKeys({ press: 'ArrowRight' }); await waitForLitRender(element); - expect(optTwo).not.to.have.attribute('active'); + expect(optTwo).not.to.have.attribute('data-active'); expect(buttonTwo).to.have.attribute('data-focus-visible'); expect(buttonThree).not.to.have.attribute('data-focus-visible'); expect(input).to.have.attribute('aria-activedescendant', 'button-2'); await sendKeys({ press: 'ArrowRight' }); await waitForLitRender(element); - expect(optTwo).not.to.have.attribute('active'); + expect(optTwo).not.to.have.attribute('data-active'); expect(buttonTwo).not.to.have.attribute('data-focus-visible'); expect(buttonThree).to.have.attribute('data-focus-visible'); expect(input).to.have.attribute('aria-activedescendant', 'button-3'); await sendKeys({ press: 'ArrowDown' }); await waitForLitRender(element); - expect(optOne).to.have.attribute('active'); + expect(optOne).to.have.attribute('data-active'); expect(buttonOne).not.to.have.attribute('data-focus-visible'); - expect(optTwo).not.to.have.attribute('active'); + expect(optTwo).not.to.have.attribute('data-active'); expect(buttonTwo).not.to.have.attribute('data-focus-visible'); expect(buttonThree).not.to.have.attribute('data-focus-visible'); expect(input).to.have.attribute('aria-activedescendant', 'option-1'); @@ -253,9 +253,9 @@ describe(`sbb-autocomplete-grid`, () => { await sendKeys({ press: 'ArrowDown' }); await sendKeys({ press: 'ArrowDown' }); await waitForLitRender(element); - expect(optOne).not.to.have.attribute('active'); + expect(optOne).not.to.have.attribute('data-active'); expect(optOne).not.to.have.attribute('selected'); - expect(optTwo).to.have.attribute('active'); + expect(optTwo).to.have.attribute('data-active'); expect(optTwo).not.to.have.attribute('selected'); expect(input).to.have.attribute('aria-activedescendant', 'option-2'); @@ -263,7 +263,7 @@ describe(`sbb-autocomplete-grid`, () => { await waitForCondition(() => didCloseEventSpy.events.length === 1); expect(didCloseEventSpy.count).to.be.equal(1); - expect(optTwo).not.to.have.attribute('active'); + expect(optTwo).not.to.have.attribute('data-active'); expect(optTwo).to.have.attribute('selected'); expect(optionSelectedEventSpy.count).to.be.equal(1); expect(input).to.have.attribute('aria-expanded', 'false'); @@ -283,10 +283,10 @@ describe(`sbb-autocomplete-grid`, () => { await sendKeys({ press: 'ArrowDown' }); await waitForLitRender(element); - expect(optOne).to.have.attribute('active'); + expect(optOne).to.have.attribute('data-active'); expect(buttonOne).not.to.have.attribute('data-focus-visible'); await sendKeys({ press: 'ArrowRight' }); - expect(optOne).not.to.have.attribute('active'); + expect(optOne).not.to.have.attribute('data-active'); expect(buttonOne).to.have.attribute('data-focus-visible'); expect(input).to.have.attribute('aria-activedescendant', 'button-1'); await sendKeys({ press: 'Enter' }); @@ -296,7 +296,7 @@ describe(`sbb-autocomplete-grid`, () => { await sendKeys({ press: 'ArrowDown' }); await sendKeys({ press: 'ArrowRight' }); await waitForLitRender(element); - expect(optOne).not.to.have.attribute('active'); + expect(optOne).not.to.have.attribute('data-active'); expect(buttonOne).not.to.have.attribute('data-focus-visible'); expect(buttonTwo).to.have.attribute('data-focus-visible'); expect(input).to.have.attribute('aria-activedescendant', 'button-2'); diff --git a/src/elements/autocomplete/autocomplete.spec.ts b/src/elements/autocomplete/autocomplete.spec.ts index 1a8e1dcfc1..f1ba6d79df 100644 --- a/src/elements/autocomplete/autocomplete.spec.ts +++ b/src/elements/autocomplete/autocomplete.spec.ts @@ -150,9 +150,9 @@ describe(`sbb-autocomplete`, () => { await sendKeys({ press: 'ArrowDown' }); await sendKeys({ press: 'ArrowDown' }); await waitForLitRender(element); - expect(optOne).not.to.have.attribute('active'); + expect(optOne).not.to.have.attribute('data-active'); expect(optOne).not.to.have.attribute('selected'); - expect(optTwo).to.have.attribute('active'); + expect(optTwo).to.have.attribute('data-active'); expect(optTwo).not.to.have.attribute('selected'); expect(input).to.have.attribute('aria-activedescendant', 'option-2'); @@ -160,7 +160,7 @@ describe(`sbb-autocomplete`, () => { await waitForCondition(() => didCloseEventSpy.events.length === 1); expect(didCloseEventSpy.count).to.be.equal(1); - expect(optTwo).not.to.have.attribute('active'); + expect(optTwo).not.to.have.attribute('data-active'); expect(optTwo).to.have.attribute('selected'); expect(optionSelectedEventSpy.count).to.be.equal(1); expect(input).to.have.attribute('aria-expanded', 'false'); diff --git a/src/elements/option/option/__snapshots__/option.snapshot.spec.snap.js b/src/elements/option/option/__snapshots__/option.snapshot.spec.snap.js index 7b75540806..6b4b95400b 100644 --- a/src/elements/option/option/__snapshots__/option.snapshot.spec.snap.js +++ b/src/elements/option/option/__snapshots__/option.snapshot.spec.snap.js @@ -1,9 +1,8 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["sbb-option autocomplete renders selected and active DOM"] = +snapshots["sbb-option autocomplete renders selected DOM"] = ` `; -/* end snapshot sbb-option autocomplete renders selected and active DOM */ +/* end snapshot sbb-option autocomplete renders selected DOM */ -snapshots["sbb-option autocomplete renders selected and active Shadow DOM"] = +snapshots["sbb-option autocomplete renders selected Shadow DOM"] = `
@@ -32,7 +31,7 @@ snapshots["sbb-option autocomplete renders selected and active Shadow DOM"] =
`; -/* end snapshot sbb-option autocomplete renders selected and active Shadow DOM */ +/* end snapshot sbb-option autocomplete renders selected Shadow DOM */ snapshots["sbb-option autocomplete renders disabled DOM"] = ` { "role": "WebArea", @@ -75,27 +74,27 @@ snapshots["sbb-option selected active Chrome"] = }

`; -/* end snapshot sbb-option selected active Chrome */ +/* end snapshot sbb-option selected Chrome */ -snapshots["sbb-option disabled Chrome"] = +snapshots["sbb-option selected Firefox"] = `

{ - "role": "WebArea", + "role": "document", "name": "" }

`; -/* end snapshot sbb-option disabled Chrome */ +/* end snapshot sbb-option selected Firefox */ -snapshots["sbb-option selected active Firefox"] = +snapshots["sbb-option disabled Chrome"] = `

{ - "role": "document", + "role": "WebArea", "name": "" }

`; -/* end snapshot sbb-option selected active Firefox */ +/* end snapshot sbb-option disabled Chrome */ snapshots["sbb-option disabled Firefox"] = `

diff --git a/src/elements/option/option/option-base-element.ts b/src/elements/option/option/option-base-element.ts index 52cd5e4f42..9b3a49cee3 100644 --- a/src/elements/option/option/option-base-element.ts +++ b/src/elements/option/option/option-base-element.ts @@ -44,8 +44,20 @@ export abstract class SbbOptionBaseElement extends SbbDisabledMixin( return this.getAttribute('value') ?? ''; } - /** Whether the option is currently active. */ - @property({ reflect: true, type: Boolean }) public active?: boolean; + /** + * Whether the option is currently active. + * @internal + */ + public set active(value: boolean) { + this.toggleAttribute('data-active', value); + } + /** + * TODO: Remove getter with next major version (keep setter or change to method). + * @internal + */ + public get active(): string { + return this.getAttribute('value') ?? ''; + } /** Whether the option is selected. */ @property({ type: Boolean }) diff --git a/src/elements/option/option/option.scss b/src/elements/option/option/option.scss index 9e1dbb3c1f..5bf9e6899f 100644 --- a/src/elements/option/option/option.scss +++ b/src/elements/option/option/option.scss @@ -31,7 +31,7 @@ --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark); } -:host([active]) { +:host([data-active]) { --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x)); } @@ -97,7 +97,7 @@ -webkit-tap-highlight-color: transparent; -webkit-text-fill-color: var(--sbb-option-color); - :host([active]) & { + :host([data-active]) & { @include sbb.focus-outline; border-radius: var(--sbb-option-border-radius); diff --git a/src/elements/option/option/option.snapshot.spec.ts b/src/elements/option/option/option.snapshot.spec.ts index 571f51f56e..1401b94303 100644 --- a/src/elements/option/option/option.snapshot.spec.ts +++ b/src/elements/option/option/option.snapshot.spec.ts @@ -12,12 +12,12 @@ describe(`sbb-option`, () => { describe('autocomplete', () => { let element: SbbOptionElement; - describe('renders selected and active', async () => { + describe('renders selected', async () => { beforeEach(async () => { element = ( await fixture(html` - Option 1 + Option 1

`) @@ -55,10 +55,7 @@ describe(`sbb-option`, () => { }); }); - testA11yTreeSnapshot( - html``, - 'selected active', - ); + testA11yTreeSnapshot(html``, 'selected'); testA11yTreeSnapshot(html``, 'disabled'); }); diff --git a/src/elements/option/option/option.visual.spec.ts b/src/elements/option/option/option.visual.spec.ts index 0401bc13ab..3a2dbf269f 100644 --- a/src/elements/option/option/option.visual.spec.ts +++ b/src/elements/option/option/option.visual.spec.ts @@ -31,7 +31,7 @@ describe(`sbb-option`, () => { Value ${i + 1}Option label
-Option label - Option label ``` @@ -58,13 +56,12 @@ If the label slot contains only a **text node**, it is possible to search for te ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ----------- | ------- | ---------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `active` | `active` | public | `boolean \| undefined` | | Whether the option is currently active. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `selected` | `selected` | public | `boolean` | | Whether the option is selected. | -| `value` | `value` | public | `string` | | Value of the option. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ----------- | ------- | --------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `selected` | `selected` | public | `boolean` | | Whether the option is selected. | +| `value` | `value` | public | `string` | | Value of the option. | ## Events diff --git a/src/elements/select/select.spec.ts b/src/elements/select/select.spec.ts index 4408c4b54b..6b45d56260 100644 --- a/src/elements/select/select.spec.ts +++ b/src/elements/select/select.spec.ts @@ -169,10 +169,10 @@ describe(`sbb-select`, () => { await waitForLitRender(element); firstOption = element.querySelector('#option-1')!; - expect(firstOption).not.to.have.attribute('active'); + expect(firstOption).not.to.have.attribute('data-active'); expect(firstOption).to.have.attribute('selected'); secondOption = element.querySelector('#option-2')!; - expect(secondOption).not.to.have.attribute('active'); + expect(secondOption).not.to.have.attribute('data-active'); expect(secondOption).not.to.have.attribute('selected'); const selectionChange = new EventSpy(SbbOptionElement.events.selectionChange); @@ -210,9 +210,9 @@ describe(`sbb-select`, () => { await waitForCondition(() => didOpen.events.length === 1); expect(didOpen.count).to.be.equal(1); await waitForLitRender(element); - expect(firstOption).not.to.have.attribute('active'); + expect(firstOption).not.to.have.attribute('data-active'); expect(firstOption).not.to.have.attribute('selected'); - expect(secondOption).not.to.have.attribute('active'); + expect(secondOption).not.to.have.attribute('data-active'); expect(secondOption).not.to.have.attribute('selected'); const selectionChange = new EventSpy(SbbOptionElement.events.selectionChange); @@ -288,12 +288,12 @@ describe(`sbb-select`, () => { await sendKeys({ press: ' ' }); await waitForCondition(() => didOpen.events.length === 1); expect(didOpen.count).to.be.equal(1); - expect(firstOption).not.to.have.attribute('active'); + expect(firstOption).not.to.have.attribute('data-active'); expect(firstOption).not.to.have.attribute('selected'); focusableElement.focus(); await sendKeys({ press: 'ArrowDown' }); - expect(firstOption).to.have.attribute('active'); + expect(firstOption).to.have.attribute('data-active'); expect(firstOption).to.have.attribute('selected'); expect(element.value).to.be.equal('1'); expect(displayValue).to.have.trimmed.text('First'); @@ -304,7 +304,7 @@ describe(`sbb-select`, () => { await waitForLitRender(element); expect(didOpen.count).to.be.equal(1); expect(displayValue).to.have.trimmed.text('Third'); - expect(thirdOption).to.have.attribute('active'); + expect(thirdOption).to.have.attribute('data-active'); expect(thirdOption).to.have.attribute('selected'); expect(element.value).to.be.equal('3'); @@ -315,7 +315,7 @@ describe(`sbb-select`, () => { await waitForLitRender(element); expect(didOpen.count).to.be.equal(1); expect(displayValue).to.have.trimmed.text('Second'); - expect(secondOption).to.have.attribute('active'); + expect(secondOption).to.have.attribute('data-active'); expect(secondOption).to.have.attribute('selected'); expect(element.value).to.be.equal('2'); }); @@ -331,13 +331,13 @@ describe(`sbb-select`, () => { await waitForCondition(() => didOpen.events.length === 1); expect(didOpen.count).to.be.equal(1); - expect(secondOption).not.to.have.attribute('active'); + expect(secondOption).not.to.have.attribute('data-active'); expect(secondOption).not.to.have.attribute('selected'); focusableElement.focus(); await sendKeys({ press: 'ArrowDown' }); await sendKeys({ press: 'ArrowDown' }); await sendKeys({ press: 'Enter' }); - expect(secondOption).to.have.attribute('active'); + expect(secondOption).to.have.attribute('data-active'); expect(secondOption).to.have.attribute('selected'); expect(element.value).to.be.eql(['2']); expect(displayValue).to.have.trimmed.text('Second'); @@ -351,7 +351,7 @@ describe(`sbb-select`, () => { await waitForLitRender(element); await waitForCondition(() => didOpen.events.length === 2); expect(didOpen.count).to.be.equal(2); - expect(secondOption).not.to.have.attribute('active'); + expect(secondOption).not.to.have.attribute('data-active'); expect(secondOption).to.have.attribute('selected'); expect(comboBoxElement).to.have.attribute('aria-expanded', 'true'); });