diff --git a/src/components/calendar/__snapshots__/calendar.spec.snap.js b/src/components/calendar/__snapshots__/calendar.spec.snap.js index 25213bccf5..1ae6b6957d 100644 --- a/src/components/calendar/__snapshots__/calendar.spec.snap.js +++ b/src/components/calendar/__snapshots__/calendar.spec.snap.js @@ -33,12 +33,9 @@ snapshots["sbb-calendar renders"] = > - + January 2023 - + - + Monday - + - + Tuesday - + - + Wednesday - + - + Thursday - + - + Friday - + - + Saturday - + - + Sunday - + diff --git a/src/components/calendar/calendar.scss b/src/components/calendar/calendar.scss index 235d8a9d57..da0207e7ac 100644 --- a/src/components/calendar/calendar.scss +++ b/src/components/calendar/calendar.scss @@ -283,10 +283,6 @@ } } -.sbb-calendar__visually-hidden { - @include sbb.screen-reader-only; -} - @keyframes show { from { opacity: 0; diff --git a/src/components/calendar/calendar.ts b/src/components/calendar/calendar.ts index ab1a5075aa..7b1ed8d917 100644 --- a/src/components/calendar/calendar.ts +++ b/src/components/calendar/calendar.ts @@ -26,11 +26,13 @@ import { i18nYearMonthSelection, } from '../core/i18n'; import type { SbbDateLike } from '../core/interfaces'; -import '../button/secondary-button'; -import '../icon'; import style from './calendar.scss?lit&inline'; +import '../button/secondary-button'; +import '../icon'; +import '../screenreader-only'; + /** * In keyboard navigation, the cell's index and the element's index in its month / year batch must be distinguished; * this is necessary because the navigation in the vertical direction using some keys is restricted to a single month for days, @@ -807,9 +809,9 @@ export class SbbCalendarElement extends LitElement {
${this._createLabelForDayView(this._activeDate)} ${this._wide ? this._createLabelForDayView(nextMonthActiveDate!) : nothing} - + ${this._createAriaLabelForDayView(this._activeDate, nextMonthActiveDate!)} - +
${this._getArrow( 'right', @@ -887,7 +889,7 @@ export class SbbCalendarElement extends LitElement { return this._weekdays.map( (day: Weekday) => html` - ${day.long} + ${day.long} `, @@ -999,7 +1001,7 @@ export class SbbCalendarElement extends LitElement { ${this._chosenYear} ${this._wide ? ` - ${this._chosenYear! + 1}` : nothing} - ${this._chosenYear} `; + ${this._chosenYear} `; } /** Creates the table for the month selection view. */ @@ -1140,7 +1142,7 @@ export class SbbCalendarElement extends LitElement { ${yearLabel} - ${yearLabel} + ${yearLabel} `; } diff --git a/src/components/dialog/__snapshots__/dialog.spec.snap.js b/src/components/dialog/__snapshots__/dialog.spec.snap.js index bdd97f5c55..21781e0ded 100644 --- a/src/components/dialog/__snapshots__/dialog.spec.snap.js +++ b/src/components/dialog/__snapshots__/dialog.spec.snap.js @@ -47,11 +47,8 @@ snapshots["sbb-dialog renders"] = - - + + `; /* end snapshot sbb-dialog renders */ diff --git a/src/components/dialog/dialog.e2e.ts b/src/components/dialog/dialog.e2e.ts index f215a4f761..f0dcfb8792 100644 --- a/src/components/dialog/dialog.e2e.ts +++ b/src/components/dialog/dialog.e2e.ts @@ -37,7 +37,7 @@ describe('sbb-dialog', () => {
Action group
`); - ariaLiveRef = element.shadowRoot!.querySelector('span.sbb-screen-reader-only')!; + ariaLiveRef = element.shadowRoot!.querySelector('sbb-screenreader-only')!; }); it('renders', () => { @@ -253,7 +253,7 @@ describe('sbb-dialog', () => {
Action group
`); - ariaLiveRef = element.shadowRoot!.querySelector('span.sbb-screen-reader-only')!; + ariaLiveRef = element.shadowRoot!.querySelector('sbb-screenreader-only')!; await openDialog(element); diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss index 9c43e31982..0313f39d89 100644 --- a/src/components/dialog/dialog.scss +++ b/src/components/dialog/dialog.scss @@ -263,10 +263,6 @@ } // stylelint-enable selector-not-notation -.sbb-screen-reader-only { - @include sbb.screen-reader-only; -} - // It is necessary to use animations with keyframes instead of transitions in order not to alter // the default `display: block` of the modal otherwise it causes several problems, // especially for accessibility. diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts index 4b68d79078..e1f4cc9c03 100644 --- a/src/components/dialog/dialog.ts +++ b/src/components/dialog/dialog.ts @@ -17,12 +17,14 @@ import { AgnosticResizeObserver } from '../core/observers'; import type { SbbOverlayState } from '../core/overlay'; import { applyInertMechanism, removeInertMechanism } from '../core/overlay'; import type { SbbTitleLevel } from '../title'; + +import style from './dialog.scss?lit&inline'; + import '../button/secondary-button'; import '../button/transparent-button'; +import '../screenreader-only'; import '../title'; -import style from './dialog.scss?lit&inline'; - // A global collection of existing dialogs const dialogRefs: SbbDialogElement[] = []; let nextId = 0; @@ -453,11 +455,10 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) { - (this._ariaLiveRef = el as HTMLElement))} - > + > `; } } diff --git a/src/components/journey-header/__snapshots__/journey-header.spec.snap.js b/src/components/journey-header/__snapshots__/journey-header.spec.snap.js index c7f96304ed..8c1f517d20 100644 --- a/src/components/journey-header/__snapshots__/journey-header.spec.snap.js +++ b/src/components/journey-header/__snapshots__/journey-header.spec.snap.js @@ -13,9 +13,9 @@ snapshots["sbb-journey-header renders"] = dir="ltr" > - + Connection from - + A - + to - + B @@ -49,9 +49,9 @@ snapshots["sbb-journey-header renders H1 L-sized round-trip negative"] = dir="ltr" > - + Connection from - + B - + to - + C - + and back to B. - + diff --git a/src/components/journey-header/journey-header.scss b/src/components/journey-header/journey-header.scss index 1c78900e92..e9e443fc5c 100644 --- a/src/components/journey-header/journey-header.scss +++ b/src/components/journey-header/journey-header.scss @@ -35,7 +35,3 @@ sbb-icon { } } } - -.sbb-journey-header__connection--visually-hidden { - @include sbb.screen-reader-only; -} diff --git a/src/components/journey-header/journey-header.ts b/src/components/journey-header/journey-header.ts index 4595bb5eb5..9e706b6e90 100644 --- a/src/components/journey-header/journey-header.ts +++ b/src/components/journey-header/journey-header.ts @@ -6,11 +6,13 @@ import { LanguageController, SbbNegativeMixin } from '../core/common-behaviors'; import { getDocumentWritingMode } from '../core/dom'; import { i18nConnectionFrom, i18nConnectionRoundtrip, i18nConnectionTo } from '../core/i18n'; import type { SbbTitleLevel } from '../title'; -import '../icon'; -import '../title'; import style from './journey-header.scss?lit&inline'; +import '../icon'; +import '../screenreader-only'; +import '../title'; + export type JourneyHeaderSize = 'm' | 'l'; /** @@ -48,21 +50,21 @@ export class SbbJourneyHeaderElement extends SbbNegativeMixin(LitElement) { > - + ${i18nConnectionFrom[this._language.current]}  - + ${this.origin} - +  ${i18nConnectionTo[this._language.current]}  - + ${this.destination} ${this.roundTrip - ? html` + ? html` ${i18nConnectionRoundtrip(this.origin)[this._language.current]} - ` + ` : nothing} diff --git a/src/components/journey-summary/__snapshots__/journey-summary.spec.snap.js b/src/components/journey-summary/__snapshots__/journey-summary.spec.snap.js index 53e39e9fe6..d03e4e7940 100644 --- a/src/components/journey-summary/__snapshots__/journey-summary.spec.snap.js +++ b/src/components/journey-summary/__snapshots__/journey-summary.spec.snap.js @@ -23,9 +23,9 @@ snapshots["sbb-journey-summary renders"] = , , , , ${duration && duration > 0 ? html`,` : nothing} diff --git a/src/components/option/option/option.scss b/src/components/option/option/option.scss index ab92b97b67..d290087df6 100644 --- a/src/components/option/option/option.scss +++ b/src/components/option/option/option.scss @@ -140,7 +140,3 @@ .sbb-option__label { white-space: initial; } - -.sbb-option__group-label--visually-hidden { - @include sbb.screen-reader-only; -} diff --git a/src/components/option/option/option.ts b/src/components/option/option/option.ts index 05778d5719..0658aeccbe 100644 --- a/src/components/option/option/option.ts +++ b/src/components/option/option/option.ts @@ -13,10 +13,12 @@ import { isSafari, isValidAttribute, isAndroid, setAttribute } from '../../core/ import { EventEmitter, ConnectedAbortController } from '../../core/eventing'; import { AgnosticMutationObserver } from '../../core/observers'; -import '../../visual-checkbox'; -import '../../icon'; import style from './option.scss?lit&inline'; +import '../../icon'; +import '../../screenreader-only'; +import '../../visual-checkbox'; + let nextId = 0; /** Configuration for the attribute to look at if component is nested in a sbb-checkbox-group */ @@ -284,9 +286,7 @@ export class SbbOptionElement extends SbbDisabledMixin(SbbIconNameMixin(LitEleme ? this._getHighlightedLabel() : nothing} ${this._inertAriaGroups && this._groupLabel - ? html` - (${this._groupLabel})` + ? html` (${this._groupLabel})` : nothing} diff --git a/src/components/radio-button/radio-button/__snapshots__/radio-button.spec.snap.js b/src/components/radio-button/radio-button/__snapshots__/radio-button.spec.snap.js index 16db82dd82..c76dd4b62e 100644 --- a/src/components/radio-button/radio-button/__snapshots__/radio-button.spec.snap.js +++ b/src/components/radio-button/radio-button/__snapshots__/radio-button.spec.snap.js @@ -18,7 +18,7 @@ snapshots["sbb-radio-button renders - ShadowDom"] = ` `; diff --git a/src/components/selection-panel/selection-panel.e2e.ts b/src/components/selection-panel/selection-panel.e2e.ts index 2a9e787aee..eee90e9b44 100644 --- a/src/components/selection-panel/selection-panel.e2e.ts +++ b/src/components/selection-panel/selection-panel.e2e.ts @@ -359,17 +359,17 @@ describe('sbb-selection-panel', () => { "sbb-radio-button[value='main1']", )!; const mainRadioButton1Label = mainRadioButton1.shadowRoot!.querySelector( - '.sbb-radio-button__expanded-label', + '.sbb-screenreader-only:not(input)', )!; const mainRadioButton2: SbbRadioButtonElement = document.querySelector( "sbb-radio-button[value='main2']", )!; const mainRadioButton2Label = mainRadioButton2.shadowRoot!.querySelector( - '.sbb-radio-button__expanded-label', + '.sbb-screenreader-only:not(input)', )!; const subRadioButton1 = document .querySelector("sbb-radio-button[value='sub1']")! - .shadowRoot!.querySelector('.sbb-radio-button__expanded-label'); + .shadowRoot!.querySelector('.sbb-screenreader-only:not(input)'); await waitForCondition(() => didOpenEventSpy.count === 1); expect(willOpenEventSpy.count).to.be.equal(1); diff --git a/src/components/timetable-occupancy/__snapshots__/timetable-occupancy.spec.snap.js b/src/components/timetable-occupancy/__snapshots__/timetable-occupancy.spec.snap.js index 8da614b99c..6f33600f3a 100644 --- a/src/components/timetable-occupancy/__snapshots__/timetable-occupancy.spec.snap.js +++ b/src/components/timetable-occupancy/__snapshots__/timetable-occupancy.spec.snap.js @@ -19,9 +19,9 @@ snapshots["sbb-timetable-occupancy renders - ShadowDOM"] = > 1. - + First Class. - + 2. - + Second Class. - + 1. - + First Class. - + 2. - + Second Class. - + 1. - + First Class. - + 2. - + Second Class. - +