@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
44 lines (28 loc) • 1.89 kB
Markdown
# SkipNavigation
To implement SkipNavigation component into your project you'll need to add the import:
```jsx
import SkipNavigation from "@kiwicom/orbit-components/lib/SkipNavigation";
```
After adding import into your project you can use it simply like:
```jsx
<SkipNavigation />
<Heading dataA11ySection="section-id-to-scrape">
```
## Props
Table below contains all types of the props available in the SkipNavigation component.
| Name | Type | Description |
| :---------- | :---------------------- | :------------------------------------------- |
| feedbackUrl | `string` | Url to a feeedback form. |
| **actions** | [`Actions[]`](#actions) | An array specifying common actions on a page |
## actions
Table below contains all types of the props available for Actions array.
| Name | Type | Description |
| :------ | :---------------------- | :---------------------------------- |
| name | `string` | Name of a action. |
| link | `string` | A href for linking to another page. |
| onClick | `() => void \| Promise` | Callback for handling action. |
## Functional specs
- SkipNavigation `onFocus` scrapes the webpage looking for custom attribute `dataA11ySection` to create quick page links. You can extend `<Heading>` and `<CardHeader>` to contain `dataA11ySection`. It's important to note that **without these attributes on a page, SkipNavigation won't work**.
## Rationale
SkipNavigation is used to adress [WCAG2.0 Criterion 2.4.1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html).
The intent of this is to allow people who navigate sequentially through content more direct access to the primary content and common actions of the Web page.