jsx-eslint/eslint-plugin-jsx-a11y

aria-label should not be required when role="heading"

lifeiscontent opened this issue · 3 comments

lb- commented

I have confirmed that aria-label is not required when using role="heading". See https://www.w3.org/TR/wai-aria/#heading

heading role
A heading for a section of the page.

To ensure elements with a role of heading are organized into a logical outline, authors MUST use the aria-level attribute to indicate the proper nesting level.

However, I am unable to reproduce the linting issue as described. This code below correctly produces no warning.

/* eslint
  "jsx-a11y/role-has-required-aria-props": "warn",
*/

const Heading = () => (
  <div role="heading" aria-level={3}>
    Vite + React
  </div>
);

export default Heading;

Nonetheless I will prepare a PR that includes validity testing for this scenario.

  • 👍1
lb- commented

We can probably close this issue now. PR with reinforcement tests have been added.

ljharb commented

Closed by #1022.