htmlhint / HTMLHint

⚙️ The static code analysis tool you need for your HTML
https://htmlhint.com
MIT License
3.09k stars 386 forks source link

input-requires-label should ignore type=hidden fields #866

Closed pdehaan closed 2 years ago

pdehaan commented 2 years ago

Describe the bug I'm using the API to lint some remote pages and saw this error/warning message in my local logfile:

    {
      "type": "warning",
      "message": "No matching [ label ] tag found.",
      "raw": "<input type=\"hidden\" name=\"scannedEmailId\" value=\"\">",
      "evidence": "              <input type=\"hidden\" name=\"scannedEmailId\" value=\"\">",
      "line": 122,
      "col": 21,
      "rule": {
        "id": "input-requires-label",
        "description": "All [ input ] tags must have a corresponding [ label ] tag. ",
        "link": "https://github.com/thedaviddias/HTMLHint/wiki/input-requires-label"
      }
    },

But I don't think the rule should be displaying that warning for type=hidden fields since that doesn't entirely make sense.

<input type="hidden" name="scannedEmailId" value="">

<!--
      "rule": {
        "id": "input-requires-label",
        "description": "All [ input ] tags must have a corresponding [ label ] tag. ",
        "link": "https://github.com/thedaviddias/HTMLHint/wiki/input-requires-label"
      }
-->

To Reproduce

// index.mjs
import fs from "node:fs/promises";

import axios from "axios";
import {HTMLHint} from "htmlhint";

const allRules = await fs.readFile("./.htmlhintrc").then(res => JSON.parse(res));

// NOTE: My attempt at scraping+filtering all the undocumented rules.
// const DISABLED_RULES = [
//   "attr-sorted",
//   "attr-value-not-empty",
//   "attr-value-single-quotes",
//   "attr-whitespace",
//   "empty-tag-not-self-closed",
//   "head-script-disabled",
//   "href-abs-or-rel",
//   "script-disabled",
//   "space-tab-mixed-disabled",
//   "tag-self-close",
//   "tags-check",
// ];
// 
// const allRules = Object.keys(HTMLHint.rules).reduce((obj={}, name="") => {
//   obj[name] = !DISABLED_RULES.includes(name);
//   return obj;
// }, {});

await getPage("https://monitor.firefox.com/");
await getPage("https://monitor.firefox.com/breaches/");
await getPage("https://monitor.firefox.com/breach-details/linkedin/");

async function getPage(url) {
  const { data: html } = await axios.get(url);
  const res = HTMLHint.verify(html, allRules || HTMLHint.defaultRuleset);
  console.log(JSON.stringify({
    url,
    results: res
  }, null, 2));
}

And my .htmlhintrc file looks like this:

{
    "alt-require": true,
    "attr-lowercase": true,
    "attr-no-duplication": true,
    "attr-no-unnecessary-whitespace": true,
    "attr-sorted": false,
    "attr-unsafe-chars": true,
    "attr-value-double-quotes": true,
    "attr-value-not-empty": false,
    "attr-value-single-quotes": false,
    "attr-whitespace": false,
    "doctype-first": true,
    "doctype-html5": true,
    "empty-tag-not-self-closed": false,
    "head-script-disabled": false,
    "href-abs-or-rel": false,
    "html-lang-require": true,
    "id-class-ad-disabled": true,
    "id-class-value": true,
    "id-unique": true,
    "inline-script-disabled": true,
    "inline-style-disabled": true,
    "input-requires-label": true,
    "script-disabled": false,
    "space-tab-mixed-disabled": false,
    "spec-char-escape": true,
    "src-not-empty": true,
    "style-disabled": true,
    "tag-pair": true,
    "tag-self-close": false,
    "tagname-lowercase": true,
    "tagname-specialchars": true,
    "tags-check": false,
    "title-require": true
}

Expected behavior <input type="hidden"> fields shouldn't display a warning if there isn't an associated <label>.

Screenshots n/a

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

thedaviddias commented 2 years ago

:tada: This issue has been resolved in version 1.1.2 :tada:

The release is available on:

Your semantic-release bot :package::rocket: