refactor: replace [rtl] and [ltr] selectors with :dir (#3084)

--------- Co-authored-by: Tommmaso Menga <[email protected]>
sbb-design-systems · Sep 18, 2024 · 164e3bc · 164e3bc
1 parent 9c8fecc
commit 164e3bc
Show file tree

Hide file tree

Showing 93 changed files with 20 additions and 226 deletions.
diff --git a/src/elements-experimental/timetable-row/__snapshots__/timetable-row.snapshot.spec.snap.js b/src/elements-experimental/timetable-row/__snapshots__/timetable-row.snapshot.spec.snap.js
@@ -17,7 +17,6 @@ snapshots["sbb-timetable-row renders defaultTrip Shadow DOM"] =
   <sbb-card-button
     data-action=""
     data-button=""
-    dir="ltr"
     role="button"
     slot="action"
     tabindex="0"
@@ -98,7 +97,6 @@ snapshots["sbb-timetable-row renders platform Shadow DOM"] =
   <sbb-card-button
     data-action=""
     data-button=""
-    dir="ltr"
     role="button"
     slot="action"
     tabindex="0"
@@ -198,7 +196,6 @@ snapshots["sbb-timetable-row renders bus strip Shadow DOM"] =
   <sbb-card-button
     data-action=""
     data-button=""
-    dir="ltr"
     role="button"
     slot="action"
     tabindex="0"
@@ -294,7 +291,6 @@ snapshots["sbb-timetable-row renders loading state Shadow DOM"] =
   <sbb-card-badge
     class="sbb-loading__badge"
     color="charcoal"
-    dir="ltr"
     role="text"
     slot="badge"
   >

diff --git a/src/elements/accordion/__snapshots__/accordion.snapshot.spec.snap.js b/src/elements/accordion/__snapshots__/accordion.snapshot.spec.snap.js
@@ -15,7 +15,6 @@ snapshots["sbb-accordion renders DOM"] =
       data-button=""
       data-size="l"
       data-slot-names="unnamed"
-      dir="ltr"
       id="sbb-expansion-panel-header-1"
       role="button"
       slot="header"
@@ -46,7 +45,6 @@ snapshots["sbb-accordion renders DOM"] =
       data-button=""
       data-size="l"
       data-slot-names="unnamed"
-      dir="ltr"
       id="sbb-expansion-panel-header-2"
       role="button"
       slot="header"

diff --git a/src/elements/action-group/__snapshots__/action-group.snapshot.spec.snap.js b/src/elements/action-group/__snapshots__/action-group.snapshot.spec.snap.js
@@ -14,7 +14,6 @@ snapshots["sbb-action-group renders renders DOM"] =
     data-button=""
     data-sbb-button=""
     data-slot-names="unnamed"
-    dir="ltr"
     role="button"
     size="l"
     tabindex="0"
@@ -26,7 +25,6 @@ snapshots["sbb-action-group renders renders DOM"] =
     data-link=""
     data-sbb-link=""
     data-slot-names="unnamed"
-    dir="ltr"
     href="https://github.com/sbb-design-systems/lyne-components"
     icon-name="chevron-small-left-small"
     icon-placement="start"

diff --git a/src/elements/alert/alert/__snapshots__/alert.snapshot.spec.snap.js b/src/elements/alert/alert/__snapshots__/alert.snapshot.spec.snap.js
@@ -61,7 +61,6 @@ snapshots["sbb-alert should render default properties Shadow DOM"] =
           data-action=""
           data-button=""
           data-sbb-button=""
-          dir="ltr"
           icon-name="cross-small"
           negative=""
           role="button"
@@ -133,7 +132,6 @@ snapshots["sbb-alert should render customized properties Shadow DOM"] =
           data-link=""
           data-sbb-link=""
           data-slot-names="unnamed"
-          dir="ltr"
           href="https://www.sbb.ch"
           negative=""
           rel="noopener"
@@ -158,7 +156,6 @@ snapshots["sbb-alert should render customized properties Shadow DOM"] =
           data-action=""
           data-button=""
           data-sbb-button=""
-          dir="ltr"
           icon-name="cross-small"
           negative=""
           role="button"

diff --git a/...rid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.snapshot.spec.snap.js b/...rid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.snapshot.spec.snap.js
@@ -6,7 +6,6 @@ snapshots["sbb-autocomplete-grid-button renders DOM"] =
   aria-disabled="false"
   data-action=""
   data-button=""
-  dir="ltr"
   icon-name="pie-small"
   id="sbb-autocomplete-grid-button-1"
   role="button"
@@ -35,7 +34,6 @@ snapshots["sbb-autocomplete-grid-button renders disabled DOM"] =
   aria-disabled="true"
   data-action=""
   data-button=""
-  dir="ltr"
   disabled=""
   icon-name="pie-small"
   id="sbb-autocomplete-grid-button-3"
@@ -65,7 +63,6 @@ snapshots["sbb-autocomplete-grid-button renders negative without icon DOM"] =
   aria-disabled="false"
   data-action=""
   data-button=""
-  dir="ltr"
   id="sbb-autocomplete-grid-button-5"
   negative=""
   role="button"

diff --git a/...te-grid/autocomplete-grid-cell/__snapshots__/autocomplete-grid-cell.snapshot.spec.snap.js b/...te-grid/autocomplete-grid-cell/__snapshots__/autocomplete-grid-cell.snapshot.spec.snap.js
@@ -7,7 +7,6 @@ snapshots["sbb-autocomplete-grid-cell renders DOM"] =
     aria-disabled="false"
     data-action=""
     data-button=""
-    dir="ltr"
     icon-name="pie-small"
     id="sbb-autocomplete-grid-button-1"
     role="button"

diff --git a/...lete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.snapshot.spec.snap.js b/...lete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.snapshot.spec.snap.js
@@ -20,7 +20,6 @@ snapshots["sbb-autocomplete-grid-row renders DOM"] =
       aria-disabled="false"
       data-action=""
       data-button=""
-      dir="ltr"
       icon-name="pie-small"
       id="sbb-autocomplete-grid-button-1"
       role="button"

diff --git a/...autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.snapshot.spec.snap.js b/...autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.snapshot.spec.snap.js
@@ -4,7 +4,6 @@ export const snapshots = {};
 snapshots["sbb-autocomplete-grid Safari DOM"] = 
 `<sbb-autocomplete-grid
   data-state="closed"
-  dir="ltr"
   id="sbb-autocomplete-grid-1"
   role="grid"
 >
@@ -25,7 +24,6 @@ snapshots["sbb-autocomplete-grid Safari DOM"] =
         aria-disabled="false"
         data-action=""
         data-button=""
-        dir="ltr"
         icon-name="dog-small"
         id="sbb-autocomplete-grid-button-1"
         role="button"
@@ -50,7 +48,6 @@ snapshots["sbb-autocomplete-grid Safari DOM"] =
         aria-disabled="false"
         data-action=""
         data-button=""
-        dir="ltr"
         icon-name="dog-small"
         id="sbb-autocomplete-grid-button-2"
         role="button"
@@ -95,10 +92,7 @@ snapshots["sbb-autocomplete-grid Safari Shadow DOM"] =
 /* end snapshot sbb-autocomplete-grid Safari Shadow DOM */
 
 snapshots["sbb-autocomplete-grid Chrome-Firefox DOM"] = 
-`<sbb-autocomplete-grid
-  data-state="closed"
-  dir="ltr"
->
+`<sbb-autocomplete-grid data-state="closed">
   <sbb-autocomplete-grid-row
     id="sbb-autocomplete-grid-row-1"
     role="row"
@@ -116,7 +110,6 @@ snapshots["sbb-autocomplete-grid Chrome-Firefox DOM"] =
         aria-disabled="false"
         data-action=""
         data-button=""
-        dir="ltr"
         icon-name="dog-small"
         id="sbb-autocomplete-grid-button-1"
         role="button"
@@ -141,7 +134,6 @@ snapshots["sbb-autocomplete-grid Chrome-Firefox DOM"] =
         aria-disabled="false"
         data-action=""
         data-button=""
-        dir="ltr"
         icon-name="dog-small"
         id="sbb-autocomplete-grid-button-2"
         role="button"

diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
@@ -3,7 +3,7 @@ import { customElement } from 'lit/decorators.js';
 import { SbbAutocompleteBaseElement } from '../../autocomplete.js';
 import { getNextElementIndex } from '../../core/a11y.js';
 import { hostAttributes } from '../../core/decorators.js';
-import { getDocumentWritingMode, isSafari } from '../../core/dom.js';
+import { isSafari } from '../../core/dom.js';
 import { setAriaComboBoxAttributes } from '../../core/overlay.js';
 import type { SbbDividerElement } from '../../divider.js';
 import type { SbbOptGroupElement, SbbOptionElement } from '../../option.js';
@@ -33,7 +33,6 @@ const ariaRoleOnHost = isSafari;
  */
 @customElement('sbb-autocomplete-grid')
 @hostAttributes({
-  dir: getDocumentWritingMode(),
   role: ariaRoleOnHost ? 'grid' : null,
 })
 export class SbbAutocompleteGridElement extends SbbAutocompleteBaseElement {

diff --git a/src/elements/autocomplete/__snapshots__/autocomplete.snapshot.spec.snap.js b/src/elements/autocomplete/__snapshots__/autocomplete.snapshot.spec.snap.js
@@ -4,7 +4,6 @@ export const snapshots = {};
 snapshots["sbb-autocomplete renders standalone Safari DOM"] = 
 `<sbb-autocomplete
   data-state="closed"
-  dir="ltr"
   id="sbb-autocomplete-1"
   origin="origin"
   role="listbox"
@@ -86,7 +85,6 @@ snapshots["sbb-autocomplete renders in form field Safari DOM"] =
   >
   <sbb-autocomplete
     data-state="closed"
-    dir="ltr"
     id="sbb-autocomplete-3"
     role="listbox"
   >
@@ -154,7 +152,6 @@ snapshots["sbb-autocomplete renders in form field Safari Shadow DOM"] =
 snapshots["sbb-autocomplete renders standalone Chrome-Firefox DOM"] = 
 `<sbb-autocomplete
   data-state="closed"
-  dir="ltr"
   origin="origin"
   trigger="trigger"
 >
@@ -236,10 +233,7 @@ snapshots["sbb-autocomplete renders in form field Chrome-Firefox DOM"] =
     autocomplete="off"
     role="combobox"
   >
-  <sbb-autocomplete
-    data-state="closed"
-    dir="ltr"
-  >
+  <sbb-autocomplete data-state="closed">
     <sbb-option
       aria-selected="false"
       data-slot-names="unnamed"

diff --git a/src/elements/autocomplete/autocomplete.ts b/src/elements/autocomplete/autocomplete.ts
@@ -2,7 +2,7 @@ import { customElement } from 'lit/decorators.js';
 
 import { getNextElementIndex } from '../core/a11y.js';
 import { hostAttributes } from '../core/decorators.js';
-import { getDocumentWritingMode, isSafari } from '../core/dom.js';
+import { isSafari } from '../core/dom.js';
 import { setAriaComboBoxAttributes } from '../core/overlay.js';
 import type { SbbOptGroupElement, SbbOptionElement } from '../option.js';
 
@@ -30,7 +30,6 @@ const ariaRoleOnHost = isSafari;
  */
 @customElement('sbb-autocomplete')
 @hostAttributes({
-  dir: getDocumentWritingMode(),
   role: ariaRoleOnHost ? 'listbox' : null,
 })
 export class SbbAutocompleteElement extends SbbAutocompleteBaseElement {

diff --git a/...elements/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.snapshot.spec.snap.js b/...elements/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.snapshot.spec.snap.js
@@ -9,7 +9,6 @@ snapshots["sbb-breadcrumb-group renders DOM"] =
   <sbb-breadcrumb
     data-action=""
     data-link=""
-    dir="ltr"
     href="https://example.com"
     icon-name="pie-small"
     slot="li-0"
@@ -18,7 +17,6 @@ snapshots["sbb-breadcrumb-group renders DOM"] =
   <sbb-breadcrumb
     data-action=""
     data-link=""
-    dir="ltr"
     href="https://example.com/one"
     slot="li-1"
   >
@@ -28,7 +26,6 @@ snapshots["sbb-breadcrumb-group renders DOM"] =
     aria-current="page"
     data-action=""
     data-link=""
-    dir="ltr"
     href="https://example.com/one"
     slot="li-2"
   >

diff --git a/src/elements/breadcrumb/breadcrumb/__snapshots__/breadcrumb.snapshot.spec.snap.js b/src/elements/breadcrumb/breadcrumb/__snapshots__/breadcrumb.snapshot.spec.snap.js
@@ -5,7 +5,6 @@ snapshots["sbb-breadcrumb renders with text DOM"] =
 `<sbb-breadcrumb
   data-action=""
   data-link=""
-  dir="ltr"
   download=""
   href="https://example.com/test"
   rel="subsection"
@@ -41,7 +40,6 @@ snapshots["sbb-breadcrumb renders with icon DOM"] =
 `<sbb-breadcrumb
   data-action=""
   data-link=""
-  dir="ltr"
   href="/"
   icon-name="house-small"
 >
@@ -79,7 +77,6 @@ snapshots["sbb-breadcrumb renders with icon and text DOM"] =
 `<sbb-breadcrumb
   data-action=""
   data-link=""
-  dir="ltr"
   href="/"
   icon-name="house-small"
 >

diff --git a/src/elements/breadcrumb/breadcrumb/breadcrumb.snapshot.spec.ts b/src/elements/breadcrumb/breadcrumb/breadcrumb.snapshot.spec.ts
@@ -52,7 +52,7 @@ describe(`sbb-breadcrumb`, () => {
 
     beforeEach(async () => {
       element = await fixture(html`
-        <sbb-breadcrumb dir="ltr" data-action data-link href="/" icon-name="house-small">
+        <sbb-breadcrumb data-action data-link href="/" icon-name="house-small">
           Home
         </sbb-breadcrumb>
       `);

diff --git a/src/elements/button/button-link/__snapshots__/button-link.snapshot.spec.snap.js b/src/elements/button/button-link/__snapshots__/button-link.snapshot.spec.snap.js
@@ -7,7 +7,6 @@ snapshots["sbb-button-link renders a sbb-button-link without icon DOM"] =
   data-link=""
   data-sbb-button=""
   data-slot-names="unnamed"
-  dir="ltr"
   download=""
   href="https://www.sbb.ch"
   rel="noopener"
@@ -46,7 +45,6 @@ snapshots["sbb-button-link renders a disabled sbb-button-link with slotted icon
   data-link=""
   data-sbb-button=""
   data-slot-names="icon unnamed"
-  dir="ltr"
   disabled=""
   href="https://www.sbb.ch"
   size="l"

diff --git a/src/elements/button/button-static/__snapshots__/button-static.snapshot.spec.snap.js b/src/elements/button/button-static/__snapshots__/button-static.snapshot.spec.snap.js
@@ -6,7 +6,6 @@ snapshots["sbb-button-static renders without icon DOM"] =
   data-action=""
   data-sbb-button=""
   data-slot-names="unnamed"
-  dir="ltr"
   disabled=""
   negative=""
   size="m"
@@ -33,7 +32,6 @@ snapshots["sbb-button-static renders with slotted icon DOM"] =
   data-action=""
   data-sbb-button=""
   data-slot-names="icon unnamed"
-  dir="ltr"
   size="l"
 >
   <sbb-icon

diff --git a/src/elements/button/button/__snapshots__/button.snapshot.spec.snap.js b/src/elements/button/button/__snapshots__/button.snapshot.spec.snap.js
@@ -8,7 +8,6 @@ snapshots["sbb-button renders a sbb-button without icon DOM"] =
   data-button=""
   data-sbb-button=""
   data-slot-names="unnamed"
-  dir="ltr"
   disabled=""
   form="formid"
   name="name"
@@ -42,7 +41,6 @@ snapshots["sbb-button renders a sbb-button with slotted icon DOM"] =
   data-button=""
   data-sbb-button=""
   data-slot-names="icon unnamed"
-  dir="ltr"
   role="button"
   size="l"
   tabindex="0"

diff --git a/src/elements/button/mini-button-group/__snapshots__/mini-button-group.snapshot.spec.snap.js b/src/elements/button/mini-button-group/__snapshots__/mini-button-group.snapshot.spec.snap.js
@@ -9,7 +9,6 @@ snapshots["sbb-mini-button-group renders DOM"] =
   <sbb-mini-button
     data-action=""
     data-button=""
-    dir="ltr"
     icon-name="pen-small"
     role="button"
     slot="li-0"
@@ -26,7 +25,6 @@ snapshots["sbb-mini-button-group renders DOM"] =
   <sbb-mini-button
     data-action=""
     data-button=""
-    dir="ltr"
     icon-name="pen-small"
     role="button"
     slot="li-2"
@@ -70,7 +68,6 @@ snapshots["sbb-mini-button-group renders negative DOM"] =
   <sbb-mini-button
     data-action=""
     data-button=""
-    dir="ltr"
     icon-name="pen-small"
     negative=""
     role="button"
@@ -81,7 +78,6 @@ snapshots["sbb-mini-button-group renders negative DOM"] =
   <sbb-mini-button
     data-action=""
     data-button=""
-    dir="ltr"
     icon-name="pen-small"
     negative=""
     role="button"