`role-suports-aria-props` is not flagging prohibited accessible name usage on generic elements

[khiga8]

I would expect role-suports-aria-props to flag prohibited accessible name usage on generic elements like:

<div aria-label="Some label">
<span aria-label="Some label">
<div aria-labelledby="some-id">
<span aria-labelledby="some-id">

etc.

We see this misuse of accessible name a lot in our projects and we're hoping this is a case we can cover with eslint-plugin-jsx-a11y.

I'd hoped that the latest bump of aria-query in #814 would start flagging these issues, but when I update the tests in tests/src/rules/role-supports-aria-props-test.js on the latest main to include invalid cases like:

    {
      code: '<div aria-label />',
      errors: [errorMessage('aria-label', 'generic', 'div', true)],
    },

it doesn't seem like it's being recognized as invalid.

[jessebeach]

@khiga8 hello Kate! Directionally, you are on to something here. We don't have a rule that prohibits labels on elements or in combination with roles that do not support a label. I wouldn't do that in this rule, because it is specifically concerned with the combination of ARIA Role and ARIA Prop. In your examples, none of the HTML elements have a role. It's true that the <div> element corresponds to the generic role, so a label should be disallowed in this case. But what I think we need here is a new rule altogether.

[jessebeach]

@khiga8 would you like to update this issue to reflect that you're asking for a new rule?

[khiga8]

Hi @jessebeach! I'd noticed in the role-supports-aria-props-test, there are checks for implicit roles and the doc describes the rule as the following:

Enforce that elements with explicit or implicit roles defined contain only aria-* properties supported by that role.

I'm not sure I understand quite why this use case falls outside of this rule. Would you mind elaborating 🙏?

[jessebeach]

Hi @jessebeach! I'd noticed in the role-supports-aria-props-test, there are checks for implicit roles and the doc describes the rule as the following:

Enforce that elements with explicit or implicit roles defined contain only aria-* properties supported by that role.

I'm not sure I understand quite why this use case falls outside of this rule. Would you mind elaborating 🙏?

You're right! Alright, this is the right place for this sort of restriction and I agree with you now that this rule isn't catching all cases. aria-label is marked as prohibited for the generic role: https://github.com/A11yance/aria-query/blob/main/src/etc/roles/literal/genericRole.js#LL12

The best way to approach this is for me to update aria-query with the allowed and prohibited aria props information, then reference that in this rule. I'll put it on the to-do list!

Thank you for being persistent here!

[smockle]

I opened a PR to fix this—reviews and feedback welcomed! Flag aria-label and aria-labelledby on non-interactive elements (jsx-eslint/eslint-plugin-jsx-a11y#911)

[drwpow]

We’ve had similar issues and needed to supplement jsx-a11y with our own rules that catch this. I had some time recently and created html-aria, which extends basic aria-query with the HTML in ARIA normative recommendations that provide more accurate results for applying ARIA roles to HTML. It also handles the the prohibited attributes mentioned in this issue properly. At the moment it‘s in beta, and only supports ARIA 1.3 which would have some minor breaking changes for this library. But @jessebeach in case html-aria would be quicker to solve this than updating aria-query I’d be happy to collaborate / fix any bugs you come across 🙂