refactor: rename component name from sbb-screenreader-only to `sbb-…

…screeen-reader-only` (#2520) As in English language `screen reader` is written in two words, we like to change the naming and also aligning it to existing SASS mixin name. BREAKING CHANGE: renamed component `sbb-screenreader-only` to `sbb-screeen-reader-only`.
sbb-design-systems · Mar 27, 2024 · 6fbf085 · 6fbf085
1 parent c29cb56
commit 6fbf085
Show file tree

Hide file tree

Showing 58 changed files with 268 additions and 221 deletions.
diff --git a/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js b/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js
@@ -17,9 +17,9 @@ snapshots["sbb-breadcrumb renders with text"] =
     <slot>
     </slot>
   </span>
-  <sbb-screenreader-only>
+  <sbb-screen-reader-only>
     . Link target opens in a new window.
-  </sbb-screenreader-only>
+  </sbb-screen-reader-only>
 </a>
 `;
 /* end snapshot sbb-breadcrumb renders with text */

diff --git a/src/components/button/button-link/__snapshots__/button-link.spec.snap.js b/src/components/button/button-link/__snapshots__/button-link.spec.snap.js
@@ -39,9 +39,9 @@ snapshots["sbb-button-link renders a sbb-button-link without icon ShadowDom"] =
     <slot>
     </slot>
   </span>
-  <sbb-screenreader-only>
+  <sbb-screen-reader-only>
     . Link target opens in a new window.
-  </sbb-screenreader-only>
+  </sbb-screen-reader-only>
 </a>
 `;
 /* end snapshot sbb-button-link renders a sbb-button-link without icon ShadowDom */

diff --git a/src/components/button/secondary-button-link/__snapshots__/secondary-button-link.spec.snap.js b/src/components/button/secondary-button-link/__snapshots__/secondary-button-link.spec.snap.js
@@ -39,9 +39,9 @@ snapshots["sbb-secondary-button-link renders a sbb-secondary-button-link without
     <slot>
     </slot>
   </span>
-  <sbb-screenreader-only>
+  <sbb-screen-reader-only>
     . Link target opens in a new window.
-  </sbb-screenreader-only>
+  </sbb-screen-reader-only>
 </a>
 `;
 /* end snapshot sbb-secondary-button-link renders a sbb-secondary-button-link without icon ShadowDom */

diff --git a/src/components/button/tertiary-button-link/__snapshots__/tertiary-button-link.spec.snap.js b/src/components/button/tertiary-button-link/__snapshots__/tertiary-button-link.spec.snap.js
@@ -39,9 +39,9 @@ snapshots["sbb-tertiary-button-link renders a sbb-tertiary-button-link without i
     <slot>
     </slot>
   </span>
-  <sbb-screenreader-only>
+  <sbb-screen-reader-only>
     . Link target opens in a new window.
-  </sbb-screenreader-only>
+  </sbb-screen-reader-only>
 </a>
 `;
 /* end snapshot sbb-tertiary-button-link renders a sbb-tertiary-button-link without icon ShadowDom */

diff --git a/...ponents/button/transparent-button-link/__snapshots__/transparent-button-link.spec.snap.js b/...ponents/button/transparent-button-link/__snapshots__/transparent-button-link.spec.snap.js
@@ -39,9 +39,9 @@ snapshots["sbb-transparent-button-link renders a sbb-transparent-button-link wit
     <slot>
     </slot>
   </span>
-  <sbb-screenreader-only>
+  <sbb-screen-reader-only>
     . Link target opens in a new window.
-  </sbb-screenreader-only>
+  </sbb-screen-reader-only>
 </a>
 `;
 /* end snapshot sbb-transparent-button-link renders a sbb-transparent-button-link without icon ShadowDom */

diff --git a/src/components/calendar/__snapshots__/calendar.spec.snap.js b/src/components/calendar/__snapshots__/calendar.spec.snap.js
@@ -33,9 +33,9 @@ snapshots["sbb-calendar renders"] =
         >
         </sbb-icon>
       </button>
-      <sbb-screenreader-only role="status">
+      <sbb-screen-reader-only role="status">
         January 2023
-      </sbb-screenreader-only>
+      </sbb-screen-reader-only>
     </div>
     <sbb-secondary-button
       aria-label="Change to the next month"
@@ -56,57 +56,57 @@ snapshots["sbb-calendar renders"] =
       <thead class="sbb-calendar__table-header">
         <tr class="sbb-calendar__table-header-row">
           <th class="sbb-calendar__table-header">
-            <sbb-screenreader-only>
+            <sbb-screen-reader-only>
               Monday
-            </sbb-screenreader-only>
+            </sbb-screen-reader-only>
             <span aria-hidden="true">
               M
             </span>
           </th>
           <th class="sbb-calendar__table-header">
-            <sbb-screenreader-only>
+            <sbb-screen-reader-only>
               Tuesday
-            </sbb-screenreader-only>
+            </sbb-screen-reader-only>
             <span aria-hidden="true">
               T
             </span>
           </th>
           <th class="sbb-calendar__table-header">
-            <sbb-screenreader-only>
+            <sbb-screen-reader-only>
               Wednesday
-            </sbb-screenreader-only>
+            </sbb-screen-reader-only>
             <span aria-hidden="true">
               W
             </span>
           </th>
           <th class="sbb-calendar__table-header">
-            <sbb-screenreader-only>
+            <sbb-screen-reader-only>
               Thursday
-            </sbb-screenreader-only>
+            </sbb-screen-reader-only>
             <span aria-hidden="true">
               T
             </span>
           </th>
           <th class="sbb-calendar__table-header">
-            <sbb-screenreader-only>
+            <sbb-screen-reader-only>
               Friday
-            </sbb-screenreader-only>
+            </sbb-screen-reader-only>
             <span aria-hidden="true">
               F
             </span>
           </th>
           <th class="sbb-calendar__table-header">
-            <sbb-screenreader-only>
+            <sbb-screen-reader-only>
               Saturday
-            </sbb-screenreader-only>
+            </sbb-screen-reader-only>
             <span aria-hidden="true">
               S
             </span>
           </th>
           <th class="sbb-calendar__table-header">
-            <sbb-screenreader-only>
+            <sbb-screen-reader-only>
               Sunday
-            </sbb-screenreader-only>
+            </sbb-screen-reader-only>
             <span aria-hidden="true">
               S
             </span>

diff --git a/src/components/calendar/calendar.ts b/src/components/calendar/calendar.ts
@@ -31,7 +31,7 @@ import style from './calendar.scss?lit&inline';
 
 import '../button/secondary-button';
 import '../icon';
-import '../screenreader-only';
+import '../screen-reader-only';
 
 /**
  * In keyboard navigation, the cell's index and the element's index in its month / year batch must be distinguished;
@@ -819,9 +819,9 @@ export class SbbCalendarElement<T = Date> extends LitElement {
         <div class="sbb-calendar__controls-month">
           ${this._createLabelForDayView(this._activeDate)}
           ${this._wide ? this._createLabelForDayView(nextMonthActiveDate!) : nothing}
-          <sbb-screenreader-only role="status">
+          <sbb-screen-reader-only role="status">
             ${this._createAriaLabelForDayView(this._activeDate, nextMonthActiveDate!)}
-          </sbb-screenreader-only>
+          </sbb-screen-reader-only>
         </div>
         ${this._getArrow(
           'right',
@@ -899,7 +899,7 @@ export class SbbCalendarElement<T = Date> extends LitElement {
     return this._weekdays.map(
       (day: Weekday) => html`
         <th class="sbb-calendar__table-header">
-          <sbb-screenreader-only>${day.long}</sbb-screenreader-only>
+          <sbb-screen-reader-only>${day.long}</sbb-screen-reader-only>
           <span aria-hidden="true">${day.narrow}</span>
         </th>
       `,
@@ -1009,7 +1009,7 @@ export class SbbCalendarElement<T = Date> extends LitElement {
         ${this._chosenYear} ${this._wide ? ` - ${this._chosenYear! + 1}` : nothing}
         <sbb-icon name="chevron-small-up-small"></sbb-icon>
       </button>
-      <sbb-screenreader-only role="status"> ${this._chosenYear} </sbb-screenreader-only>`;
+      <sbb-screen-reader-only role="status"> ${this._chosenYear} </sbb-screen-reader-only>`;
   }
 
   /** Creates the table for the month selection view. */
@@ -1156,7 +1156,7 @@ export class SbbCalendarElement<T = Date> extends LitElement {
         ${yearLabel}
         <sbb-icon name="chevron-small-up-small"></sbb-icon>
       </button>
-      <sbb-screenreader-only role="status"> ${yearLabel} </sbb-screenreader-only>
+      <sbb-screen-reader-only role="status"> ${yearLabel} </sbb-screen-reader-only>
     `;
   }
 

diff --git a/src/components/card/card-button/__snapshots__/card-button.e2e.snap.js b/src/components/card/card-button/__snapshots__/card-button.e2e.snap.js
@@ -3,10 +3,10 @@ export const snapshots = {};
 
 snapshots["sbb-card-button with csrFixture should render an active sbb-card-button"] = 
 `<span class="sbb-action-base sbb-card-button">
-  <sbb-screenreader-only>
+  <sbb-screen-reader-only>
     <slot>
     </slot>
-  </sbb-screenreader-only>
+  </sbb-screen-reader-only>
 </span>
 `;
 /* end snapshot sbb-card-button with csrFixture should render an active sbb-card-button */

diff --git a/src/components/card/card-link/__snapshots__/card-link.e2e.snap.js b/src/components/card/card-link/__snapshots__/card-link.e2e.snap.js
@@ -10,13 +10,13 @@ snapshots["sbb-card-link with csrFixture should render an sbb-card-link as a lin
   tabindex="-1"
   target="_blank"
 >
-  <sbb-screenreader-only>
+  <sbb-screen-reader-only>
     <slot>
     </slot>
-  </sbb-screenreader-only>
-  <sbb-screenreader-only>
+  </sbb-screen-reader-only>
+  <sbb-screen-reader-only>
     . Link target opens in a new window.
-  </sbb-screenreader-only>
+  </sbb-screen-reader-only>
 </a>
 `;
 /* end snapshot sbb-card-link with csrFixture should render an sbb-card-link as a link opening in a new window */

diff --git a/src/components/card/common/card-action-common.ts b/src/components/card/common/card-action-common.ts
@@ -11,7 +11,7 @@ import {
 import { AgnosticMutationObserver } from '../../core/observers';
 import type { SbbCardElement } from '../card';
 
-import '../../screenreader-only';
+import '../../screen-reader-only';
 
 import style from './card-action.scss?lit&inline';
 
@@ -101,9 +101,9 @@ export const SbbCardActionCommonElementMixin = <
 
     protected override renderTemplate(): TemplateResult {
       return html`
-        <sbb-screenreader-only>
+        <sbb-screen-reader-only>
           <slot></slot>
-        </sbb-screenreader-only>
+        </sbb-screen-reader-only>
       `;
     }
   }

diff --git a/src/components/checkbox/checkbox/__snapshots__/checkbox.spec.snap.js b/src/components/checkbox/checkbox/__snapshots__/checkbox.spec.snap.js
@@ -34,8 +34,8 @@ snapshots["sbb-checkbox should render unchecked Shadow DOM"] =
     </span>
     <slot name="subtext">
     </slot>
-    <sbb-screenreader-only class="sbb-checkbox__expanded-label">
-    </sbb-screenreader-only>
+    <sbb-screen-reader-only class="sbb-checkbox__expanded-label">
+    </sbb-screen-reader-only>
   </span>
 </span>
 `;
@@ -75,8 +75,8 @@ snapshots["sbb-checkbox should render checked Shadow DOM"] =
     </span>
     <slot name="subtext">
     </slot>
-    <sbb-screenreader-only class="sbb-checkbox__expanded-label">
-    </sbb-screenreader-only>
+    <sbb-screen-reader-only class="sbb-checkbox__expanded-label">
+    </sbb-screen-reader-only>
   </span>
 </span>
 `;
@@ -116,8 +116,8 @@ snapshots["sbb-checkbox should render indeterminate Shadow DOM"] =
     </span>
     <slot name="subtext">
     </slot>
-    <sbb-screenreader-only class="sbb-checkbox__expanded-label">
-    </sbb-screenreader-only>
+    <sbb-screen-reader-only class="sbb-checkbox__expanded-label">
+    </sbb-screen-reader-only>
   </span>
 </span>
 `;
@@ -157,8 +157,8 @@ snapshots["sbb-checkbox should render unchecked disabled Shadow DOM"] =
     </span>
     <slot name="subtext">
     </slot>
-    <sbb-screenreader-only class="sbb-checkbox__expanded-label">
-    </sbb-screenreader-only>
+    <sbb-screen-reader-only class="sbb-checkbox__expanded-label">
+    </sbb-screen-reader-only>
   </span>
 </span>
 `;

diff --git a/src/components/checkbox/checkbox/checkbox.ts b/src/components/checkbox/checkbox/checkbox.ts
@@ -29,7 +29,7 @@ import type { SbbCheckboxGroupElement } from '../checkbox-group';
 import style from './checkbox.scss?lit&inline';
 
 import '../../icon';
-import '../../screenreader-only';
+import '../../screen-reader-only';
 import '../../visual-checkbox';
 
 export type SbbCheckboxStateChange = Extract<
@@ -216,9 +216,9 @@ export class SbbCheckboxElement extends UpdateScheduler(
             </span>
           </span>
           <slot name="subtext"></slot>
-          <sbb-screenreader-only class="sbb-checkbox__expanded-label">
+          <sbb-screen-reader-only class="sbb-checkbox__expanded-label">
             ${this._selectionPanelExpandedLabel}
-          </sbb-screenreader-only>
+          </sbb-screen-reader-only>
         </span>
       </span>
     `;

diff --git a/src/components/core/common-behaviors/link-base-element.ts b/src/components/core/common-behaviors/link-base-element.ts
@@ -9,7 +9,7 @@ import { SbbActionBaseElement } from './action-base-element';
 import { hostAttributes } from './host-attributes';
 import { LanguageController } from './language-controller';
 
-import '../../screenreader-only';
+import '../../screen-reader-only';
 
 /** Enumeration for 'target' attribute in <a> HTML tag. */
 export type LinkTargetType = '_blank' | '_self' | '_parent' | '_top';
@@ -95,8 +95,8 @@ export abstract class SbbLinkBaseElement extends SbbActionBaseElement {
       >
         ${this.renderTemplate()}
         ${!!this.href && this.target === '_blank'
-          ? html`<sbb-screenreader-only
-              >. ${i18nTargetOpensInNewWindow[this.language.current]}</sbb-screenreader-only
+          ? html`<sbb-screen-reader-only
+              >. ${i18nTargetOpensInNewWindow[this.language.current]}</sbb-screen-reader-only
             >`
           : nothing}
       </a>

diff --git a/src/components/core/common-behaviors/named-slot-list-mixin.ts b/src/components/core/common-behaviors/named-slot-list-mixin.ts
@@ -6,7 +6,7 @@ import { getLocalName } from '../dom';
 import type { AbstractConstructor } from './constructor';
 import { SbbHydrationMixin, type SbbHydrationMixinType } from './hydration-mixin';
 
-import '../../screenreader-only';
+import '../../screen-reader-only';
 
 const SSR_CHILD_COUNT_ATTRIBUTE = 'data-ssr-child-count';
 const SLOTNAME_PREFIX = 'li';
@@ -128,7 +128,7 @@ export const SbbNamedSlotListMixin = <
           ${this.renderHiddenSlot()}
         `;
       } else if (listSlotNames.length === 1) {
-        return html`<sbb-screenreader-only>${attributes.ariaLabel}</sbb-screenreader-only>
+        return html`<sbb-screen-reader-only>${attributes.ariaLabel}</sbb-screen-reader-only>
           <span class=${attributes.class || (this.localName ?? getLocalName(this))}>
             <span><slot name=${listSlotNames[0]}></slot></span>
           </span>

diff --git a/src/components/core/timetable/access-leg-helper.ts b/src/components/core/timetable/access-leg-helper.ts
@@ -101,7 +101,7 @@ function renderTransferTime(
     <span class="sbb-pearl-chain__time-transfer sbb-pearl-chain__time-transfer--${type}">
       <sbb-icon name=${icon}></sbb-icon>
       <time datetime=${duration + 'M'}>
-        <span class="sbb-screenreaderonly">
+        <span class="sbb-screen-reader-only">
           ${!label && type
             ? type === 'departure'
               ? i18nWalkingDistanceDeparture[currentLanguage]
@@ -111,7 +111,7 @@ function renderTransferTime(
         </span>
         ${duration}
         <span class="sbb-pearl-chain__time-walktime-prime-symbol" aria-hidden="true">'</span>
-        <span class="sbb-screenreaderonly">min</span>
+        <span class="sbb-screen-reader-only">min</span>
       </time>
     </span>
   `;
@@ -129,7 +129,7 @@ function renderWalkTime(
     <span class="sbb-pearl-chain__time-walktime sbb-pearl-chain__time-walktime--${variant}">
       <sbb-icon name="walk-small"></sbb-icon>
       <time datetime=${duration + 'M'}>
-        <span class="sbb-screenreaderonly">${label}</span>
+        <span class="sbb-screen-reader-only">${label}</span>
         ${duration}
         <span class="sbb-pearl-chain__time-walktime-prime-symbol" aria-hidden="true">'</span>
       </time>

diff --git a/src/components/dialog/__snapshots__/dialog.spec.snap.js b/src/components/dialog/__snapshots__/dialog.spec.snap.js
@@ -47,8 +47,8 @@ snapshots["sbb-dialog renders"] =
     </div>
   </div>
 </div>
-<sbb-screenreader-only aria-live="polite">
-</sbb-screenreader-only>
+<sbb-screen-reader-only aria-live="polite">
+</sbb-screen-reader-only>
 `;
 /* end snapshot sbb-dialog renders */