accessibility issue with b-dropdown-item-button and v-b-modal.id-of-modal

[rgeerts]

Describe the bug

When I try to trigger a modal to open from a drop down button. The role of the associated li element is changed to "button."

Steps to reproduce the bug

1. Go to [...]
2. Click on [...]
3. Scroll down to [...]
4. See error

Expected behavior

I am using an accessibility testing utility called axe to test for accessibility violations and it is saying that this is not allowed. Presumably because the child of a ul should be an li. The normal dropdown-item-button role is "presentation". Axe does not complain about this, but I would seem to think the li would not need a role at all? Or the role would be "listitem"?? The "presentation" role is a bit of a mystery to me yet admittedly so can't say this makes a lot of sense either?

Versions

Libraries:

• BootstrapVue: 2.0.2
• Bootstrap: 4.3.1
• Vue: 2.6.10

Environment:

• Device: all
• OS: all
• Browser: all
• Version: all

Demo link

https://codepen.io/geertsrj/pen/eYOxJGN

Additional context

no additional context

[tmorehouse]

@rgeerts The directive gets placed onto the root element of what ever you place it on. In this case menu items are wrapped in <li> elements. If the root element is not an interactive HTML tag (i.e. button or link) it will add the role="button" to it and instantiate the appropriate event handlers to make it act like a button.

Your best bet would be to use a @click handler on the menu item button, and call this.$bvModal.show('modal-id')

    <b-dropdown-item-button @click="$bvModal.show('modal-1')">
      First item
    </b-dropdown-item-button>

See this fiddle: https://codepen.io/tmorehouse/pen/MWgLyKj

[tmorehouse]

We may want to add in an example of this in the docs (and the reasoning why)

[tmorehouse]

PR #4187 will address the original issue, and check to see if the directive is applied to a dropdown item or nav item, and if so, will apply itself to the inner link or button instead of the wrapper <li> element

[tmorehouse]

BootstrapVue v2.0.3 has been released, which will correctly handle this scenario automagically