Skip to content

b-dropdown-header is producing accessibility error in the AXE browser plugin #6273

@sudo-may

Description

@sudo-may

Describe the bug

In the dropdown component when using b-dropdown-header the role attribute for that header is producing accessibility error in the AXE browser plugin.

Here is a snapshot of AXE plugin when running it against the code found in https://codesandbox.io/s/wizardly-proskuriakova-1qprq?file=/src/components/VueBComponent.vue

image

My best understanding is that AXE suggests that the role is redundant to the implicit meaning of the header tag. Perhaps a solution could be to simply remove the role element from the header tag?

Steps to reproduce the bug

  1. Install AXE Browser plugin; supports FF, Chrome and Edge
  2. Navigate to code CodeSandbox example taken from this of Headers and accessibility section of Bootstrap-vue dropdown component
  3. Click on "Open in a new Window" Icon
    image on top right
  4. Open Dev tools, click on AXE tab and Analyze
  5. Look for ARIA role must be appropriate for the element accessibility error

Expected behavior

Do not generate role element from the header tag

Versions

Libraries:

  • BootstrapVue: 2.21.1
  • Bootstrap: 4.5.3
  • Vue: 2.6.11

Environment:

  • Browser: Chrome, FF

Demo link

https://codesandbox.io/s/wizardly-proskuriakova-1qprq?file=/src/components/VueBComponent.vue

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions