luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Add all tooltips to the default tabbing order in the page (#9888) 

* ui: Add all tooltips to the default tabbing order in the page

This amends our tooltip modifier to automatically add a tabindex="0" to
all of our tooltips (if they aren't tabbable already).

This means that all tooltips will automatically be
added to the natural tab order of the page. I'm pretty sure we don't
currently require the ability to disable this automatic functionality
but if we do at some point in the future we can add an option to disable
it, meaning all tooltips will be tabbable by default.
This commit is contained in:
John Cowen 2021-03-18 14:35:50 +00:00 committed by GitHub
parent 8ac9f2521b
commit e09b9a2891
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/packages/consul-ui/app/modifiers/tooltip.js
View File

@ -46,6 +46,11 @@ export default modifier(($element, [content], hash = {}) => {
}
}
let $trigger = $anchor;
let needsTabIndex = false;
if (!$trigger.hasAttribute('tabindex')) {
needsTabIndex = true;
$trigger.setAttribute('tabindex', '0');
}
const tooltip = tippy($anchor, {
theme: 'tooltip',
triggerTarget: $trigger,
@ -59,6 +64,9 @@ export default modifier(($element, [content], hash = {}) => {
});
return () => {
if (needsTabIndex) {
$trigger.removeAttribute('tabindex');
}
clearInterval(interval);
tooltip.destroy();
};

4
ui/packages/consul-ui/app/modifiers/tooltip.mdx
View File

@ -1,6 +1,6 @@
# tooltip
Our tooltip modifier is a thin wrapper around the excellent `tippy.js`. The
Consul UIs tooltip modifier is a thin wrapper around the excellent `tippy.js`. The
most common usage will be something like the below:
```hbs preview-template
@ -11,6 +11,8 @@ most common usage will be something like the below:
</span>
```
A `tabindex=0` is automatically added to the element that triggers the tooltip if it doesn't have one already to make sure the tooltip is in the natural tabbing order of the document.
An additional options hash can be passed into the tooltip the contents of
which are passed along to `tippy.js` [so all of the `tippy.js`
props](https://atomiks.github.io/tippyjs/v5/all-props/) can be used to control