refactor(sbb-screen-reader-only): rename component name from `sbb-scr…

…eenreader-only` to `sbb-screeen-reader-only` BREAKING CHANGE: renamed `sbb-screenreader-only` to `sbb-screeen-reader-only`
sbb-design-systems · Mar 25, 2024 · 539d802 · 539d802
1 parent fe3c665
commit 539d802
Show file tree

Hide file tree

Showing 64 changed files with 281 additions and 299 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 */
@@ -77,7 +77,7 @@ snapshots["sbb-breadcrumb renders with icon and text"] =
 `;
 /* end snapshot sbb-breadcrumb renders with icon and text */
 
-snapshots["sbb-breadcrumb A11y tree Chrome"] =
+snapshots["sbb-breadcrumb A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",

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
@@ -36,9 +36,9 @@ snapshots["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 ShadowDom */
@@ -186,9 +186,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
@@ -36,9 +36,9 @@ snapshots["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 ShadowDom */
@@ -186,9 +186,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
@@ -36,9 +36,9 @@ snapshots["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 ShadowDom */
@@ -186,9 +186,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
@@ -36,9 +36,9 @@ snapshots["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 ShadowDom */
@@ -186,9 +186,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,40 +3,40 @@ export const snapshots = {};
 
 snapshots["sbb-card-button 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 should render an active sbb-card-button */
 
 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 */
 
 snapshots["sbb-card-button with ssrHydratedFixture 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 ssrHydratedFixture should render an active sbb-card-button */
 
 snapshots["sbb-card-button with ssrNonHydratedFixture 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 ssrNonHydratedFixture 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 should render an sbb-card-link as a link opening in a n
   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 should render an sbb-card-link as a link opening in a new window */
@@ -30,13 +30,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 */
@@ -50,13 +50,13 @@ snapshots["sbb-card-link with ssrHydratedFixture should render an sbb-card-link
   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 ssrHydratedFixture should render an sbb-card-link as a link opening in a new window */
@@ -70,13 +70,13 @@ snapshots["sbb-card-link with ssrNonHydratedFixture should render an sbb-card-li
   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 ssrNonHydratedFixture 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-group/__snapshots__/checkbox-group.spec.snap.js b/src/components/checkbox/checkbox-group/__snapshots__/checkbox-group.spec.snap.js
@@ -49,7 +49,7 @@ snapshots["sbb-checkbox-group renders - ShadowDom"] =
 `;
 /* end snapshot sbb-checkbox-group renders - ShadowDom */
 
-snapshots["sbb-checkbox-group A11y tree Chrome"] =
+snapshots["sbb-checkbox-group A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",