Tippyjs: Nested tooltip demo on docs is not keyboard/AT accessible

Created on 6 Aug 2019  路  3Comments  路  Source: atomiks/tippyjs

Bug description

With nested tooltips https://atomiks.github.io/tippyjs/#nesting it's not possible to reach the controls inside the first tooltip with the keyboard. And as a result, this also makes the approach not AT operable. I'd strongly recommend against placing interactive controls inside tooltips, unless they are coded more as disclosure widgets or mini dialogs (where after triggering, focus is moved into the mini dialog)

Reproduction

Try using https://atomiks.github.io/tippyjs/#nesting with a keyboard.

馃悰 bug 馃搫 docs

Most helpful comment

I was wondering if you had any good ideas about making an interactive tippy accessible by default? Is it possible for a library to do reliably?

I feel like it needs to be left up to the developer. Doing it "automatically" is problematic, esp. when it comes to which node to append the tooltip to, clipping issues, focus management, etc.

All 3 comments

i see from deeper in the docs that this is partially addressed here https://atomiks.github.io/tippyjs/accessibility/#creating-accessible-interactive-tooltips

i'd suggest providing a live example that is actually accessible, in that case, and to discourage inaccessible use by showing an inaccessible demo.

I was wondering if you had any good ideas about making an interactive tippy accessible by default? Is it possible for a library to do reliably?

I feel like it needs to be left up to the developer. Doing it "automatically" is problematic, esp. when it comes to which node to append the tooltip to, clipping issues, focus management, etc.

Fixed in 5.0

Was this page helpful?
0 / 5 - 0 ratings