diff --git a/src/elements/skiplink-list/readme.md b/src/elements/skiplink-list/readme.md index c4546a7547..5e6e0207ef 100644 --- a/src/elements/skiplink-list/readme.md +++ b/src/elements/skiplink-list/readme.md @@ -31,6 +31,7 @@ and it can be set using the `title-content` property. ## Slots -| Name | Description | -| ---- | --------------------------------------------------------------------------------------------------------- | -| | Use the unnamed slot to add `sbb-block-link`/`sbb-block-link-button` elements to the `sbb-skiplink-list`. | +| Name | Description | +| ------- | --------------------------------------------------------------------------------------------------------- | +| | Use the unnamed slot to add `sbb-block-link`/`sbb-block-link-button` elements to the `sbb-skiplink-list`. | +| `title` | Use this to provide a title for the skiplink-list (optional). | diff --git a/src/elements/skiplink-list/skiplink-list.ts b/src/elements/skiplink-list/skiplink-list.ts index 2340a8fe5a..a458d8875e 100644 --- a/src/elements/skiplink-list/skiplink-list.ts +++ b/src/elements/skiplink-list/skiplink-list.ts @@ -21,6 +21,7 @@ import '../title.js'; * It displays a list of `sbb-block-link`/`sbb-block-link-button` which are visible only when focused. * * @slot - Use the unnamed slot to add `sbb-block-link`/`sbb-block-link-button` elements to the `sbb-skiplink-list`. + * @slot title - Use this to provide a title for the skiplink-list (optional). * @cssprop [--sbb-skiplink-list-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order, * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`. diff --git a/src/elements/skiplink-list/skiplink-list.visual.spec.ts b/src/elements/skiplink-list/skiplink-list.visual.spec.ts new file mode 100644 index 0000000000..a1d43ec131 --- /dev/null +++ b/src/elements/skiplink-list/skiplink-list.visual.spec.ts @@ -0,0 +1,34 @@ +import { html, nothing, type TemplateResult } from 'lit'; + +import { describeViewports, visualDiffDefault, visualDiffFocus } from '../core/testing/private.js'; + +import './skiplink-list.js'; +import '../link/block-link.js'; + +const template = (title?: string): TemplateResult => html` + + Link 1 + Link 2 + Link 3 + +`; + +describe(`sbb-skiplink-list`, () => { + describeViewports({ viewports: ['zero', 'medium'] }, () => { + for (const state of [visualDiffDefault, visualDiffFocus]) { + it( + state.name, + state.with(async (setup) => { + await setup.withFixture(template(), { minHeight: '100px' }); + }), + ); + } + + it( + `title content`, + visualDiffFocus.with(async (setup) => { + await setup.withFixture(template('Skip to'), { minHeight: '100px' }); + }), + ); + }); +});