.gitlab-ci.yml

@@ -108,10 +108,6 @@ Node 12.x (LTS):
   <<: *compat
   image: node:12
 
-Node 13.x (current):
-  <<: *compat
-  image: node:13
-
 Node 14.x (current):
   <<: *compat
   image: node:14

CHANGELOG.md

 # html-validate changelog
 
+# [3.1.0](https://gitlab.com/html-validate/html-validate/compare/v3.0.0...v3.1.0) (2020-08-20)
+
+### Bug Fixes
+
+- **rules:** `no-redundant-for` should only target `<label>` ([a2395b6](https://gitlab.com/html-validate/html-validate/commit/a2395b6d75c6aefba9c44b38dcecb72cad4d0110))
+
+### Features
+
+- **meta:** new property `labelable` ([bf5cd6e](https://gitlab.com/html-validate/html-validate/commit/bf5cd6ef422036d9c0d4e6d8b677d218fb0f014d))
+- **rules:** new rule `multiple-labeled-controls` ([ee28774](https://gitlab.com/html-validate/html-validate/commit/ee287745fa75a2ab8cb6a4362c99e95bd59aaac6)), closes [#86](https://gitlab.com/html-validate/html-validate/issues/86)
+- **rules:** new rule `no-redundant-for` ([d4445bb](https://gitlab.com/html-validate/html-validate/commit/d4445bb1453408afddf10113acf1db89afd30f7b)), closes [#87](https://gitlab.com/html-validate/html-validate/issues/87)
+
 # [3.0.0](https://gitlab.com/html-validate/html-validate/compare/v2.23.1...v3.0.0) (2020-06-21)
 
 ### Bug Fixes
@@ -189,7 +201,7 @@
 
 ### Bug Fixes
 
-- **rules:** dont report elements where the tag is already correct ([ee354a0](https://gitlab.com/html-validate/html-validate/commit/ee354a0070f4ac6657cf0a5ce84bddadb3d2dab7)), closes [#65](https://gitlab.com/html-validate/html-validate/issues/65)
+- **rules:** don't report elements where the tag is already correct ([ee354a0](https://gitlab.com/html-validate/html-validate/commit/ee354a0070f4ac6657cf0a5ce84bddadb3d2dab7)), closes [#65](https://gitlab.com/html-validate/html-validate/issues/65)
 
 ### Features
 

docs/dev/events.md

@@ -85,8 +85,8 @@ about to be closed.
 }
 ```
 
-Emitted when an element is fully constructed (including its children). `target`
-will be the the element.
+Emitted when an element is fully constructed (including its children).
+`target` will be the element.
 
 ## `attr`
 

docs/dev/writing-plugins.md

@@ -248,7 +248,7 @@ module.exports = {
     },
 
     // definitions are added to shared types
-    defintions: {
+    definitions: {
       myReferenceType: {
         type: "number",
       },

docs/dev/writing-rules.md

@@ -143,7 +143,7 @@ class MyRule extends Rule<void, RuleOptions> {
     /* actual setup code left out for brevity */
 
     /* disallow the node from containing the text provided in the option */
-    if (node.textContent.inclues(this.options.text)) {
+    if (node.textContent.includes(this.options.text)) {
       this.report(node, "Contains disallowed text");
     }
   }

docs/dgeni/templates/base.template.html

@@ -43,7 +43,7 @@
 									<li>{@link usage/cli Using CLI}</li>
 									<li>{@link usage/elements Elements}</li>
 									<li>{@link rules/presets Presets}</li>
-									<li>{@link usage/transformers Transfomers}</li>
+									<li>{@link usage/transformers Transformers}</li>
 									<li role="separator" class="divider"></li>
 									<li>{@link usage/vscode VS Code}</li>
 									<li role="separator" class="divider"></li>

docs/guide/metadata/simple-component.md

@@ -80,7 +80,7 @@ The first step is creating a new JSON-file, e.g. `elements.json` and configure t
 ```json
 {
   "extends": ["html-validate:recommended"],
-  "elements: ["html5", "./elments.json"]
+  "elements: ["html5", "./elements.json"]
 }
 ```
 
@@ -153,7 +153,7 @@ If we set the `phrasing` property as well the element will be allowed inside a `
 </validate>
 
 Some elements might want only one or the other and some want both.
-Most of the time a phrasing elements belongs to both the flow and phrasing categories but a the opposite is not true.
+Most of the time a phrasing elements belongs to both the flow and phrasing categories but the opposite is not true.
 
 <div class="alert alert-info">
 	<i class="fa fa-info-circle" aria-hidden="true"></i>

docs/index.md

@@ -64,7 +64,7 @@ guidelines such as WCAG 2.1.
 
 Write your own element metadata, rules and/or business logic.
 
-Write your own sharable configurations or plugins.
+Write your own shareable configurations or plugins.
 
 **Learn more about [writing rules](dev/writing-rules.html) and [writing
 plugins](dev/writing-plugins.html).**

docs/rules/__tests__/__snapshots__/multiple-labeled-controls.md.spec.ts.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`docs/rules/multiple-labeled-controls.md inline validation: correct 1`] = `Array []`;
+
+exports[`docs/rules/multiple-labeled-controls.md inline validation: incorrect-both 1`] = `
+Array [
+  Object {
+    "errorCount": 1,
+    "filePath": "inline",
+    "messages": Array [
+      Object {
+        "column": 2,
+        "context": undefined,
+        "line": 1,
+        "message": "<label> is associated with multiple controls",
+        "offset": 1,
+        "ruleId": "multiple-labeled-controls",
+        "selector": "label",
+        "severity": 2,
+        "size": 5,
+      },
+    ],
+    "source": "<label for=\\"bar\\">
+  <input type=\\"text\\" id=\\"foo\\">
+</label>
+<input type=\\"text\\" id=\\"bar\\">",
+    "warningCount": 0,
+  },
+]
+`;
+
+exports[`docs/rules/multiple-labeled-controls.md inline validation: incorrect-multiple 1`] = `
+Array [
+  Object {
+    "errorCount": 1,
+    "filePath": "inline",
+    "messages": Array [
+      Object {
+        "column": 2,
+        "context": undefined,
+        "line": 1,
+        "message": "<label> is associated with multiple controls",
+        "offset": 1,
+        "ruleId": "multiple-labeled-controls",
+        "selector": "label",
+        "severity": 2,
+        "size": 5,
+      },
+    ],
+    "source": "<label>
+  <input type=\\"text\\">
+  <input type=\\"text\\">
+</label>",
+    "warningCount": 0,
+  },
+]
+`;

docs/rules/__tests__/__snapshots__/no-redundant-for.md.spec.ts.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`docs/rules/no-redundant-for.md inline validation: correct 1`] = `Array []`;
+
+exports[`docs/rules/no-redundant-for.md inline validation: incorrect 1`] = `
+Array [
+  Object {
+    "errorCount": 1,
+    "filePath": "inline",
+    "messages": Array [
+      Object {
+        "column": 8,
+        "context": undefined,
+        "line": 1,
+        "message": "Redundant \\"for\\" attribute",
+        "offset": 7,
+        "ruleId": "no-redundant-for",
+        "selector": "label",
+        "severity": 2,
+        "size": 3,
+      },
+    ],
+    "source": "<label for=\\"foo\\">
+  <input type=\\"checkbox\\" id=\\"foo\\">
+  My fancy checkbox
+</label>",
+    "warningCount": 0,
+  },
+]
+`;

docs/rules/__tests__/multiple-labeled-controls.md.spec.ts

+import HtmlValidate from "../../../src/htmlvalidate";
+
+const markup: { [key: string]: string } = {};
+markup["incorrect-multiple"] = `<label>
+  <input type="text">
+  <input type="text">
+</label>`;
+markup["incorrect-both"] = `<label for="bar">
+  <input type="text" id="foo">
+</label>
+<input type="text" id="bar">`;
+markup["correct"] = `<label>
+  <input type="text">
+</label>`;
+
+describe("docs/rules/multiple-labeled-controls.md", () => {
+	it("inline validation: incorrect-multiple", () => {
+		expect.assertions(1);
+		const htmlvalidate = new HtmlValidate({"rules":{"multiple-labeled-controls":"error"}});
+		const report = htmlvalidate.validateString(markup["incorrect-multiple"]);
+		expect(report.results).toMatchSnapshot();
+	});
+	it("inline validation: incorrect-both", () => {
+		expect.assertions(1);
+		const htmlvalidate = new HtmlValidate({"rules":{"multiple-labeled-controls":"error"}});
+		const report = htmlvalidate.validateString(markup["incorrect-both"]);
+		expect(report.results).toMatchSnapshot();
+	});
+	it("inline validation: correct", () => {
+		expect.assertions(1);
+		const htmlvalidate = new HtmlValidate({"rules":{"multiple-labeled-controls":"error"}});
+		const report = htmlvalidate.validateString(markup["correct"]);
+		expect(report.results).toMatchSnapshot();
+	});
+});

docs/rules/__tests__/no-raw-characters.md.spec.ts

@@ -16,7 +16,7 @@ markup["relaxed"] = `<!-- Not ambiguous: & is followed by whitespace -->
 <!-- Not ambiguous: = and " both stops the character reference -->
 <a href="?foo&bar=1&baz"></p>
 
-<!-- Not ambiguous: even unquoted & is understod to be stopped by > -->
+<!-- Not ambiguous: even unquoted & is understood to be stopped by > -->
 <a href=?foo&bar></p>`;
 
 describe("docs/rules/no-raw-characters.md", () => {

docs/rules/__tests__/no-redundant-for.md.spec.ts

+import HtmlValidate from "../../../src/htmlvalidate";
+
+const markup: { [key: string]: string } = {};
+markup["incorrect"] = `<label for="foo">
+  <input type="checkbox" id="foo">
+  My fancy checkbox
+</label>`;
+markup["correct"] = `<!-- without for attribute -->
+<label>
+  <input type="checkbox">
+  My fancy checkbox
+</label>
+
+<!-- without wrapping -->
+<input type="checkbox" id="foo">
+<label for="foo">
+  My fancy checkbox
+</label>`;
+
+describe("docs/rules/no-redundant-for.md", () => {
+	it("inline validation: incorrect", () => {
+		expect.assertions(1);
+		const htmlvalidate = new HtmlValidate({"rules":{"no-redundant-for":"error"}});
+		const report = htmlvalidate.validateString(markup["incorrect"]);
+		expect(report.results).toMatchSnapshot();
+	});
+	it("inline validation: correct", () => {
+		expect.assertions(1);
+		const htmlvalidate = new HtmlValidate({"rules":{"no-redundant-for":"error"}});
+		const report = htmlvalidate.validateString(markup["correct"]);
+		expect(report.results).toMatchSnapshot();
+	});
+});

docs/rules/attribute-boolean-style.md

@@ -7,7 +7,7 @@ summary: Require a specific style for boolean attributes
 
 # Boolean attribute style (`attribute-boolean-style`)
 
-Boolean attributes are attributes without a value and the presence of the attribute is considered a boolean `true` and absense a boolean `false`.
+Boolean attributes are attributes without a value and the presence of the attribute is considered a boolean `true` and absence a boolean `false`.
 The [HTML5 standard][whatwg] allows three styles to write boolean attributes:
 
 - `<input required>` (omitting the value)

docs/rules/index.md

@@ -8,4 +8,4 @@ Rules with <span class="fa fa-check"></span> are enabled by
 Rules with <span class="fa fa-file-text-o"></span> are enabled by
 `html-validate:document`.
 
-Additional presets can be compared in {@link rules/presets preset comparision}.
+Additional presets can be compared in {@link rules/presets preset comparison}.

docs/rules/multiple-labeled-controls.md

+---
+docType: rule
+name: multiple-labeled-controls
+category: a17y
+summary: Disallow labels associated with multiple controls
+---
+
+# Disallow labels associated with multiple controls (`multiple-labeled-controls`)
+
+`<label>` can only be associated with a single control at once.
+It should either wrap a single [labelable][] control or use the `for` attribute to reference the control.
+
+[labelable]: https://html.spec.whatwg.org/multipage/forms.html#category-label
+
+## Rule details
+
+Examples of **incorrect** code for this rule:
+
+<validate name="incorrect-multiple" rules="multiple-labeled-controls">
+  <label>
+    <input type="text">
+    <input type="text">
+  </label>
+</validate>
+
+<validate name="incorrect-both" rules="multiple-labeled-controls">
+  <label for="bar">
+    <input type="text" id="foo">
+  </label>
+  <input type="text" id="bar">
+</validate>
+
+Examples of **correct** code for this rule:
+
+<validate name="correct" rules="multiple-labeled-controls">
+  <label>
+    <input type="text">
+  </label>
+</validate>

docs/rules/no-autoplay.md

@@ -16,7 +16,7 @@ The media might be too loud or the user might be in a location where audio is di
 Users with assistive technology might find it hard to pause as they must first navigate to the controls.
 Media can be distracting for users with cognitive or concentration issues and if the video contains flashing or blinking sequences it can cause epilepsy.
 
-There are also issues where some browsers use heurestics to prevent autoplaying so results may vary when used.
+There are also issues where some browsers use heuristics to prevent autoplaying so results may vary when used.
 
 ## Rule details
 

docs/rules/no-raw-characters.md

@@ -86,7 +86,7 @@ Examples of **correct** code with this option:
     <!-- Not ambiguous: = and " both stops the character reference -->
     <a href="?foo&bar=1&baz"></p>
 
-    <!-- Not ambiguous: even unquoted & is understod to be stopped by > -->
+    <!-- Not ambiguous: even unquoted & is understood to be stopped by > -->
     <a href=?foo&bar></p>
 
 </validate>

docs/rules/no-redundant-for.md

+---
+docType: rule
+name: no-redundant-for
+summary: Disallow usage of redundant label for attributes
+---
+
+# Disallow usage of redundant label for attributes (`no-redundant-for`)
+
+`<label>` can either use the `for` attribute to reference the labelable control or wrap it.
+Doing both is redundant as the label already references the control.
+
+## Rule details
+
+Examples of **incorrect** code for this rule:
+
+<validate name="incorrect" rules="no-redundant-for">
+  <label for="foo">
+    <input type="checkbox" id="foo">
+    My fancy checkbox
+  </label>
+</validate>
+
+Examples of **correct** code for this rule:
+
+<validate name="correct" rules="no-redundant-for">
+  <!-- without for attribute -->
+  <label>
+    <input type="checkbox">
+    My fancy checkbox
+  </label>
+
+  <!-- without wrapping -->
+  <input type="checkbox" id="foo">
+  <label for="foo">
+    My fancy checkbox
+  </label>
+</validate>

docs/rules/presets.md

@@ -37,7 +37,7 @@ Enables rules related to accessibility.
 Most rules but not all enabled rules relates to WCAG compliance.
 On its own it will not validate if the document/template itself is valid but only if accessibility issues can be found.
 
-This preset should be used togeher with `html-validate:standard` to ensure the document structure is valid (a requirement of WCAG) and if possible `html-validate:document` (to ensure references are valid, etc).
+This preset should be used together with `html-validate:standard` to ensure the document structure is valid (a requirement of WCAG) and if possible `html-validate:document` (to ensure references are valid, etc).
 
 ### `html-validate:document`