# Skiplink-List

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: ein Element
- Kategorien: Action
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/skiplink-list/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-skiplink-list--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/skiplink-list/overview (API: https://lyne-angular.app.sbb.ch/angular/components/skiplink-list/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-51
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/skiplink-list

## Elemente

- `sbb-skiplink-list`: It displays a list of `sbb-block-link`/`sbb-block-link-button` which are visible only when focused.

## Übersicht

### Was macht die Komponente?
Die Skiplink-List bündelt Skip-Links. Mit ihnen springen Tastatur- und Screenreader-Nutzende direkt zu wichtigen Bereichen einer Seite. Ein Skip-Link ist erst sichtbar, wenn er per Tastatur (z.B. Tab) fokussiert wird. Bei mehreren Links ist nur der fokussierte sichtbar.

### Wann soll die Komponente eingesetzt werden?
* Auf jeder Seite mit wiederkehrender Navigation oder Kopfbereich, damit Nutzende diese überspringen können.
* Um direkt zu Hauptinhalt, Menü oder anderen wichtigen Bereichen zu springen.

### Regeln.
* Platziere die Skiplink-List als erstes interaktives Element im DOM, damit sie sofort per Tastatur erreichbar ist.
* Beschrifte jeden Skip-Link kurz und eindeutig nach seinem Ziel.
* Jeder Skip-Link führt direkt zum Zielbereich.
* Ein optionaler Titel ist visuell versteckt, wird aber von Screenreadern vorgelesen.

## Implementation (Web Components, Englisch)

The `<sbb-skiplink-list>` is a component that can be used to collect one or more hidden [sbb-block-link](https://lyne-elements.app.sbb.ch/?path=/docs/elements-link--docs)s,
which become visible only when focused, e.g., using the `Tab` key.

When the component contains multiple link elements, only one of them is shown (the focused one), while the others stay visually hidden.

It has an optional `<sbb-title>` element, which is visually hidden too, but it's read from screen-readers,
and it can be set using the `title-content` property.

```html
<sbb-skiplink-list title-level="2" title-content="Title text">
  <sbb-block-link href="https://www.sbb.ch/">Content</sbb-block-link>
  <sbb-block-link href="https://www.sbb.ch/en/help-and-contact.html">Contact</sbb-block-link>
  ...
</sbb-skiplink-list>
```

## API (Web Components, Englisch)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/skiplink-list/api.md