-
Notifications
You must be signed in to change notification settings - Fork 8
/
SkipLinks.tsx
52 lines (46 loc) · 1017 Bytes
/
SkipLinks.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/** @jsx jsx */
import { FC } from 'react';
import { jsx, Box, LinkProps } from 'theme-ui';
export interface SkiLinksItemOwnProps {
/**
* target's id property, without the # char
*/
target: string;
/**
* text message to be displayed
*/
text: string;
}
export type SkipLinksItemProps = SkiLinksItemOwnProps & LinkProps;
/**
* single skip link anchor item
*/
export const SkiLinksItem: FC<SkipLinksItemProps & LinkProps> = ({
target,
text,
...rest
}) => (
<a {...rest} href={`#${target}`} data-skip-link="true">
{text}
</a>
);
export interface SkipLinksProps {
items: SkipLinksItemProps[];
}
/**
* list of anchor elements to skip to
*
*/
export const SkipLinks: FC<SkipLinksProps> = ({ items }) => (
<Box
variant="skiplinks.container"
as="section"
aria-label="skip tab order to linked items"
>
{items.map((item, idx) => (
<Box variant="skiplinks.item" key={`skip_link_${idx}`}>
<SkiLinksItem {...item} />
</Box>
))}
</Box>
);