-
Notifications
You must be signed in to change notification settings - Fork 124
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
Make pop-ups accessible #1833
Make pop-ups accessible #1833
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Using the tab key to navigate the page should cause pop-ups to be displayed when they are in focus (i.e., when they are tabbed over)
Tested on the preview here and worked 👍
For this part:
Name | Type | Default | Description
---- | ---- | ------- | ------
trigger |String
|hover focus
| How the overlay view is triggered.
Supports:click
,focus
,hover
.
We say in the description that it supports 'click', 'focus', 'hover', but the value we use is 'hover focus', which is not part of the above. Seems a bit confusing?
@tlylt That's true, thanks for the catch! I've changed it to:
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @jovyntls
LGTM 👍
It looks good! I'm wondering if these accessibility improvements can also be applied to modals. On this page, I can't seem to activate the modals by focusing on them with the keyboard. |
It looks like the case for modals might be a bit tricky. When a modal is opened through One way to circumvent this could be to manually return the focus by adding a non-visible dummy element after the trigger for modals? I'm not sure if this will have any implications though |
I think we can open this up as an issue and move the discussion there. This can be done in a separate PR since the solution may be complex/take some time. |
According to the bootstrap-vue docs, the default value of `hover` for popups is impossible to trigger for keyboard users, resulting in accessibility issues. Let's use `hover focus` as the default value, as this provides an additional and unobtrusive way of displaying pop-up contents.
What is the purpose of this pull request?
Fixes #1745
Overview of changes:
Change the default trigger from
hover
tohover focus
hover
is impossible to trigger for keyboard usersAnything you'd like to highlight / discuss:
N/A
Testing instructions:
Using the tab key to navigate the page should cause pop-ups to be displayed when they are in focus (i.e., when they are tabbed over)
Proposed commit message: (wrap lines at 72 characters)
Checklist: ☑️