devtools
devtools copied to clipboard
accessibility / aria issue in vue devtools button
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-labelattribute cannot be used on adivwith no validroleattribute.
screenshot: