@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.
103 lines (102 loc) • 3.16 kB
JavaScript
"use client";
import * as React from "react";
import KEY_CODE_MAP from "../common/keyMaps";
/**
* @orbit-doc-start
* README
* ----------
* # SkipLink
*
* To implement SkipLink component into your project you'll need to add the import:
*
* ```jsx
* import SkipLink from "@kiwicom/orbit-components/lib/SkipLink";
* ```
*
* After adding import into your project you can use it simply like:
*
* ```jsx
* <SkipLink
* links={[
* {
* href: "#terms",
* name: "Go to terms and conditions",
* },
* {
* name: "Reguest refund",
* onClick: handler,
* },
* ]}
* />
* ```
*
* Screen reader will read the content in the following order:
*
* - content of the link
* - aria-label of nav
* - navigation
*
* ## Props
*
* The table below contains all types of props available in the SkipLink component.
*
* | Name | Type | Description |
* | :---------- | :------------------ | :------------------------------------- |
* | buttonLabel | `string` | Description for screen readers. |
* | **links** | [`links[]`](#links) | An array specifying links to point to. |
* | dataTest | `string` | Optional prop for testing. |
* | id | `string` | Optional id attribute. |
*
* ## links
*
* The table below contains all types of props available for links 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
*
* - SkipLink is visible only on focus.
*
* ## Rationale
*
* SkipLink 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 which can be hidden inside menus or in otherwise complex content.
*
*
* @orbit-doc-end
*/
const SkipLink = ({
links,
buttonLabel,
dataTest,
id
}) => {
return /*#__PURE__*/React.createElement("nav", {
"aria-label": buttonLabel,
"data-test": dataTest,
id: id
}, links && links.map(({
href,
name,
onClick
}, index) => {
return /*#__PURE__*/React.createElement("a", {
className: "orbit-skip-link ltr:left-400 rtl:right-400 top-400 p-400 bg-white-normal z-onTop font-base text-large rounded-100 text-ink-dark absolute underline [&:not(:focus)]:sr-only",
key: encodeURIComponent(name + index),
href: href,
tabIndex: onClick && 0,
role: href ? "link" : "button",
onClick: onClick,
onKeyDown: ev => {
if (ev.keyCode === KEY_CODE_MAP.ENTER && onClick) {
onClick(ev);
}
}
}, name);
}));
};
export default SkipLink;