valueRegex for forbid-dom-props rule

[makxca]

I want to be able to prohibit the usage of certain values of some dom attributes.

In my case I do not want the other developers in my project to use the listbox aria-role because of its accessibility issues. They should use lists of buttons instead.

This should be invalid

<div role="listbox">

But I do not want to completely forbid the usage of the role attribute, so something like this should be valid

<div role="list">

So I want to be able to configure a rule like the following:

{
    "forbid-dom-props": {
        "forbid": [{
            "propName": "role",
            "valueRegex": "^listbox$",
            "message": "Please do not use listbox. You can use list of buttons instead"
        }]
    }
}

[ljharb]

Using a regex is a nonstarter, because regexes in an eslint plugin are a CVE magnet (usually it's best to wait for some discussion before making a PR).

[makxca]

Using a regex is a nonstarter, because regexes in an eslint plugin are a CVE magnet (usually it's best to wait for some discussion before making a PR).

Thank you for the tip!

For my case just listing the prohibited values would work. How do you think, would this work for the plugin?

{
    "forbid-dom-props": {
        "forbid": [{
            "propName": "role",
            "values": ["listbox"],
            "message": "Please do not use listbox. You can use list of buttons instead"
        }]
    }
}

[ljharb]

Yes, that seems like it would work.

That said, I'm not sure what a11y issues you have in mind with listbox?

[makxca]

Most users that come to our site and use screen readers prefer Chromium-based browsers and NVDA as their screen reader. Unfortunately, they cannot interact with listbox elements.

It is a known issue. It seems Chromium marks listbox elements as 'read-only'. It seems to have been fixed by the Chromium team in September 2024 (issue), and there is an example of an accessible listbox on w3.org. But it requires monitoring active descendants (I suppose, using JS-events such as focusIn/focusOut).

So, I believe making an accessible listbox is overkill, whereas one could just use a list of buttons.