Search element should support aria-label

Running the validator against a <search> element with an aria-label gives an error that it cannot be used here (aria-label-misuse).

However <search> has a landmark role and should support aria-label.

Reference: the MDN docs for the search element.

The <search> element defines a search landmark.

Reference: W3C

If a page includes more than one search landmark, each should have a unique label.

Reference: W3C Aria docs

Reduced test-case

<search aria-label="Site-wide"></search>

Configuration

// .htmlValidate.mjs
import { defineConfig } from "html-validate";

export default defineConfig({
  extends: ["html-validate:recommended"],
  rules: {
    // PrismJS for some reason doesn't encode ">" (although it does encode "<")
    "no-raw-characters": "off",
    // Prettier currently uses self-closing tags (<img />) instead of void elements (<img>)
    "void-style": "off",
    "no-inline-style": "warn",
  },
});

Expected result

There is no error shown.

Actual result

/roux/_site/examples/search/basic.html
  22:9  error  "aria-label" is strictly allowed but is not recommended to be used on this element  aria-label-misuse

Version

  • html-validate: 10.13.1