feat(sbb-screenreader-only): initial implementation

src/components/screenreader-only/index.ts

@@ -0,0 +1 @@
+export * from './screenreader-only';

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
+<sbb-screenreader-only>
+  Content visually hidden, but presented to screen reader.
+</sbb-screenreader-only>
+```
+
+<!-- Auto Generated Below -->
+
+## Slots
+
+| Name | Description                              |
+| ---- | ---------------------------------------- |
+|      | Use the unnamed slot to provide content. |

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`<sbb-screenreader-only></sbb-screenreader-only>`);
+  });
+
+  it('renders', async () => {
+    assert.instanceOf(element, SbbScreenreaderOnlyElement);
+  });
+});

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;
+}

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`<sbb-screenreader-only></sbb-screenreader-only>`);
+
+    it('with Light DOM', async () => {
+      await expect(root).dom.to.be.equalSnapshot();
+    });
+
+    it('with Shadow DOM', async () => {
+      await expect(root).shadowDom.to.be.equalSnapshot();
+    });
+  });
+});

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:
+    <sbb-screenreader-only>${args.content}</sbb-screenreader-only>`;
+
+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;

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`<span><slot></slot></span>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-screenreader-only': SbbScreenreaderOnlyElement;
+  }
+}