From 600af481b99c92cca409c4d0dff15a6453216a92 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Tue, 30 Jan 2024 15:13:43 +0100 Subject: [PATCH 1/5] feat(sbb-screenreader-only): initial implementation --- src/components/screenreader-only/index.ts | 1 + src/components/screenreader-only/readme.md | 15 +++++++ .../screenreader-only.e2e.ts | 16 ++++++++ .../screenreader-only/screenreader-only.scss | 9 +++++ .../screenreader-only.spec.ts | 17 ++++++++ .../screenreader-only.stories.ts | 40 +++++++++++++++++++ .../screenreader-only/screenreader-only.ts | 26 ++++++++++++ 7 files changed, 124 insertions(+) create mode 100644 src/components/screenreader-only/index.ts create mode 100644 src/components/screenreader-only/readme.md create mode 100644 src/components/screenreader-only/screenreader-only.e2e.ts create mode 100644 src/components/screenreader-only/screenreader-only.scss create mode 100644 src/components/screenreader-only/screenreader-only.spec.ts create mode 100644 src/components/screenreader-only/screenreader-only.stories.ts create mode 100644 src/components/screenreader-only/screenreader-only.ts diff --git a/src/components/screenreader-only/index.ts b/src/components/screenreader-only/index.ts new file mode 100644 index 0000000000..b07ca35525 --- /dev/null +++ b/src/components/screenreader-only/index.ts @@ -0,0 +1 @@ +export * from './screenreader-only'; diff --git a/src/components/screenreader-only/readme.md b/src/components/screenreader-only/readme.md new file mode 100644 index 0000000000..33c9385131 --- /dev/null +++ b/src/components/screenreader-only/readme.md @@ -0,0 +1,15 @@ +The `sbb-screenreader-only` is a component to visually hide content but present it to screen readers + +```html + + Content visually hidden, but presented to screen reader. + +``` + + + +## Slots + +| Name | Description | +| ---- | ---------------------------------------- | +| | Use the unnamed slot to provide content. | diff --git a/src/components/screenreader-only/screenreader-only.e2e.ts b/src/components/screenreader-only/screenreader-only.e2e.ts new file mode 100644 index 0000000000..471d819272 --- /dev/null +++ b/src/components/screenreader-only/screenreader-only.e2e.ts @@ -0,0 +1,16 @@ +import { assert, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; + +import { SbbScreenreaderOnlyElement } from './screenreader-only'; + +describe('sbb-screenreader-only', () => { + let element: SbbScreenreaderOnlyElement; + + beforeEach(async () => { + element = await fixture(html``); + }); + + it('renders', async () => { + assert.instanceOf(element, SbbScreenreaderOnlyElement); + }); +}); diff --git a/src/components/screenreader-only/screenreader-only.scss b/src/components/screenreader-only/screenreader-only.scss new file mode 100644 index 0000000000..62a5b058ce --- /dev/null +++ b/src/components/screenreader-only/screenreader-only.scss @@ -0,0 +1,9 @@ +@use '../core/styles' as sbb; + +:host { + display: contents; +} + +span { + @include sbb.screen-reader-only; +} diff --git a/src/components/screenreader-only/screenreader-only.spec.ts b/src/components/screenreader-only/screenreader-only.spec.ts new file mode 100644 index 0000000000..aaa4ef7243 --- /dev/null +++ b/src/components/screenreader-only/screenreader-only.spec.ts @@ -0,0 +1,17 @@ +import { expect, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import './screenreader-only'; + +describe('sbb-screenreader-only', () => { + describe('renders', async () => { + const root = await fixture(html``); + + it('with Light DOM', async () => { + await expect(root).dom.to.be.equalSnapshot(); + }); + + it('with Shadow DOM', async () => { + await expect(root).shadowDom.to.be.equalSnapshot(); + }); + }); +}); diff --git a/src/components/screenreader-only/screenreader-only.stories.ts b/src/components/screenreader-only/screenreader-only.stories.ts new file mode 100644 index 0000000000..2704838f85 --- /dev/null +++ b/src/components/screenreader-only/screenreader-only.stories.ts @@ -0,0 +1,40 @@ +import { withActions } from '@storybook/addon-actions/decorator'; +import type { InputType } from '@storybook/types'; +import type { Args, Decorator, Meta, StoryObj } from '@storybook/web-components'; +import type { TemplateResult } from 'lit'; +import { html } from 'lit'; + +import readme from './readme.md?raw'; + +import './screenreader-only'; + +const content: InputType = { + control: { + type: 'text', + }, +}; + +const Template = (args: Args): TemplateResult => + html`There is a visually hidden text here: + ${args.content}`; + +export const Default: StoryObj = { + render: Template, + argTypes: { content }, + args: { content: `I'm visually hidden, but read to screen reader.` }, +}; + +const meta: Meta = { + decorators: [withActions as Decorator], + parameters: { + backgrounds: { + disable: true, + }, + docs: { + extractComponentDescription: () => readme, + }, + }, + title: 'internals/sbb-screenreader-only', +}; + +export default meta; diff --git a/src/components/screenreader-only/screenreader-only.ts b/src/components/screenreader-only/screenreader-only.ts new file mode 100644 index 0000000000..2f22cac6d1 --- /dev/null +++ b/src/components/screenreader-only/screenreader-only.ts @@ -0,0 +1,26 @@ +import type { CSSResultGroup, TemplateResult } from 'lit'; +import { html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; + +import style from './screenreader-only.scss?lit&inline'; + +/** + * This component can be used to visually hide content but present it to screen readers. + * + * @slot - Use the unnamed slot to provide content. + */ +@customElement('sbb-screenreader-only') +export class SbbScreenreaderOnlyElement extends LitElement { + public static override styles: CSSResultGroup = style; + + protected override render(): TemplateResult { + return html``; + } +} + +declare global { + interface HTMLElementTagNameMap { + // eslint-disable-next-line @typescript-eslint/naming-convention + 'sbb-screenreader-only': SbbScreenreaderOnlyElement; + } +} From 32a6c090911b0ca1b1c7f9f4be76dc84c599adf7 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Tue, 30 Jan 2024 15:13:43 +0100 Subject: [PATCH 2/5] feat(sbb-screenreader-only): initial implementation --- .../screenreader-only.spec.snap.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js diff --git a/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js b/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js new file mode 100644 index 0000000000..c9dd653849 --- /dev/null +++ b/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js @@ -0,0 +1,17 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["with Light DOM"] = +` + +`; +/* end snapshot with Light DOM */ + +snapshots["with Shadow DOM"] = +` + + + +`; +/* end snapshot with Shadow DOM */ + From 97c9a4b584ab211013ecf35a18c732dd555cb75b Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Tue, 30 Jan 2024 15:16:29 +0100 Subject: [PATCH 3/5] fix: review docs --- src/components/screenreader-only/readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/screenreader-only/readme.md b/src/components/screenreader-only/readme.md index 33c9385131..fea0d0d476 100644 --- a/src/components/screenreader-only/readme.md +++ b/src/components/screenreader-only/readme.md @@ -1,4 +1,4 @@ -The `sbb-screenreader-only` is a component to visually hide content but present it to screen readers +The `sbb-screenreader-only` is a component to visually hide content but present it to screen readers. ```html From 4528186121a9860c3aa20eb5e4061a291c6a779f Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Tue, 30 Jan 2024 15:41:33 +0100 Subject: [PATCH 4/5] fix: review --- .../__snapshots__/screenreader-only.spec.snap.js | 6 ++---- src/components/screenreader-only/screenreader-only.e2e.ts | 2 +- src/components/screenreader-only/screenreader-only.scss | 6 ++---- src/components/screenreader-only/screenreader-only.ts | 2 +- 4 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js b/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js index c9dd653849..6c61796930 100644 --- a/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js +++ b/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js @@ -8,10 +8,8 @@ snapshots["with Light DOM"] = /* end snapshot with Light DOM */ snapshots["with Shadow DOM"] = -` - - - +` + `; /* end snapshot with Shadow DOM */ diff --git a/src/components/screenreader-only/screenreader-only.e2e.ts b/src/components/screenreader-only/screenreader-only.e2e.ts index 471d819272..6567794bb0 100644 --- a/src/components/screenreader-only/screenreader-only.e2e.ts +++ b/src/components/screenreader-only/screenreader-only.e2e.ts @@ -7,7 +7,7 @@ describe('sbb-screenreader-only', () => { let element: SbbScreenreaderOnlyElement; beforeEach(async () => { - element = await fixture(html``); + element = await fixture(html`Hidden text.`); }); it('renders', async () => { diff --git a/src/components/screenreader-only/screenreader-only.scss b/src/components/screenreader-only/screenreader-only.scss index 62a5b058ce..b0d159cf6b 100644 --- a/src/components/screenreader-only/screenreader-only.scss +++ b/src/components/screenreader-only/screenreader-only.scss @@ -1,9 +1,7 @@ @use '../core/styles' as sbb; :host { - display: contents; -} - -span { @include sbb.screen-reader-only; + + display: inline-block; } diff --git a/src/components/screenreader-only/screenreader-only.ts b/src/components/screenreader-only/screenreader-only.ts index 2f22cac6d1..ab0668ff92 100644 --- a/src/components/screenreader-only/screenreader-only.ts +++ b/src/components/screenreader-only/screenreader-only.ts @@ -14,7 +14,7 @@ export class SbbScreenreaderOnlyElement extends LitElement { public static override styles: CSSResultGroup = style; protected override render(): TemplateResult { - return html``; + return html``; } } From 3f76c04a3f3a76e09862291e48aecf334c318a9c Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Tue, 30 Jan 2024 15:43:47 +0100 Subject: [PATCH 5/5] fix: remove display --- src/components/screenreader-only/screenreader-only.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/screenreader-only/screenreader-only.scss b/src/components/screenreader-only/screenreader-only.scss index b0d159cf6b..aa75875263 100644 --- a/src/components/screenreader-only/screenreader-only.scss +++ b/src/components/screenreader-only/screenreader-only.scss @@ -2,6 +2,4 @@ :host { @include sbb.screen-reader-only; - - display: inline-block; }