[Bug]: Accessibility checker incorrectly identifies aria-description as an invalid attribute

[Giwayume]

Describe the bug

The accessibility checker doesn't recognize the aria-description attribute.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-description

I have verified with NVDA that aria-description works.

To Reproduce

Add aria-description attribute to any HTML element.

System

No response

Additional context

No response

[stilt0n]

I don't think aria-description has always been supported by axe-core. and the a11y addon seems to be using a fairly old version of axe-core. I tried running storybook init in a new create-react-app project and adding aria-description to one of the example components and it seems to be working fine for me (i.e. it's not considered a violation).

But axe-core is also configurable, and you you can pass configuration to the a11y addon's axe-core in preview.ts. So you should be able to get aria-description recognized, in any case, by following the docs and adding the rule yourself in preview.ts. For example:

const preview = {
  parameters: {
    a11y: {
      config: {
        standards: {
          ariaAttrs: {
            'aria-description': {
              global: true,
            }
          }
        }
      }
    },
    // ... rest of config
};

export default preview;

For my setup this seems to be redundant, but I can cause a violation by setting global: false so the config does seem to be working. There's more docs on axe-core configuration here.

Since this is configurable it's possible it's not really a bug. But it depends on the details of your setup and how it is failing.