From fdd2862c31e295abaac2e9f315039b8f43bf7456 Mon Sep 17 00:00:00 2001
From: Jeri Peier <jeremias.peier@sbb.ch>
Date: Thu, 19 Sep 2024 18:39:17 +0200
Subject: [PATCH] refactor: use inert attribute instead of property hack
 (#3099)

---
 src/elements/core/controllers/inert-controller.spec.ts        | 4 ++--
 src/elements/map-container/map-container.ts                   | 2 +-
 .../selection-expansion-panel/selection-expansion-panel.ts    | 2 +-
 src/elements/toggle/toggle-option/toggle-option.ts            | 2 +-
 tsconfig.json                                                 | 1 +
 5 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/elements/core/controllers/inert-controller.spec.ts b/src/elements/core/controllers/inert-controller.spec.ts
index f31ef07914..6217f1cf3e 100644
--- 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
index 23d0fe04bc..00b4949c4d 100644
--- 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
index 623f8cf61a..d486c6223b 100644
--- 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
index 84902238da..884f9313ea 100644
--- 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
index e411d42a8e..44f16605df 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -57,6 +57,7 @@
         },
         "globalAttributes": [
           "align-self",
+          "inert",
           "sbb-dialog-close",
           "sbb-navigation-close",
           "sbb-navigation-section-close",