`no-autofocus` Enhancement: declarative, granular control

[blue-infinex]

I'd like the ability to declare which components should be ignored e.g.

{
    "rules": {
        "jsx-a11y/no-autofocus": [2, {
            "ignoreNonDOM": ["Dialog", "Menu"]
        }],
    }
}

For context, I typically use "react-aria-components" to underpin the library and/or app I'm working on. The behaviour is nuanced and dependent on intent, it should still be respected in most cases:

<TextField autoFocus />
//         The autoFocus prop should not be used, as it can reduce usability
//         and accessibility for users.

[ljharb]

Can you elaborate on why it should be respected in any case?

[blue-infinex]

@ljharb Not sure I follow completely, sorry. The suggested enhancement would be an extension of the existing rule options e.g.

-  ignoreNonDOM: boolean
+  ignoreNonDOM: boolean | string[]

The JSX example was supposed to indicate that values not present in the ignoreNonDOM array should respect the "no-autofocus" rule.

[ljharb]

Ah, I see what you want.

That wouldn't make sense in "ignoreNonDOM" but there could be an additional property, "ignoredComponentNames", that's string[]?

[blue-infinex]

Yeah sure, another property would work just as well.

Though, if that's necessary I've totally misunderstood the intent of the "ignoreNonDOM" option. Could you explain how it differs, or point me in the right direction? This is all I've found so far:

For the ignoreNonDOM option, this determines if developer created components are checked.

[ljharb]

More that the implied semantics are reversed - "ignoreNonDOM": ["Dialog", "Menu"] says to me that the only non-DOM components ignored are those two. Is that what you want? (if so, then your original ask is the right approach)

[blue-infinex]

"ignoreNonDOM": ["Dialog", "Menu"] says to me that the only non-DOM components ignored are those two

Yes, that's the expected behaviour. Other components e.g. TextField using "autoFocus" should still violate the rule.