Modify Elements Covered by noRedundantRoles

[theAdhocracy]

The current list of elements covered by noRedundantRoles breaks some common accessibility patterns.

The primary one that we run into a lot is <ul role="list"> and <ol role="list">. Whilst these are strictly redundant roles, if list-style is modified then some browsers (typically WebKit/Safari) remove the semantics automatically. That can be desirable in certain contexts, but in others problematic, and so it is common to reinstate role="list" on list elements.

See: https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html for a good write up of the issue.

Similarly, other CSS rules can strip semantics in specific contexts, and sometimes these need to be reinstated. Whilst rarer, some codebases end up relying on those tricks.

It would be very useful to have a way to override the rule on a per-project basis, or remove specific elements like <ol> and <ul>. We'd like to keep noRedundantRoles enabled, as we do find developers still using outdated patterns, but further control would be useful.

I'm thinking of something akin to:

{
  "linter": {
    "rules": {
      "a11y": {
        "noRedundantRoles": {
          "level": "error",
          "options": {
            "ignoreElements": ["ul", "ol"]
          }
        }
      }
    }
  }
}

[andrilla-francis]

Completely agree. I feel like this is a very important distinction. I don't love having to disable this rule on all of my projects, but Tailwind CSS removes list styles by default (with good reason).