@bookjane2/bookjane-design-library 8.3.2 → 8.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/BKJLandmark/BKJLandmark.d.ts +3 -0
- package/lib/components/BKJLandmark/BKJLandmark.d.ts.map +1 -0
- package/lib/components/BKJLandmark/BKJLandmark.js +8 -0
- package/lib/components/BKJLandmark/BKJLandmark.js.map +1 -0
- package/lib/components/BKJLandmark/BKJLandmark.stories.d.ts +26 -0
- package/lib/components/BKJLandmark/BKJLandmark.stories.d.ts.map +1 -0
- package/lib/components/BKJLandmark/BKJLandmark.stories.js +39 -0
- package/lib/components/BKJLandmark/BKJLandmark.stories.js.map +1 -0
- package/lib/components/BKJLandmark/BKJLandmark.styled.d.ts +2 -0
- package/lib/components/BKJLandmark/BKJLandmark.styled.d.ts.map +1 -0
- package/lib/components/BKJLandmark/BKJLandmark.styled.js +5 -0
- package/lib/components/BKJLandmark/BKJLandmark.styled.js.map +1 -0
- package/lib/components/BKJLandmark/BKJLandmark.test.d.ts +2 -0
- package/lib/components/BKJLandmark/BKJLandmark.test.d.ts.map +1 -0
- package/lib/components/BKJLandmark/BKJLandmark.test.js +125 -0
- package/lib/components/BKJLandmark/BKJLandmark.test.js.map +1 -0
- package/lib/components/BKJLandmark/BKJLandmark.types.d.ts +40 -0
- package/lib/components/BKJLandmark/BKJLandmark.types.d.ts.map +1 -0
- package/lib/components/BKJLandmark/BKJLandmark.types.js +2 -0
- package/lib/components/BKJLandmark/BKJLandmark.types.js.map +1 -0
- package/lib/components/BKJLandmark/index.d.ts +2 -0
- package/lib/components/BKJLandmark/index.d.ts.map +1 -0
- package/lib/components/BKJLandmark/index.js +2 -0
- package/lib/components/BKJLandmark/index.js.map +1 -0
- package/lib/components/index.d.ts +1 -0
- package/lib/components/index.d.ts.map +1 -1
- package/lib/components/index.js +1 -0
- package/lib/components/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BKJLandmark.d.ts","sourceRoot":"","sources":["../../../src/components/BKJLandmark/BKJLandmark.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,eAAO,MAAM,WAAW,2GAIvB,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { StyledLandmark } from './BKJLandmark.styled.js';
|
|
4
|
+
export const BKJLandmark = forwardRef(({ as, ...rest }, ref) => {
|
|
5
|
+
return _jsx(StyledLandmark, { as: as, ref: ref, ...rest });
|
|
6
|
+
});
|
|
7
|
+
BKJLandmark.displayName = 'BKJLandmark';
|
|
8
|
+
//# sourceMappingURL=BKJLandmark.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BKJLandmark.js","sourceRoot":"","sources":["../../../src/components/BKJLandmark/BKJLandmark.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IACvB,OAAO,KAAC,cAAc,IAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,KAAM,IAAI,GAAI,CAAC;AACxD,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { StoryFn } from '@storybook/react';
|
|
2
|
+
import { IBKJLandmarkProps } from './BKJLandmark.types.js';
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: import("react").ForwardRefExoticComponent<IBKJLandmarkProps & import("react").RefAttributes<HTMLElement>>;
|
|
6
|
+
argTypes: {
|
|
7
|
+
as: {
|
|
8
|
+
control: string;
|
|
9
|
+
options: string[];
|
|
10
|
+
description: string;
|
|
11
|
+
};
|
|
12
|
+
'aria-label': {
|
|
13
|
+
control: string;
|
|
14
|
+
description: string;
|
|
15
|
+
};
|
|
16
|
+
'aria-labelledby': {
|
|
17
|
+
control: string;
|
|
18
|
+
description: string;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
export default _default;
|
|
23
|
+
export declare const Default: StoryFn<IBKJLandmarkProps>;
|
|
24
|
+
export declare const PageStructure: StoryFn<IBKJLandmarkProps>;
|
|
25
|
+
export declare const WithLabelledBy: StoryFn<IBKJLandmarkProps>;
|
|
26
|
+
//# sourceMappingURL=BKJLandmark.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BKJLandmark.stories.d.ts","sourceRoot":"","sources":["../../../src/components/BKJLandmark/BKJLandmark.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;AAGxD,wBAkBE;AAEF,eAAO,MAAM,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAY9C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,iBAAiB,CAsEpD,CAAC;AAWF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,iBAAiB,CAerD,CAAC"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { BKJLandmark } from './BKJLandmark.js';
|
|
3
|
+
import { BKJTheme, BKJThemeProvider } from '../../providers/BKJThemeProvider/index.js';
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Components/BKJLandmark',
|
|
6
|
+
component: BKJLandmark,
|
|
7
|
+
argTypes: {
|
|
8
|
+
as: {
|
|
9
|
+
control: 'select',
|
|
10
|
+
options: ['nav', 'header', 'footer', 'aside', 'section', 'main'],
|
|
11
|
+
description: 'The semantic HTML5 landmark element to render',
|
|
12
|
+
},
|
|
13
|
+
'aria-label': {
|
|
14
|
+
control: 'text',
|
|
15
|
+
description: 'Accessible label (required for nav, aside, section)',
|
|
16
|
+
},
|
|
17
|
+
'aria-labelledby': {
|
|
18
|
+
control: 'text',
|
|
19
|
+
description: 'ID of the element that labels this landmark',
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
};
|
|
23
|
+
export const Default = () => (_jsx(BKJThemeProvider, { theme: BKJTheme, children: _jsxs(BKJLandmark, { as: "nav", "aria-label": "Main navigation", children: [_jsx("a", { href: "#home", style: { marginRight: 12 }, children: "Home" }), _jsx("a", { href: "#about", style: { marginRight: 12 }, children: "About" }), _jsx("a", { href: "#contact", children: "Contact" })] }) }));
|
|
24
|
+
export const PageStructure = () => (_jsx(BKJThemeProvider, { theme: BKJTheme, children: _jsxs("div", { style: { fontFamily: 'sans-serif', maxWidth: 800, margin: '0 auto' }, children: [_jsx(BKJLandmark, { as: "header", children: _jsxs("div", { style: {
|
|
25
|
+
padding: 16,
|
|
26
|
+
borderBottom: '1px solid #ccc',
|
|
27
|
+
display: 'flex',
|
|
28
|
+
justifyContent: 'space-between',
|
|
29
|
+
alignItems: 'center',
|
|
30
|
+
}, children: [_jsx("strong", { children: "BookJane" }), _jsxs(BKJLandmark, { as: "nav", "aria-label": "Main navigation", children: [_jsx("a", { href: "#dashboard", style: { marginRight: 12 }, children: "Dashboard" }), _jsx("a", { href: "#shifts", style: { marginRight: 12 }, children: "Shifts" }), _jsx("a", { href: "#settings", children: "Settings" })] })] }) }), _jsxs("div", { style: { display: 'flex', gap: 16, padding: 16 }, children: [_jsxs(BKJLandmark, { as: "main", style: { flex: 1 }, children: [_jsx("h1", { children: "Dashboard" }), _jsxs(BKJLandmark, { as: "section", "aria-label": "Today\u2019s overview", children: [_jsx("h2", { children: "Today\u2019s Overview" }), _jsx("p", { children: "You have 3 open shifts and 12 pending requests." })] }), _jsxs(BKJLandmark, { as: "section", "aria-label": "Recent activity", children: [_jsx("h2", { children: "Recent Activity" }), _jsxs("ul", { children: [_jsx("li", { children: "Shift #1042 filled by Jane D." }), _jsx("li", { children: "Shift #1039 cancelled" })] })] })] }), _jsxs(BKJLandmark, { as: "aside", "aria-label": "Notifications panel", style: { width: 200, borderLeft: '1px solid #ccc', paddingLeft: 16 }, children: [_jsx("h2", { children: "Notifications" }), _jsxs("ul", { children: [_jsx("li", { children: "New shift posted" }), _jsx("li", { children: "Schedule updated" })] })] })] }), _jsx(BKJLandmark, { as: "footer", children: _jsx("div", { style: { padding: 16, borderTop: '1px solid #ccc', textAlign: 'center' }, children: _jsxs(BKJLandmark, { as: "nav", "aria-label": "Footer navigation", children: [_jsx("a", { href: "#privacy", style: { marginRight: 12 }, children: "Privacy" }), _jsx("a", { href: "#terms", style: { marginRight: 12 }, children: "Terms" }), _jsx("a", { href: "#help", children: "Help" })] }) }) })] }) }));
|
|
31
|
+
PageStructure.parameters = {
|
|
32
|
+
docs: {
|
|
33
|
+
description: {
|
|
34
|
+
story: 'Demonstrates a complete page structure using all six landmark types. Screen reader users can navigate between header, main navigation, main content, sections, sidebar, footer navigation, and footer.',
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
export const WithLabelledBy = () => (_jsx(BKJThemeProvider, { theme: BKJTheme, children: _jsxs("div", { children: [_jsx("h2", { id: "settings-heading", children: "Settings" }), _jsxs(BKJLandmark, { as: "section", "aria-labelledby": "settings-heading", children: [_jsxs("p", { children: ["Use ", _jsx("code", { children: "aria-labelledby" }), " to point to an existing heading element instead of duplicating text in ", _jsx("code", { children: "aria-label" }), "."] }), _jsxs("label", { children: ["Username: ", _jsx("input", { type: "text", defaultValue: "jane.doe" })] })] })] }) }));
|
|
39
|
+
//# sourceMappingURL=BKJLandmark.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BKJLandmark.stories.js","sourceRoot":"","sources":["../../../src/components/BKJLandmark/BKJLandmark.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export declare const StyledLandmark: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
2
|
+
//# sourceMappingURL=BKJLandmark.styled.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BKJLandmark.styled.d.ts","sourceRoot":"","sources":["../../../src/components/BKJLandmark/BKJLandmark.styled.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,6NAE1B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BKJLandmark.styled.js","sourceRoot":"","sources":["../../../src/components/BKJLandmark/BKJLandmark.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEvC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BKJLandmark.test.d.ts","sourceRoot":"","sources":["../../../src/components/BKJLandmark/BKJLandmark.test.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { createRef } from 'react';
|
|
3
|
+
import { render, fireEvent } from '@testing-library/react';
|
|
4
|
+
import { axe, toHaveNoViolations } from 'jest-axe';
|
|
5
|
+
import { BKJLandmark } from './BKJLandmark.js';
|
|
6
|
+
import { BKJThemeProvider } from '../../providers/BKJThemeProvider/index.js';
|
|
7
|
+
expect.extend(toHaveNoViolations);
|
|
8
|
+
const renderWithTheme = (component) => {
|
|
9
|
+
return render(_jsx(BKJThemeProvider, { children: component }));
|
|
10
|
+
};
|
|
11
|
+
describe('BKJLandmark', () => {
|
|
12
|
+
describe('US1: Screen reader navigation via landmarks', () => {
|
|
13
|
+
it('renders a nav element with navigation role', () => {
|
|
14
|
+
const { getByRole } = renderWithTheme(_jsx(BKJLandmark, { as: "nav", "aria-label": "Main navigation", children: _jsx("a", { href: "/", children: "Home" }) }));
|
|
15
|
+
expect(getByRole('navigation')).toBeInTheDocument();
|
|
16
|
+
});
|
|
17
|
+
it('renders a header element with banner role', () => {
|
|
18
|
+
const { getByRole } = renderWithTheme(_jsx(BKJLandmark, { as: "header", children: _jsx("span", { children: "Header content" }) }));
|
|
19
|
+
expect(getByRole('banner')).toBeInTheDocument();
|
|
20
|
+
});
|
|
21
|
+
it('renders a footer element with contentinfo role', () => {
|
|
22
|
+
const { getByRole } = renderWithTheme(_jsx(BKJLandmark, { as: "footer", children: _jsx("span", { children: "Footer content" }) }));
|
|
23
|
+
expect(getByRole('contentinfo')).toBeInTheDocument();
|
|
24
|
+
});
|
|
25
|
+
it('renders an aside element with complementary role', () => {
|
|
26
|
+
const { getByRole } = renderWithTheme(_jsx(BKJLandmark, { as: "aside", "aria-label": "Sidebar", children: _jsx("span", { children: "Sidebar content" }) }));
|
|
27
|
+
expect(getByRole('complementary')).toBeInTheDocument();
|
|
28
|
+
});
|
|
29
|
+
it('renders a section element with region role when labelled', () => {
|
|
30
|
+
const { getByRole } = renderWithTheme(_jsx(BKJLandmark, { as: "section", "aria-label": "Dashboard", children: _jsx("span", { children: "Section content" }) }));
|
|
31
|
+
expect(getByRole('region')).toBeInTheDocument();
|
|
32
|
+
});
|
|
33
|
+
it('renders a main element with main role', () => {
|
|
34
|
+
const { getByRole } = renderWithTheme(_jsx(BKJLandmark, { as: "main", children: _jsx("span", { children: "Main content" }) }));
|
|
35
|
+
expect(getByRole('main')).toBeInTheDocument();
|
|
36
|
+
});
|
|
37
|
+
it('forwards aria-label to the rendered element', () => {
|
|
38
|
+
const { getByRole } = renderWithTheme(_jsx(BKJLandmark, { as: "nav", "aria-label": "Primary navigation", children: _jsx("a", { href: "/", children: "Home" }) }));
|
|
39
|
+
expect(getByRole('navigation')).toHaveAttribute('aria-label', 'Primary navigation');
|
|
40
|
+
});
|
|
41
|
+
it('forwards aria-labelledby to the rendered element', () => {
|
|
42
|
+
const { getByRole } = renderWithTheme(_jsxs(_Fragment, { children: [_jsx("h2", { id: "section-heading", children: "Settings" }), _jsx(BKJLandmark, { as: "section", "aria-labelledby": "section-heading", children: _jsx("span", { children: "Section content" }) })] }));
|
|
43
|
+
expect(getByRole('region')).toHaveAttribute('aria-labelledby', 'section-heading');
|
|
44
|
+
});
|
|
45
|
+
it('distinguishes multiple nav landmarks by label', () => {
|
|
46
|
+
const { getByRole } = renderWithTheme(_jsxs(_Fragment, { children: [_jsx(BKJLandmark, { as: "nav", "aria-label": "Main navigation", children: _jsx("a", { href: "/", children: "Home" }) }), _jsx(BKJLandmark, { as: "nav", "aria-label": "Footer navigation", children: _jsx("a", { href: "/about", children: "About" }) })] }));
|
|
47
|
+
expect(getByRole('navigation', { name: 'Main navigation' })).toBeInTheDocument();
|
|
48
|
+
expect(getByRole('navigation', { name: 'Footer navigation' })).toBeInTheDocument();
|
|
49
|
+
});
|
|
50
|
+
it('renders nested landmarks correctly', () => {
|
|
51
|
+
const { getByRole } = renderWithTheme(_jsxs(BKJLandmark, { as: "main", children: [_jsx(BKJLandmark, { as: "nav", "aria-label": "Breadcrumb", children: _jsx("a", { href: "/", children: "Home" }) }), _jsx("span", { children: "Page content" })] }));
|
|
52
|
+
expect(getByRole('main')).toBeInTheDocument();
|
|
53
|
+
expect(getByRole('navigation', { name: 'Breadcrumb' })).toBeInTheDocument();
|
|
54
|
+
});
|
|
55
|
+
});
|
|
56
|
+
describe('US2: Layout-neutral wrapping', () => {
|
|
57
|
+
it('applies display: contents style', () => {
|
|
58
|
+
const { getByRole } = renderWithTheme(_jsx(BKJLandmark, { as: "main", children: _jsx("span", { children: "Content" }) }));
|
|
59
|
+
const element = getByRole('main');
|
|
60
|
+
const styles = window.getComputedStyle(element);
|
|
61
|
+
expect(styles.display).toBe('contents');
|
|
62
|
+
});
|
|
63
|
+
it('forwards className to the rendered element', () => {
|
|
64
|
+
const { getByRole } = renderWithTheme(_jsx(BKJLandmark, { as: "main", className: "custom-class", children: _jsx("span", { children: "Content" }) }));
|
|
65
|
+
expect(getByRole('main')).toHaveClass('custom-class');
|
|
66
|
+
});
|
|
67
|
+
it('forwards id to the rendered element', () => {
|
|
68
|
+
const { getByRole } = renderWithTheme(_jsx(BKJLandmark, { as: "main", id: "main-content", children: _jsx("span", { children: "Content" }) }));
|
|
69
|
+
expect(getByRole('main')).toHaveAttribute('id', 'main-content');
|
|
70
|
+
});
|
|
71
|
+
it('forwards data attributes to the rendered element', () => {
|
|
72
|
+
const { getByRole } = renderWithTheme(_jsx(BKJLandmark, { as: "main", "data-section": "primary", children: _jsx("span", { children: "Content" }) }));
|
|
73
|
+
expect(getByRole('main').getAttribute('data-section')).toBe('primary');
|
|
74
|
+
});
|
|
75
|
+
it('forwards event handlers', () => {
|
|
76
|
+
const handleClick = jest.fn();
|
|
77
|
+
const { getByRole } = renderWithTheme(_jsx(BKJLandmark, { as: "main", onClick: handleClick, children: _jsx("span", { children: "Content" }) }));
|
|
78
|
+
fireEvent.click(getByRole('main'));
|
|
79
|
+
expect(handleClick).toHaveBeenCalledTimes(1);
|
|
80
|
+
});
|
|
81
|
+
it('forwards ref to the underlying HTML element', () => {
|
|
82
|
+
const ref = createRef();
|
|
83
|
+
renderWithTheme(_jsx(BKJLandmark, { as: "main", ref: ref, children: _jsx("span", { children: "Content" }) }));
|
|
84
|
+
expect(ref.current).toBeInstanceOf(HTMLElement);
|
|
85
|
+
expect(ref.current?.tagName).toBe('MAIN');
|
|
86
|
+
});
|
|
87
|
+
it('renders without errors when no children are passed', () => {
|
|
88
|
+
const { getByRole } = renderWithTheme(_jsx(BKJLandmark, { as: "main" }));
|
|
89
|
+
expect(getByRole('main')).toBeInTheDocument();
|
|
90
|
+
});
|
|
91
|
+
});
|
|
92
|
+
describe('US3: TypeScript enforcement', () => {
|
|
93
|
+
it('renders main without label props', () => {
|
|
94
|
+
const { getByRole } = renderWithTheme(_jsx(BKJLandmark, { as: "main", children: _jsx("span", { children: "Content" }) }));
|
|
95
|
+
expect(getByRole('main')).toBeInTheDocument();
|
|
96
|
+
});
|
|
97
|
+
it('renders nav with aria-label', () => {
|
|
98
|
+
const { getByRole } = renderWithTheme(_jsx(BKJLandmark, { as: "nav", "aria-label": "Site navigation", children: _jsx("a", { href: "/", children: "Home" }) }));
|
|
99
|
+
expect(getByRole('navigation', { name: 'Site navigation' })).toBeInTheDocument();
|
|
100
|
+
});
|
|
101
|
+
it('renders section with aria-labelledby', () => {
|
|
102
|
+
const { getByRole } = renderWithTheme(_jsxs(_Fragment, { children: [_jsx("h2", { id: "heading", children: "Title" }), _jsx(BKJLandmark, { as: "section", "aria-labelledby": "heading", children: _jsx("span", { children: "Content" }) })] }));
|
|
103
|
+
expect(getByRole('region')).toHaveAttribute('aria-labelledby', 'heading');
|
|
104
|
+
});
|
|
105
|
+
// Compile-time enforcement: the following would produce TypeScript errors:
|
|
106
|
+
// <BKJLandmark as="nav" /> — missing aria-label or aria-labelledby
|
|
107
|
+
// <BKJLandmark as="aside" /> — missing aria-label or aria-labelledby
|
|
108
|
+
// <BKJLandmark as="section" /> — missing aria-label or aria-labelledby
|
|
109
|
+
// <BKJLandmark as="div" /> — 'div' is not a valid LandmarkType
|
|
110
|
+
// See contracts/public-api.md for full compile-time error examples.
|
|
111
|
+
});
|
|
112
|
+
describe('Accessibility', () => {
|
|
113
|
+
it('has no accessibility violations for a labelled navigation', async () => {
|
|
114
|
+
const { container } = renderWithTheme(_jsxs(BKJLandmark, { as: "nav", "aria-label": "Main navigation", children: [_jsx("a", { href: "/", children: "Home" }), _jsx("a", { href: "/about", children: "About" })] }));
|
|
115
|
+
const results = await axe(container);
|
|
116
|
+
expect(results).toHaveNoViolations();
|
|
117
|
+
});
|
|
118
|
+
it('has no accessibility violations for a full page structure', async () => {
|
|
119
|
+
const { container } = renderWithTheme(_jsxs(_Fragment, { children: [_jsx(BKJLandmark, { as: "header", children: _jsx(BKJLandmark, { as: "nav", "aria-label": "Main navigation", children: _jsx("a", { href: "/", children: "Home" }) }) }), _jsxs(BKJLandmark, { as: "main", children: [_jsx("h1", { children: "Page Title" }), _jsx(BKJLandmark, { as: "section", "aria-label": "Overview", children: _jsx("p", { children: "Content" }) })] }), _jsx(BKJLandmark, { as: "aside", "aria-label": "Sidebar", children: _jsx("p", { children: "Sidebar content" }) }), _jsx(BKJLandmark, { as: "footer", children: _jsx("p", { children: "Footer content" }) })] }));
|
|
120
|
+
const results = await axe(container);
|
|
121
|
+
expect(results).toHaveNoViolations();
|
|
122
|
+
});
|
|
123
|
+
});
|
|
124
|
+
});
|
|
125
|
+
//# sourceMappingURL=BKJLandmark.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BKJLandmark.test.js","sourceRoot":"","sources":["../../../src/components/BKJLandmark/BKJLandmark.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
/** Landmark element types that require an accessible label (aria-label or aria-labelledby). */
|
|
3
|
+
export type LabelRequiredLandmarkType = 'nav' | 'aside' | 'section';
|
|
4
|
+
/** Landmark element types where labels are optional. */
|
|
5
|
+
export type LabelOptionalLandmarkType = 'header' | 'footer' | 'main';
|
|
6
|
+
/** All supported landmark element types. */
|
|
7
|
+
export type LandmarkType = LabelRequiredLandmarkType | LabelOptionalLandmarkType;
|
|
8
|
+
interface IBaseLandmarkProps extends HTMLAttributes<HTMLElement> {
|
|
9
|
+
children?: ReactNode;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Props for landmark elements that REQUIRE an accessible label.
|
|
13
|
+
*
|
|
14
|
+
* `nav`, `aside`, and `section` must provide at least one of `aria-label` or
|
|
15
|
+
* `aria-labelledby` so screen readers can distinguish multiple instances on a page.
|
|
16
|
+
*/
|
|
17
|
+
export type ILabelRequiredLandmarkProps = IBaseLandmarkProps & {
|
|
18
|
+
as: LabelRequiredLandmarkType;
|
|
19
|
+
} & ({
|
|
20
|
+
'aria-label': string;
|
|
21
|
+
'aria-labelledby'?: string;
|
|
22
|
+
} | {
|
|
23
|
+
'aria-label'?: string;
|
|
24
|
+
'aria-labelledby': string;
|
|
25
|
+
});
|
|
26
|
+
/**
|
|
27
|
+
* Props for landmark elements where labels are optional.
|
|
28
|
+
*
|
|
29
|
+
* `header`, `footer`, and `main` have implicit ARIA roles that browsers
|
|
30
|
+
* recognise without explicit labels.
|
|
31
|
+
*/
|
|
32
|
+
export interface ILabelOptionalLandmarkProps extends IBaseLandmarkProps {
|
|
33
|
+
as: LabelOptionalLandmarkType;
|
|
34
|
+
'aria-label'?: string;
|
|
35
|
+
'aria-labelledby'?: string;
|
|
36
|
+
}
|
|
37
|
+
/** Discriminated union of all BKJLandmark prop variants. */
|
|
38
|
+
export type IBKJLandmarkProps = ILabelRequiredLandmarkProps | ILabelOptionalLandmarkProps;
|
|
39
|
+
export {};
|
|
40
|
+
//# sourceMappingURL=BKJLandmark.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BKJLandmark.types.d.ts","sourceRoot":"","sources":["../../../src/components/BKJLandmark/BKJLandmark.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,+FAA+F;AAC/F,MAAM,MAAM,yBAAyB,GAAG,KAAK,GAAG,OAAO,GAAG,SAAS,CAAC;AAEpE,wDAAwD;AACxD,MAAM,MAAM,yBAAyB,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAErE,4CAA4C;AAC5C,MAAM,MAAM,YAAY,GAAG,yBAAyB,GAAG,yBAAyB,CAAC;AAEjF,UAAU,kBAAmB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,MAAM,MAAM,2BAA2B,GAAG,kBAAkB,GAAG;IAC7D,EAAE,EAAE,yBAAyB,CAAC;CAC/B,GAAG,CACE;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAAE,GACpD;IAAE,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,CACvD,CAAC;AAEJ;;;;;GAKG;AACH,MAAM,WAAW,2BAA4B,SAAQ,kBAAkB;IACrE,EAAE,EAAE,yBAAyB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,4DAA4D;AAC5D,MAAM,MAAM,iBAAiB,GAAG,2BAA2B,GAAG,2BAA2B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BKJLandmark.types.js","sourceRoot":"","sources":["../../../src/components/BKJLandmark/BKJLandmark.types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BKJLandmark/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/BKJLandmark/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
|
@@ -16,6 +16,7 @@ export * from './BKJEllipsisMenu/index.js';
|
|
|
16
16
|
export * from './BKJFileInput/index.js';
|
|
17
17
|
export * from './BKJHorizontalRule/index.js';
|
|
18
18
|
export * from './BKJIcon/index.js';
|
|
19
|
+
export * from './BKJLandmark/index.js';
|
|
19
20
|
export * from './BKJIconTooltip/index.js';
|
|
20
21
|
export * from './BKJImage/index.js';
|
|
21
22
|
export * from './BKJListItem/index.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}
|
package/lib/components/index.js
CHANGED
|
@@ -16,6 +16,7 @@ export * from './BKJEllipsisMenu/index.js';
|
|
|
16
16
|
export * from './BKJFileInput/index.js';
|
|
17
17
|
export * from './BKJHorizontalRule/index.js';
|
|
18
18
|
export * from './BKJIcon/index.js';
|
|
19
|
+
export * from './BKJLandmark/index.js';
|
|
19
20
|
export * from './BKJIconTooltip/index.js';
|
|
20
21
|
export * from './BKJImage/index.js';
|
|
21
22
|
export * from './BKJListItem/index.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}
|