devtools icon indicating copy to clipboard operation
devtools copied to clipboard

accessibility / aria issue in vue devtools button

Open wbolster opened this issue 5 months ago • 0 comments

when using axe devtools via its chrome browser extension to check for accessibility issues on a page, there is a complaint about the vue devtools:

Issues: 1 Ensure ARIA attributes are not prohibited for an element's role https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=AxeChrome

Element Location: .vue-devtools__anchor-btn

<div data-v-640ec535="" class="vue-devtools__anchor-btn panel-entry-btn" title="Toggle Vue DevTools" aria-label="Toggle devtools panel" style="filter: saturate(0);"

To solve this problem, you need to fix the following:

aria-label attribute cannot be used on a div with no valid role attribute.

screenshot:

Image

wbolster avatar Jul 08 '25 15:07 wbolster