Make pop-ups accessible

[jovyntls]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• Others, please explain:

Fixes #1745

Overview of changes:
Change the default trigger from hover to hover focus

• bootstrap-vue documentation mentions that hover is impossible to trigger for keyboard users

Anything 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)

Improve accessibility of pop-ups

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.

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

[tlylt]

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?

[jovyntls]

@tlylt That's true, thanks for the catch! I've changed it to:

Supports: click, focus, hover, or any space-separated combination of these.

[jonahtanjz]

Thanks @jovyntls

LGTM 👍

[kaixin-hc]

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.

[jovyntls]

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 focus, the focus moves away from the trigger. When the modal is closed, the focus automatically returns to the trigger, which makes makes the modal open again, which results in being unable to ever close the modal once it has been opened using focus, a bit like an infinite loop. (Popovers and tooltips don't have this problem because the focus remains on the popover/tooltip even after it is activated.)

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

[jonahtanjz]

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.