From e09b9a289158f75333b5f23fc5d71cbbf7d6c79e Mon Sep 17 00:00:00 2001 From: John Cowen Date: Thu, 18 Mar 2021 14:35:50 +0000 Subject: [PATCH] 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. --- ui/packages/consul-ui/app/modifiers/tooltip.js | 8 ++++++++ ui/packages/consul-ui/app/modifiers/tooltip.mdx | 4 +++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/ui/packages/consul-ui/app/modifiers/tooltip.js b/ui/packages/consul-ui/app/modifiers/tooltip.js index af29d2eb0..cefa8435e 100644 --- a/ui/packages/consul-ui/app/modifiers/tooltip.js +++ b/ui/packages/consul-ui/app/modifiers/tooltip.js @@ -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(); }; diff --git a/ui/packages/consul-ui/app/modifiers/tooltip.mdx b/ui/packages/consul-ui/app/modifiers/tooltip.mdx index dde6a6f99..57f6463b9 100644 --- a/ui/packages/consul-ui/app/modifiers/tooltip.mdx +++ b/ui/packages/consul-ui/app/modifiers/tooltip.mdx @@ -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: ``` +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