Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
rgeerts opened this issue Sep 23, 2019 · 4 comments · Fixed by #4187 or mariazevedo88/hash-generator-js#14 · May be fixed by bermudez/mynuxtjs#1 or mariazevedo88/hash-generator-js#15

Comments

@rgeerts
Copy link

commented Sep 23, 2019

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

This comment has been minimized.

Copy link
Member

commented Sep 23, 2019

@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

This comment has been minimized.

Copy link
Member

commented Sep 23, 2019

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

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Oct 3, 2019

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 added a commit that referenced this issue Oct 3, 2019
…v items (fixes #4149) (#4187)
@tmorehouse

This comment has been minimized.

Copy link
Member

commented Oct 6, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.