Eslint-plugin-jsx-a11y: Implement global settings

[evcohen]

Discussed in #65. We can provide global settings API for users to specify mappings from low-level DOM elements to their associated wrapper component. This allows us to better apply the ruleset over a codebase. It can also have configuration options for ARIA convention for props (i.e. camel-casing like ariaExpanded or just expanded) that map to respective ARIA properties. Also contains a special property for role since that sometimes has conflicts (as seen in #166).

Can look something like this:

{
    "settings": {
        "components": {
            "a": ["Link"],
            "abbr": [],
            "address": [],
            "area": [],
            "article": [],
            "aside": [],
            "audio": [],
            "b": [],
            "base": [],
            "bdi": [],
            "bdo": [],
            "big": [],
            "blockquote": [],
            "body": [],
            "br": [],
            "button": ["Button"],
            "canvas": [],
            "caption": [],
            "cite": [],
            "code": [],
            "col": [],
            "colgroup": [],
            "data": [],
            "datalist": [],
            "dd": [],
            "del": [],
            "details": [],
            "dfn": [],
            "dialog": [],
            "div": [],
            "dl": [],
            "dt": [],
            "em": [],
            "embed": [],
            "fieldset": [],
            "figcaption": [],
            "figure": [],
            "footer": ["Footer"],
            "form": [],
            "h1": [],
            "h2": [],
            "h3": [],
            "h4": [],
            "h5": [],
            "h6": [],
            "head": [],
            "header": ["Header"],
            "hgroup": [],
            "hr": [],
            "html": [],
            "i": [],
            "iframe": [],
            "img": ["Image"],
            "input": ["Input"],
            "ins": [],
            "kbd": [],
            "keygen": [],
            "label": ["Label"],
            "legend": [],
            "li": [],
            "link": [],
            "main": [],
            "map": [],
            "mark": [],
            "menu": [],
            "menuitem": [],
            "meta": [],
            "meter": [],
            "nav": [],
            "noscript": [],
            "object": [],
            "ol": [],
            "optgroup": [],
            "option": [],
            "output": [],
            "p": [],
            "param": [],
            "picture": [],
            "pre": [],
            "progress": [],
            "q": [],
            "rp": [],
            "rt": [],
            "ruby": [],
            "s": [],
            "samp": [],
            "script": [],
            "section": [],
            "select": [],
            "small": [],
            "source": [],
            "span": [],
            "strong": [],
            "style": [],
            "sub": [],
            "summary": [],
            "sup": [],
            "table": [],
            "tbody": [],
            "td": [],
            "textarea": [],
            "tfoot": [],
            "th": [],
            "thead": [],
            "time": [],
            "title": [],
            "tr": [],
            "track": [],
            "u": [],
            "ul": [],
            "var": [],
            "video": [],
            "wbr": []
        },
        "props": {
            "aria": "kebab",
            "role": "ariaRole"
        }
    }
}

[jessebeach]

hoohoo! Are you thinking that we could map custom components to html elements? like

"button": ['AbstractButton', 'FancyButton', 'PopoverButton']

[ljharb]

I’d still find value in this, fwiw.

[eps1lon]

@evcohen Was this abandoned? I see that you closed this with without referencing any commit, PR or other explanation.

[karltaylor]

This would really help when using jsx-a11y with styled-components. I hope this can be re-opened and looked at!

[jessebeach]

@karltaylor code examples would really help frame the enhancement. Could you post a few here?

[gabeodess]

Would love to see this working. Currently having trouble with jsx-a11y/label-has-for:

<label htmlFor={id}>
  <Checkbox id={id}/> Click Me!
</label>

Could be solved by:

settings:
  components:
    input: ["Checkbox"]

[ljharb]

Considering this was closed without explanation, and I'd still like to see it happen, I'm going to reopen - @evcohen please feel free to re-close, but it'd be great to understand why :-)

[talentlessguy]

any progress on this?

[madalynrose]

Any updates on this?

I really love this tool and recommend it everywhere I can. Establishing an API for mapping custom components and attributes to their equivalent semantic element would add a lot of power. I'd love a way to lint Gatsby's components (e.g.<Link/>, which expects a to attribute instead of an href). This is also especially useful for styled components, which are becoming increasingly popular with usage in frameworks like Gatsby. The discussion around explicit mapping in #466 touches on a specific use case for this feature and I hope it gets picked back up.

[heylookltsme]

Bump! Our company would love this for usage with styled components.

It looks like individual rules support a mapping of the HTML element to custom components, but maintaining those maps on a per-rule basis is prohibitively tedious and difficult to scale/maintain.

The solution proposed here - a global mapping of elements to components - would be fantastic. 🎉

[eps1lon]

I'd love a way to lint Gatsby's components (e.g., which expects a to attribute instead of an href).

This is a really good point. Any implementation should not only consider element mappings but also attribute mappings for custom props (per component) as well as disabling certain rules. Certain required aria attributes might be already set for custom components.