palantir / blueprint

A React-based UI toolkit for the web
https://blueprintjs.com/
Apache License 2.0
20.75k stars 2.18k forks source link

Tooltip2+Button selection tabindex issue #4521

Closed dlech closed 3 years ago

dlech commented 3 years ago

Follow up to #4502

Environment

Code Sandbox

Link to a minimal repro (fork this code sandbox): https://codesandbox.io/s/blueprint-sandbox-forked-146cf?file=/src/CoreExample.tsx

Steps to reproduce

  1. click on a blank part of the browser
  2. press tab on the keyboard to focus the buttons
  3. notice that the selection indicator is rendered behind the buttons instead of in front
  4. try pressing spacebar to activate the button

Actual behavior

The selection indicator is behind the neighboring buttons. Also, the highlight looks different from the normal button highlight like it is selecting the tooltip rather than the button. And more importantly, the button can't be activated with the keyboard by pressing space.

image

Expected behavior

The UI should show the normal button selection highlight instead and should respond to keyboard activation.

image

Possible solution

seve commented 3 years ago

Comparing the DOM between Popover1 and 2, it looks like the tabindex is attributed to the wrong element:

image (2) image (3)