# Skiplink-List

Component of the SBB design system Lyne.

- Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Structure: one element
- Categories: Action
- Status: Design guidelines complete

## Links

- Page on digital.sbb.ch: https://digital.sbb.ch/en/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

## Elements

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

## Overview

### What does the component do?
The skiplink list bundles skip links. They let keyboard and screen reader users jump directly to important areas of a page. A skip link only becomes visible when it receives keyboard focus (e.g. via Tab). With several links, only the focused one is visible.

### When should the component be used?
* On every page with repeating navigation or a header area, so that users can skip it.
* To jump directly to the main content, menu or other important areas.

### Rules.
* Place the skiplink list as the first interactive element in the DOM so that it is immediately reachable via keyboard.
* Label each skip link briefly and clearly according to its target.
* Each skip link leads directly to its target area.
* An optional title is visually hidden but read by screen readers.

## Implementation (web components)

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)

Full API tables (attributes, events, slots, CSS properties): https://digital.sbb.ch/en/design-system/lyne/components/skiplink-list/api.md