Create a lint rule that restricts aria-label or aria-labelledby usage based on tag

[khiga8]

We should never allow aria-label or aria-labelledby on roles that do not support it. I've noticed instances of <Text aria-label> and <Box aria-label> in the codebase, which should be flagged.

I think we could flag inappropriate aria-label misuse based on what the as is set as, the role, and the default tag for the component.

Examples of what should be flagged:

<Heading aria-label="Some text">
<Box as="p" aria-label="Some text">
<Text aria-labelledby="some-id">

eslint-plugin-jsx-a11y has limited support for linting (polymorphic) components so unfortunately we aren't getting the a11y linting we need. We could get around this with a custom rule in this plugin.

[khiga8]

I left a comment in #epic-maturing-accessibility-linting-tooling so please hold off. We might be able to take care of this with an existing rule and changes to eslint-plugin-github.

[khiga8]

This should be taken care of with the latest [eslint-plugin-github v4.9.0] which includes the rule a11y-role-supports-aria-props and added support for determining the element based off the asprop.

I am closing this, but we can re-open it if we notice otherwise. cc: @TylerJDev