@markuplint/rules 3.7.0 → 3.9.0

package/test/require-accessible-name/index.spec.js

@@ -0,0 +1,446 @@
+const { mlRuleTest } = require('markuplint');
+
+const rule = require('../../lib/require-accessible-name').default;
+
+it('has accessible name', async () => {
+	const { violations } = await mlRuleTest(rule, '<button>Label</button>');
+	expect(violations.length).toBe(0);
+});
+
+it('has accessible name', async () => {
+	const { violations } = await mlRuleTest(rule, '<button aria-label="Label"></button>');
+	expect(violations.length).toBe(0);
+});
+
+it("does'nt have accessible name", async () => {
+	const { violations } = await mlRuleTest(rule, '<button></button>');
+	expect(violations).toStrictEqual([
+		{
+			severity: 'error',
+			col: 1,
+			line: 1,
+			message: 'Require accessible name',
+			raw: '<button>',
+		},
+	]);
+});
+
+it("does'nt have accessible name", async () => {
+	const { violations } = await mlRuleTest(rule, '<input type="text">');
+	expect(violations).toStrictEqual([
+		{
+			severity: 'error',
+			col: 1,
+			line: 1,
+			message: 'Require accessible name',
+			raw: '<input type="text">',
+		},
+	]);
+});
+
+it('has accessible name', async () => {
+	const { violations } = await mlRuleTest(rule, '<input type="text" aria-label="Label">');
+	expect(violations.length).toBe(0);
+});
+
+it('has accessible name', async () => {
+	const { violations } = await mlRuleTest(rule, '<input type="text" id="foo"><label for="foo">Label</label>');
+	expect(violations.length).toBe(0);
+});
+
+it("does'nt have accessible name", async () => {
+	const { violations } = await mlRuleTest(rule, '<input type="text" id="foo"><label for="foo2">Label</label>');
+	expect(violations).toStrictEqual([
+		{
+			severity: 'error',
+			col: 1,
+			line: 1,
+			message: 'Require accessible name',
+			raw: '<input type="text" id="foo">',
+		},
+	]);
+});
+
+it('has accessible name', async () => {
+	const { violations } = await mlRuleTest(rule, '<label><input type="text">Label</label>');
+	expect(violations.length).toBe(0);
+});
+
+it("does'nt have accessible name", async () => {
+	const { violations } = await mlRuleTest(
+		rule,
+		`
+<button>
+  <span></span>
+  <span></span>
+  <span></span>
+</button>`,
+	);
+	expect(violations).toStrictEqual([
+		{
+			severity: 'error',
+			col: 1,
+			line: 2,
+			message: 'Require accessible name',
+			raw: '<button>',
+		},
+	]);
+});
+
+it('has accessible name', async () => {
+	const { violations } = await mlRuleTest(
+		rule,
+		`
+<button>
+  <span class="visually-hidden">Menu</span>
+  <span></span>
+  <span></span>
+  <span></span>
+</button>`,
+	);
+	expect(violations.length).toBe(0);
+});
+
+it('needs no accessible name', async () => {
+	const { violations } = await mlRuleTest(rule, '<link rel="stylesheet" href="path/to" />');
+	expect(violations.length).toBe(0);
+});
+
+it("does'nt have accessible name", async () => {
+	const { violations: v1 } = await mlRuleTest(rule, '<form>text</form>', {
+		rule: { options: { ariaVersion: '1.1' } },
+	});
+	expect(v1.length).toBe(0);
+	const { violations: v2 } = await mlRuleTest(rule, '<form>text</form>', {
+		rule: { options: { ariaVersion: '1.2' } },
+	});
+	expect(v2.length).toBe(0);
+});
+
+test('The accessible name may be mutable', async () => {
+	expect(
+		(
+			await mlRuleTest(rule, '<input type="text" aria-label={label} />', {
+				parser: {
+					'.*': '@markuplint/jsx-parser',
+				},
+			})
+		).violations,
+	).toStrictEqual([]);
+});
+
+test('The accessible name may be mutable', async () => {
+	expect(
+		(
+			await mlRuleTest(rule, '<button>{label}</button>', {
+				parser: {
+					'.*': '@markuplint/jsx-parser',
+				},
+			})
+		).violations,
+	).toStrictEqual([]);
+});
+
+test('The accessible name may be mutable', async () => {
+	expect(
+		(
+			await mlRuleTest(rule, '<button><span>{label}</span></button>', {
+				parser: {
+					'.*': '@markuplint/jsx-parser',
+				},
+			})
+		).violations,
+	).toStrictEqual([]);
+});
+
+test('The accessible name may be mutable', async () => {
+	expect(
+		(
+			await mlRuleTest(rule, '<template><button>{{label}}</button></template>', {
+				parser: {
+					'.*': '@markuplint/vue-parser',
+				},
+			})
+		).violations,
+	).toStrictEqual([]);
+});
+
+test('has comment', async () => {
+	expect((await mlRuleTest(rule, '<button>label<!-- comment --></button>')).violations).toStrictEqual([]);
+});
+
+test('The accessible name may be mutable (Svelte)', async () => {
+	expect(
+		(
+			await mlRuleTest(rule, '<button>{label}</button>', {
+				parser: {
+					'.*': '@markuplint/svelte-parser',
+				},
+			})
+		).violations,
+	).toStrictEqual([]);
+});
+
+test('The accessible name may be mutable', async () => {
+	expect(
+		(
+			await mlRuleTest(rule, '<button><img alt={alt} /></button>', {
+				parser: {
+					'.*': '@markuplint/jsx-parser',
+				},
+			})
+		).violations,
+	).toStrictEqual([]);
+});
+
+test('The accessible name may be mutable', async () => {
+	expect(
+		(
+			await mlRuleTest(rule, '<label><input type="text" /><span>{label}</span></label>', {
+				parser: {
+					'.*': '@markuplint/jsx-parser',
+				},
+			})
+		).violations,
+	).toStrictEqual([]);
+});
+
+test('The accessible name may be mutable', async () => {
+	expect(
+		(
+			await mlRuleTest(rule, '<><label for="foo">{label}</label><input type="text" id="foo" /></>', {
+				parser: {
+					'.*': '@markuplint/jsx-parser',
+				},
+			})
+		).violations,
+	).toStrictEqual([]);
+});
+
+test('Pretenders Option', async () => {
+	expect(
+		(
+			await mlRuleTest(rule, '<button><MyComponent/></button>', {
+				parser: {
+					'.*': '@markuplint/jsx-parser',
+				},
+				pretenders: [
+					{
+						selector: 'MyComponent',
+						as: {
+							element: 'img',
+						},
+					},
+				],
+			})
+		).violations,
+	).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			message: 'Require accessible name',
+			raw: '<button>',
+		},
+	]);
+	expect(
+		(
+			await mlRuleTest(rule, '<button><MyComponent/></button>', {
+				parser: {
+					'.*': '@markuplint/jsx-parser',
+				},
+				pretenders: [
+					{
+						selector: 'MyComponent',
+						as: {
+							element: 'img',
+							attrs: [
+								{
+									name: 'alt',
+									value: 'some text',
+								},
+							],
+						},
+					},
+				],
+			})
+		).violations,
+	).toStrictEqual([]);
+	expect(
+		(
+			await mlRuleTest(rule, '<button><MyComponent/></button>', {
+				parser: {
+					'.*': '@markuplint/jsx-parser',
+				},
+				pretenders: [
+					{
+						selector: 'MyComponent',
+						as: {
+							element: 'img',
+							attrs: [
+								{
+									name: 'alt',
+									value: '',
+								},
+							],
+						},
+					},
+				],
+			})
+		).violations,
+	).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			message: 'Require accessible name',
+			raw: '<button>',
+		},
+	]);
+	expect(
+		(
+			await mlRuleTest(rule, '<button><MyComponent/></button>', {
+				parser: {
+					'.*': '@markuplint/jsx-parser',
+				},
+				pretenders: [
+					{
+						selector: 'MyComponent',
+						as: {
+							element: 'img',
+							aria: {
+								name: true,
+							},
+						},
+					},
+				],
+			})
+		).violations,
+	).toStrictEqual([]);
+	expect(
+		(
+			await mlRuleTest(rule, '<button><MyComponent label="accname"/></button>', {
+				parser: {
+					'.*': '@markuplint/jsx-parser',
+				},
+				pretenders: [
+					{
+						selector: 'MyComponent',
+						as: {
+							element: 'img',
+							aria: {
+								name: {
+									fromAttr: 'label',
+								},
+							},
+						},
+					},
+				],
+			})
+		).violations,
+	).toStrictEqual([]);
+	expect(
+		(
+			await mlRuleTest(rule, '<button><MyComponent label=""/></button>', {
+				parser: {
+					'.*': '@markuplint/jsx-parser',
+				},
+				pretenders: [
+					{
+						selector: 'MyComponent',
+						as: {
+							element: 'img',
+							aria: {
+								name: {
+									fromAttr: 'label',
+								},
+							},
+						},
+					},
+				],
+			})
+		).violations,
+	).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			message: 'Require accessible name',
+			raw: '<button>',
+		},
+	]);
+});
+
+describe('Issues', () => {
+	// https://github.com/markuplint/markuplint/issues/536
+	test('#536', async () => {
+		expect(
+			(await mlRuleTest(rule, '<h2 id="h">Heading</h2><div role="region" aria-labelledby="h">...</div>'))
+				.violations,
+		).toStrictEqual([]);
+		expect(
+			(
+				await mlRuleTest(
+					rule,
+					'<h2 id="h">Heading</h2><div role="region" aria-labelledby="h" aria-hidden="true">...</div>',
+				)
+			).violations,
+		).toStrictEqual([]);
+	});
+
+	// https://github.com/markuplint/markuplint/issues/592
+	test('#592', async () => {
+		expect(
+			(await mlRuleTest(rule, '<svg aria-label="i-have-name"><path /><rect><path /></rect></svg>')).violations,
+		).toStrictEqual([
+			{
+				col: 31,
+				line: 1,
+				message: 'Require accessible name',
+				raw: '<path />',
+				severity: 'error',
+			},
+			{
+				col: 39,
+				line: 1,
+				message: 'Require accessible name',
+				raw: '<rect>',
+				severity: 'error',
+			},
+		]);
+		expect(
+			(await mlRuleTest(rule, '<svg role="img" aria-label="i-have-name"><path /><rect><path /></rect></svg>'))
+				.violations,
+		).toStrictEqual([]);
+		expect(
+			(
+				await mlRuleTest(
+					rule,
+					'<svg aria-label="i-have-name"><path aria-label="i-have-name" /><rect><path /></rect></svg>',
+				)
+			).violations,
+		).toStrictEqual([
+			{
+				col: 64,
+				line: 1,
+				message: 'Require accessible name',
+				raw: '<rect>',
+				severity: 'error',
+			},
+		]);
+		expect(
+			(
+				await mlRuleTest(
+					rule,
+					'<svg aria-label="i-have-name"><path aria-label="i-have-name" /><rect aria-label="i-have-name"><path /></rect></svg>',
+				)
+			).violations,
+		).toStrictEqual([]);
+	});
+
+	// https://github.com/markuplint/markuplint/issues/658
+	test('#658', async () => {
+		expect((await mlRuleTest(rule, '<dialog></dialog>')).violations.length).toBe(1);
+		expect((await mlRuleTest(rule, '<div role="dialog"></div>')).violations.length).toBe(1);
+	});
+});

package/test/require-datetime/index.spec.js

@@ -0,0 +1,54 @@
+const { mlRuleTest } = require('markuplint');
+
+const rule = require('../../lib/require-datetime').default;
+
+test('Valid', async () => {
+	expect((await mlRuleTest(rule, '<time>2000-01-01</time>')).violations).toStrictEqual([]);
+	expect((await mlRuleTest(rule, '<time datetime="2000-01-01">2000/01/01</time>')).violations).toStrictEqual([]);
+});
+
+test('Mutable', async () => {
+	expect(
+		(
+			await mlRuleTest(rule, '<time>{foo}</time>', {
+				parser: {
+					'.*': '@markuplint/jsx-parser',
+				},
+			})
+		).violations,
+	).toStrictEqual([]);
+});
+
+test('Need', async () => {
+	expect((await mlRuleTest(rule, '<time>Content</time>')).violations).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			raw: '<time>',
+			message: 'Need the "datetime" attribute',
+		},
+	]);
+});
+
+test('Candidates', async () => {
+	expect((await mlRuleTest(rule, '<time>2000/01/01</time>')).violations).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			raw: '<time>',
+			message: 'Need datetime="2000-01-01"',
+		},
+	]);
+
+	expect((await mlRuleTest(rule, '<time>令和5年1月3日</time>')).violations).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			raw: '<time>',
+			message: 'Need datetime="2023-01-03"',
+		},
+	]);
+});

package/test/require-datetime/utils.spec.js

@@ -0,0 +1,52 @@
+const { parseADatetime, getCandidateDatetimeString } = require('../../lib/require-datetime/utils');
+
+test('parseADatetime', () => {
+	expect(parseADatetime('2000/1/1', ['en'])).toStrictEqual({
+		datetime: {
+			year: 2000,
+			month: 1,
+			day: 1,
+		},
+	});
+	expect(parseADatetime('3:00PM', ['en'])).toStrictEqual({
+		datetime: {
+			hour: 15,
+			minute: 0,
+		},
+	});
+	expect(parseADatetime('5 days ago', ['en'], new Date(2023, 1 - 1, 20))).toStrictEqual({
+		datetime: {
+			day: 15,
+			month: 1,
+			year: 2023,
+		},
+	});
+	expect(parseADatetime('Sat Aug 17 2013 18:40:39 GMT+0900 (JST)', ['en'])).toStrictEqual({
+		datetime: {
+			day: 17,
+			hour: 18,
+			minute: 40,
+			month: 8,
+			second: 39,
+			year: 2013,
+		},
+		zone: 540,
+	});
+
+	// attributable to chrono
+	expect(parseADatetime('2015', ['en'])).toStrictEqual(null);
+	expect(parseADatetime('令和5年', ['ja'])).toStrictEqual(null);
+	expect(parseADatetime('午後2時', ['en', 'ja'])).toStrictEqual(null);
+});
+
+test('getCandidateDatetimeString', () => {
+	expect(getCandidateDatetimeString('2000/1/1')).toBe('2000-01-01');
+	expect(getCandidateDatetimeString('1/2/2011')).toBe('2011-01-02');
+	expect(getCandidateDatetimeString('2000/1/2 12:15')).toBe('2000-01-02T12:15');
+	expect(getCandidateDatetimeString('3000/12/31 23:59:59.999')).toBe('3000-12-31T23:59:59.999');
+	expect(getCandidateDatetimeString('Sat Aug 17 2013 18:40:39 GMT+0900 (JST)')).toBe('2013-08-17T18:40:39+0900');
+	expect(getCandidateDatetimeString('2014-11-30T08:15:30-05:30')).toBe('2014-11-30T08:15:30-0530');
+	expect(getCandidateDatetimeString('6:15PM, June 13, 2022')).toBe('2022-06-13T18:15');
+	expect(getCandidateDatetimeString('昭和60年7月9日')).toBe('1985-07-09');
+	expect(getCandidateDatetimeString('Le 5 juin 2001')).toBe('2001-06-05'); // cspell:disable-line
+});