Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: use sbb-screenreader-only component where possible #2501

Merged
merged 1 commit into from
Mar 19, 2024
Merged

refactor: use sbb-screenreader-only component where possible #2501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 16 additions & 19 deletions src/components/calendar/__snapshots__/calendar.spec.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,9 @@ snapshots["sbb-calendar renders"] =
>
</sbb-icon>
</button>
<span
class="sbb-calendar__visually-hidden"
role="status"
>
<sbb-screenreader-only role="status">
January 2023
</span>
</sbb-screenreader-only>
</div>
<sbb-secondary-button
aria-label="Change to the next month"
Expand All @@ -59,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">
<span class="sbb-calendar__visually-hidden">
<sbb-screenreader-only>
Monday
</span>
</sbb-screenreader-only>
<span aria-hidden="true">
M
</span>
</th>
<th class="sbb-calendar__table-header">
<span class="sbb-calendar__visually-hidden">
<sbb-screenreader-only>
Tuesday
</span>
</sbb-screenreader-only>
<span aria-hidden="true">
T
</span>
</th>
<th class="sbb-calendar__table-header">
<span class="sbb-calendar__visually-hidden">
<sbb-screenreader-only>
Wednesday
</span>
</sbb-screenreader-only>
<span aria-hidden="true">
W
</span>
</th>
<th class="sbb-calendar__table-header">
<span class="sbb-calendar__visually-hidden">
<sbb-screenreader-only>
Thursday
</span>
</sbb-screenreader-only>
<span aria-hidden="true">
T
</span>
</th>
<th class="sbb-calendar__table-header">
<span class="sbb-calendar__visually-hidden">
<sbb-screenreader-only>
Friday
</span>
</sbb-screenreader-only>
<span aria-hidden="true">
F
</span>
</th>
<th class="sbb-calendar__table-header">
<span class="sbb-calendar__visually-hidden">
<sbb-screenreader-only>
Saturday
</span>
</sbb-screenreader-only>
<span aria-hidden="true">
S
</span>
</th>
<th class="sbb-calendar__table-header">
<span class="sbb-calendar__visually-hidden">
<sbb-screenreader-only>
Sunday
</span>
</sbb-screenreader-only>
<span aria-hidden="true">
S
</span>
Expand Down
4 changes: 0 additions & 4 deletions src/components/calendar/calendar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,10 +283,6 @@
}
}

.sbb-calendar__visually-hidden {
@include sbb.screen-reader-only;
}

@keyframes show {
from {
opacity: 0;
Expand Down
16 changes: 9 additions & 7 deletions src/components/calendar/calendar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -807,9 +809,9 @@ export class SbbCalendarElement extends LitElement {
<div class="sbb-calendar__controls-month">
${this._createLabelForDayView(this._activeDate)}
${this._wide ? this._createLabelForDayView(nextMonthActiveDate!) : nothing}
<span role="status" class="sbb-calendar__visually-hidden">
<sbb-screenreader-only role="status">
${this._createAriaLabelForDayView(this._activeDate, nextMonthActiveDate!)}
</span>
</sbb-screenreader-only>
</div>
${this._getArrow(
'right',
Expand Down Expand Up @@ -887,7 +889,7 @@ export class SbbCalendarElement extends LitElement {
return this._weekdays.map(
(day: Weekday) => html`
<th class="sbb-calendar__table-header">
<span class="sbb-calendar__visually-hidden">${day.long}</span>
<sbb-screenreader-only>${day.long}</sbb-screenreader-only>
<span aria-hidden="true">${day.narrow}</span>
</th>
`,
Expand Down Expand Up @@ -999,7 +1001,7 @@ export class SbbCalendarElement extends LitElement {
${this._chosenYear} ${this._wide ? ` - ${this._chosenYear! + 1}` : nothing}
<sbb-icon name="chevron-small-up-small"></sbb-icon>
</button>
<span role="status" class="sbb-calendar__visually-hidden"> ${this._chosenYear} </span>`;
<sbb-screenreader-only role="status"> ${this._chosenYear} </sbb-screenreader-only>`;
}

/** Creates the table for the month selection view. */
Expand Down Expand Up @@ -1140,7 +1142,7 @@ export class SbbCalendarElement extends LitElement {
${yearLabel}
<sbb-icon name="chevron-small-up-small"></sbb-icon>
</button>
<span role="status" class="sbb-calendar__visually-hidden"> ${yearLabel} </span>
<sbb-screenreader-only role="status"> ${yearLabel} </sbb-screenreader-only>
`;
}

Expand Down
7 changes: 2 additions & 5 deletions src/components/dialog/__snapshots__/dialog.spec.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,8 @@ snapshots["sbb-dialog renders"] =
</div>
</div>
</div>
<span
aria-live="polite"
class="sbb-screen-reader-only"
>
</span>
<sbb-screenreader-only aria-live="polite">
</sbb-screenreader-only>
`;
/* end snapshot sbb-dialog renders */

Expand Down
4 changes: 2 additions & 2 deletions src/components/dialog/dialog.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ describe('sbb-dialog', () => {
<div slot="action-group">Action group</div>
</sbb-dialog>
`);
ariaLiveRef = element.shadowRoot!.querySelector('span.sbb-screen-reader-only')!;
ariaLiveRef = element.shadowRoot!.querySelector('sbb-screenreader-only')!;
});

it('renders', () => {
Expand Down Expand Up @@ -253,7 +253,7 @@ describe('sbb-dialog', () => {
<div slot="action-group">Action group</div>
</sbb-dialog>
`);
ariaLiveRef = element.shadowRoot!.querySelector('span.sbb-screen-reader-only')!;
ariaLiveRef = element.shadowRoot!.querySelector('sbb-screenreader-only')!;

await openDialog(element);

Expand Down
4 changes: 0 additions & 4 deletions src/components/dialog/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
11 changes: 6 additions & 5 deletions src/components/dialog/dialog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -453,11 +455,10 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
</div>
</div>
</div>
<span
<sbb-screenreader-only
aria-live="polite"
class="sbb-screen-reader-only"
${ref((el?: Element) => (this._ariaLiveRef = el as HTMLElement))}
></span>
></sbb-screenreader-only>
`;
}
}
Expand Down
20 changes: 10 additions & 10 deletions src/components/journey-header/__snapshots__/journey-header.spec.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ snapshots["sbb-journey-header renders"] =
dir="ltr"
>
<span class="sbb-journey-header__origin">
<span class="sbb-journey-header__connection--visually-hidden">
<sbb-screenreader-only>
Connection from
</span>
</sbb-screenreader-only>
A
</span>
<sbb-icon
Expand All @@ -26,9 +26,9 @@ snapshots["sbb-journey-header renders"] =
>
</sbb-icon>
<span class="sbb-journey-header__destination">
<span class="sbb-journey-header__connection--visually-hidden">
<sbb-screenreader-only>
to
</span>
</sbb-screenreader-only>
B
</span>
</span>
Expand All @@ -49,9 +49,9 @@ snapshots["sbb-journey-header renders H1 L-sized round-trip negative"] =
dir="ltr"
>
<span class="sbb-journey-header__origin">
<span class="sbb-journey-header__connection--visually-hidden">
<sbb-screenreader-only>
Connection from
</span>
</sbb-screenreader-only>
B
</span>
<sbb-icon
Expand All @@ -62,13 +62,13 @@ snapshots["sbb-journey-header renders H1 L-sized round-trip negative"] =
>
</sbb-icon>
<span class="sbb-journey-header__destination">
<span class="sbb-journey-header__connection--visually-hidden">
<sbb-screenreader-only>
to
</span>
</sbb-screenreader-only>
C
<span class="sbb-journey-header__connection--visually-hidden">
<sbb-screenreader-only>
and back to B.
</span>
</sbb-screenreader-only>
</span>
</span>
</sbb-title>
Expand Down
4 changes: 0 additions & 4 deletions src/components/journey-header/journey-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,3 @@ sbb-icon {
}
}
}

.sbb-journey-header__connection--visually-hidden {
@include sbb.screen-reader-only;
}
18 changes: 10 additions & 8 deletions src/components/journey-header/journey-header.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand Down Expand Up @@ -48,21 +50,21 @@ export class SbbJourneyHeaderElement extends SbbNegativeMixin(LitElement) {
>
<span class="sbb-journey-header" dir=${getDocumentWritingMode()}>
<span class="sbb-journey-header__origin">
<span class="sbb-journey-header__connection--visually-hidden">
<sbb-screenreader-only>
${i18nConnectionFrom[this._language.current]}&nbsp;
</span>
</sbb-screenreader-only>
${this.origin}
</span>
<sbb-icon name=${iconName}></sbb-icon>
<span class="sbb-journey-header__destination">
<span class="sbb-journey-header__connection--visually-hidden">
<sbb-screenreader-only>
&nbsp;${i18nConnectionTo[this._language.current]}&nbsp;
</span>
</sbb-screenreader-only>
${this.destination}
${this.roundTrip
? html` <span class="sbb-journey-header__connection--visually-hidden">
? html` <sbb-screenreader-only>
${i18nConnectionRoundtrip(this.origin)[this._language.current]}
</span>`
</sbb-screenreader-only>`
: nothing}
</span>
</span>
Expand Down
16 changes: 8 additions & 8 deletions src/components/journey-summary/__snapshots__/journey-summary.spec.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ snapshots["sbb-journey-summary renders"] =
</time>
,
<time>
<span class="sbb-screenreaderonly">
<sbb-screenreader-only>
Travel time 1 Hour
</span>
</sbb-screenreader-only>
<span aria-hidden="true">
1 h
</span>
Expand All @@ -47,9 +47,9 @@ snapshots["sbb-journey-summary renders without vias"] =
</time>
,
<time>
<span class="sbb-screenreaderonly">
<sbb-screenreader-only>
Travel time 1 Hour 40 Minutes
</span>
</sbb-screenreader-only>
<span aria-hidden="true">
1 h 40 min
</span>
Expand All @@ -71,9 +71,9 @@ snapshots["sbb-journey-summary renders with second journey"] =
</time>
,
<time>
<span class="sbb-screenreaderonly">
<sbb-screenreader-only>
Travel time 1 Hour 40 Minutes
</span>
</sbb-screenreader-only>
<span aria-hidden="true">
1 h 40 min
</span>
Expand Down Expand Up @@ -110,9 +110,9 @@ snapshots["sbb-journey-summary renders with second journey"] =
</time>
,
<time>
<span class="sbb-screenreaderonly">
<sbb-screenreader-only>
Travel time 1 Hour
</span>
</sbb-screenreader-only>
<span aria-hidden="true">
1 h
</span>
Expand Down
4 changes: 0 additions & 4 deletions src/components/journey-summary/journey-summary.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,3 @@ ul li {
list-style: none;
display: inline;
}

.sbb-screenreaderonly {
@include sbb.screen-reader-only;
}
Loading
Loading