search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.78k stars 6.95k forks source link

[Bug Report][2.6.7] Expansion Panel uses `aria-expanded` attribute on a div #15514

Closed marjev closed 1 year ago

marjev commented 2 years ago

Environment

Vuetify Version: 2.6.7 Vue Version: 2.7.7 Browsers: Chrome 103.0.0.0 OS: Mac OS 10.15.7

Steps to reproduce

  1. Install a tool similar to Axe DevTools. Alternatively, add a Vuetify expansion panel into a Storybook story and install the Accessibility addon.
  2. Screen a page that includes an Expansion panel.

Expected Behavior

a11y screening shouldn't fail on the following criteria. The button should be the element that has aria-expanded attribute.

Actual Behavior

Div element wrapping an expansion panel (div with the v-expansion-panel class on it) has aria-expanded attribute attached to it.

Reproduction Link

https://codepen.io/marjev/pen/MWVvRmm

Other comments

See this Vanilla JS example which demonstrates HTML which doesn't fail this screening.

Harm-Nullix commented 1 year ago

This is also the case in the NEXT.vuetify: image

    "axe-core": "4.6.3"
    "vuetify": "3.1.4"