refactor: use inert attribute instead of property hack (#3099)

sbb-design-systems · Sep 19, 2024 · fdd2862 · fdd2862
1 parent dfd741f
commit fdd2862
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 5 deletions.
diff --git a/src/elements/core/controllers/inert-controller.spec.ts b/src/elements/core/controllers/inert-controller.spec.ts
@@ -44,7 +44,7 @@ describe('inert', () => {
       element = await fixture(
         html`<div>
           <div></div>
-          <div .inert=${true}></div>
+          <div inert></div>
           <div aria-hidden="true"></div>
           <div id="overlay"></div>
           <div>
@@ -117,7 +117,7 @@ describe('inert', () => {
       element = await fixture(
         html`<div>
           <div></div>
-          <div .inert=${true}></div>
+          <div inert></div>
           <div aria-hidden="true"></div>
           <shadow-element></shadow-element>
           <div>

diff --git a/src/elements/map-container/map-container.ts b/src/elements/map-container/map-container.ts
@@ -105,7 +105,7 @@ export class SbbMapContainerElement extends LitElement {
                 icon-name="location-pin-map-small"
                 type="button"
                 @click=${() => this._onScrollButtonClick()}
-                .inert=${!this._scrollUpButtonVisible}
+                ?inert=${!this._scrollUpButtonVisible}
               >
                 ${i18nMapContainerButtonLabel[this._language.current]}
               </sbb-tertiary-button>`

diff --git a/src/elements/selection-expansion-panel/selection-expansion-panel.ts b/src/elements/selection-expansion-panel/selection-expansion-panel.ts
@@ -258,7 +258,7 @@ export class SbbSelectionExpansionPanelElement extends SbbHydrationMixin(LitElem
         </div>
         <div
           class="sbb-selection-expansion-panel__content--wrapper"
-          .inert=${this._state !== 'opened'}
+          ?inert=${this._state !== 'opened'}
           @animationend=${(event: AnimationEvent) => this._onAnimationEnd(event)}
         >
           <div class="sbb-selection-expansion-panel__content">

diff --git a/src/elements/toggle/toggle-option/toggle-option.ts b/src/elements/toggle/toggle-option/toggle-option.ts
@@ -113,7 +113,7 @@ export class SbbToggleOptionElement extends SbbIconNameMixin(LitElement) {
         id="sbb-toggle-option-id"
         aria-hidden="true"
         tabindex="-1"
-        .inert=${this.checked}
+        ?inert=${this.checked}
         ?disabled=${this.disabled}
         .checked=${this.checked || nothing}
         .value=${this.value || nothing}

diff --git a/tsconfig.json b/tsconfig.json
@@ -57,6 +57,7 @@
         },
         "globalAttributes": [
           "align-self",
+          "inert",
           "sbb-dialog-close",
           "sbb-navigation-close",
           "sbb-navigation-section-close",