#2448

Build # #2448

Build Type

push

Committed by

Commit Message

<a href="https://github.com/markuplint/markuplint/commit/<a class=hub.com/markuplint/markuplint/commit/50ed26dc8048997354e49ae8f331d9e2407b29e3">50ed26dc8<a href="https://github.com/markuplint/markuplint/commit/50ed26dc8048997354e49ae8f331d9e2407b29e3">">Merge </a><a class="double-link" href="https://github.com/markuplint/markuplint/commit/<a class="double-link" href="https://github.com/markuplint/markuplint/commit/5bd2ad2d790cf2d097ad84b335109b6424122e01">5bd2ad2d7</a>">5bd2ad2d7</a><a href="https://github.com/markuplint/markuplint/commit/50ed26dc8048997354e49ae8f331d9e2407b29e3"> into 65581badf">65581badf</a>

Run Details

3565 of 5284 branches covered (67.47%)

Branch coverage included in aggregate %.

6512 of 9074 relevant lines covered (71.77%)

305.02 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

78.57

/packages/@markuplint/rules/src/landmark-roles/index.ts

import type { Element } from '@markuplint/ml-core';

import { createRule } from '@markuplint/ml-core';

type Options = {
        ignoreRoles: Roles[];
        labelEachArea: boolean;
};

type TopLevelRoles = 'banner' | 'main' | 'complementary' | 'contentinfo';

type Roles = TopLevelRoles | 'form' | 'navigation' | 'region';

type RoleSet = {
        [role in Roles]: Element<boolean, Options>[];
};

const selectors: { [role in Roles]: string[] } = {
        complementary: ['[role="complementary"]', 'aside'],
        contentinfo: ['[role="contentinfo"]'],
        form: ['[role="form"]', 'form[aria-labelledby]', 'form[aria-label]', 'form[title]'],
        banner: ['[role="banner"]'],
        main: ['[role="main"]', 'main'],
        navigation: ['[role="navigation"]', 'nav'],
        region: ['[role="region"]', 'section[aria-labelledby]', 'section[aria-label]', 'section[title]'],
};

const topLevelRoles: TopLevelRoles[] = ['banner', 'main', 'complementary', 'contentinfo'];

export default createRule<boolean, Options>({
        defaultSeverity: 'warning',
        defaultOptions: {
                ignoreRoles: [],
                labelEachArea: true,
        },
        verify({ document, report, t }) {
                if (document.isFragment) {
                        return;
                }

                const roles: RoleSet = {
                        complementary: Array.from(document.querySelectorAll(selectors.complementary.join(','))),
                        contentinfo: Array.from(document.querySelectorAll(selectors.contentinfo.join(','))),
                        form: Array.from(document.querySelectorAll(selectors.form.join(','))),
                        banner: Array.from(document.querySelectorAll(selectors.banner.join(','))),
                        main: Array.from(document.querySelectorAll(selectors.main.join(','))),
                        navigation: Array.from(document.querySelectorAll(selectors.navigation.join(','))),
                        region: Array.from(document.querySelectorAll(selectors.region.join(','))),
                };

                /**
                 * `<header>`
                 *
                 * @cite https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html
                 *
                 * > When in context of the body element. The header element is not a banner landmark when it is a descendant of the following HTML sectioning elements:
                 * > - article
                 * > - aside
                 * > - main
                 * > - nav
                 * > - section
                 */
                const headers = Array.from(document.querySelectorAll('header')).filter(header => {
                        return !header.closest('article, aside, main, nav, section');
                });
                roles.banner.push(...headers);

                /**
                 * `<footer>`
                 *
                 * @cite https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html
                 *
                 * > When in context of the body element. The footer element is not a contentinfo landmark when it is a descendant of the following HTML sectioning elements:
                 * > - article
                 * > - aside
                 * > - main
                 * > - nav
                 * > - section
                 */
                const footers = Array.from(document.querySelectorAll('footer')).filter(footer => {
                        return !footer.closest('article, aside, main, nav, section');
                });
                roles.contentinfo.push(...footers);

                const uuidList = landmarkRoleElementUUIDList(roles);

                // @cite https://www.w3.org/TR/wai-aria-practices/examples/landmarks/index.html
                // > `banner`, `main`, `complementary` and `contentinfo` landmarks should be top level landmarks.
                for (const role of topLevelRoles) {
                        const elements = roles[role];
                        for (const el of elements) {
                                if (el.rule.disabled) {
                                        continue;
                                }

                                if (el.rule.option.ignoreRoles?.includes(role)) {
                                        continue;
                                }

                                if (el.isDescendantByUUIDList(uuidList)) {
                                        report({
                                                scope: el,
                                                message: t('{0} should be {1}', t('the "{0*}" {1}', role, 'role'), 'top level'),
                                        });
                                }
                        }
                }

                for (const role of Object.keys(roles)) {
                        const roleEls = roles[role as Roles];
                        const duplicated = 1 < roleEls.length;
                        if (!duplicated) {
                                continue;
                        }

                        for (const el of roleEls) {
                                if (el.rule.disabled) {
                                        continue;
                                }

                                if (!el.rule.option.labelEachArea) {
                                        continue;
                                }

                                if (!hasLabel(el)) {
                                        report({
                                                scope: el,
                                                message: t('Require {0}', t('unique {0}', 'accessible name')),
                                        });
                                }
                        }
                }
        },
});

function landmarkRoleElementUUIDList(roleset: RoleSet) {
        return Object.values(roleset)
                .map(elements => elements.map(element => element.uuid))
                .flat();
}

function hasLabel(el: Element<boolean, Options>) {
        const hasHeading = !!el.querySelectorAll('h1, h2, h3, h4, h5, h6').length;
        if (hasHeading && el.matches('[aria-labelledby]')) {
                return true;
        }

        return el.matches('[aria-label]');
}

1	import type { Element } from '@markuplint/ml-core';
2
3	import { createRule } from '@markuplint/ml-core';	1✔
4
5	type Options = {
6	ignoreRoles: Roles[];
7	labelEachArea: boolean;
8	};
9
10	type TopLevelRoles = 'banner' \| 'main' \| 'complementary' \| 'contentinfo';
11
12	type Roles = TopLevelRoles \| 'form' \| 'navigation' \| 'region';
13
14	type RoleSet = {
15	[role in Roles]: Element<boolean, Options>[];
16	};
17
18	const selectors: { [role in Roles]: string[] } = {	1✔
19	complementary: ['[role="complementary"]', 'aside'],
20	contentinfo: ['[role="contentinfo"]'],
21	form: ['[role="form"]', 'form[aria-labelledby]', 'form[aria-label]', 'form[title]'],
22	banner: ['[role="banner"]'],
23	main: ['[role="main"]', 'main'],
24	navigation: ['[role="navigation"]', 'nav'],
25	region: ['[role="region"]', 'section[aria-labelledby]', 'section[aria-label]', 'section[title]'],
26	};
27
28	const topLevelRoles: TopLevelRoles[] = ['banner', 'main', 'complementary', 'contentinfo'];	1✔
29
30	export default createRule<boolean, Options>({	1✔
31	defaultSeverity: 'warning',
32	defaultOptions: {
33	ignoreRoles: [],
34	labelEachArea: true,
35	},
36	verify({ document, report, t }) {
37	if (document.isFragment) {	5!
38	return;	×
39	}
40
41	const roles: RoleSet = {	5✔
42	complementary: Array.from(document.querySelectorAll(selectors.complementary.join(','))),
43	contentinfo: Array.from(document.querySelectorAll(selectors.contentinfo.join(','))),
44	form: Array.from(document.querySelectorAll(selectors.form.join(','))),
45	banner: Array.from(document.querySelectorAll(selectors.banner.join(','))),
46	main: Array.from(document.querySelectorAll(selectors.main.join(','))),
47	navigation: Array.from(document.querySelectorAll(selectors.navigation.join(','))),
48	region: Array.from(document.querySelectorAll(selectors.region.join(','))),
49	};
50
51	/**
52	* `<header>`
53	*
54	* @cite https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html
55	*
56	* > When in context of the body element. The header element is not a banner landmark when it is a descendant of the following HTML sectioning elements:
57	* > - article
58	* > - aside
59	* > - main
60	* > - nav
61	* > - section
62	*/
63	const headers = Array.from(document.querySelectorAll('header')).filter(header => {	5✔
64	return !header.closest('article, aside, main, nav, section');	10✔
65	});
66	roles.banner.push(...headers);	5✔
67
68	/**
69	* `<footer>`
70	*
71	* @cite https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html
72	*
73	* > When in context of the body element. The footer element is not a contentinfo landmark when it is a descendant of the following HTML sectioning elements:
74	* > - article
75	* > - aside
76	* > - main
77	* > - nav
78	* > - section
79	*/
80	const footers = Array.from(document.querySelectorAll('footer')).filter(footer => {	5✔
81	return !footer.closest('article, aside, main, nav, section');	10✔
82	});
83	roles.contentinfo.push(...footers);	5✔
84
85	const uuidList = landmarkRoleElementUUIDList(roles);	5✔
86
87	// @cite https://www.w3.org/TR/wai-aria-practices/examples/landmarks/index.html
88	// > `banner`, `main`, `complementary` and `contentinfo` landmarks should be top level landmarks.
89	for (const role of topLevelRoles) {	5✔
90	const elements = roles[role];	20✔
91	for (const el of elements) {	20✔
92	if (el.rule.disabled) {	18!
93	continue;	×
94	}
95
96	if (el.rule.option.ignoreRoles?.includes(role)) {	18!
97	continue;	1✔
98	}
99
100	if (el.isDescendantByUUIDList(uuidList)) {	17✔
101	report({	1✔
102	scope: el,
103	message: t('{0} should be {1}', t('the "{0*}" {1}', role, 'role'), 'top level'),
104	});
105	}
106	}
107	}
108
109	for (const role of Object.keys(roles)) {	5✔
110	const roleEls = roles[role as Roles];	35✔
111	const duplicated = 1 < roleEls.length;	35✔
112	if (!duplicated) {	35✔
113	continue;	33✔
114	}
115
116	for (const el of roleEls) {	2✔
117	if (el.rule.disabled) {	4!
118	continue;	×
119	}
120
121	if (!el.rule.option.labelEachArea) {	4!
122	continue;	×
123	}
124
125	if (!hasLabel(el)) {	4✔
126	report({	2✔
127	scope: el,
128	message: t('Require {0}', t('unique {0}', 'accessible name')),
129	});
130	}
131	}
132	}
133	},
134	});
135
136	function landmarkRoleElementUUIDList(roleset: RoleSet) {
137	return Object.values(roleset)	5✔
138	.map(elements => elements.map(element => element.uuid))	35✔
139	.flat();
140	}
141
142	function hasLabel(el: Element<boolean, Options>) {
143	const hasHeading = !!el.querySelectorAll('h1, h2, h3, h4, h5, h6').length;	4✔
144	if (hasHeading && el.matches('[aria-labelledby]')) {	4!
145	return true;	×
146	}
147
148	return el.matches('[aria-label]');	4✔
149	}

markuplint / markuplint / #2448

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous