Safari - focus-visible states not shown after mouse interactions (until focus leaves/reenters the table)

[fredvisser]

🐛 Bug Report

Keyboard focus not shown correctly on nimble-table after mouse interaction.

💻 Repro or Code Sample

In Safari:
https://nimble.ni.dev/storybook/index.html?path=/story/components-table--table&args=data:LargeDataSet

1. Select a single row with the mouse
2. Press 'up-arrow'

🤔 Expected Behavior

The row above your selection has the keyboard row selection state

😯 Current Behavior

There is no visible keyboard row focus state. The Tab key will move the action menu on the above row, but the focus states are all missing.
Image

💁 Possible Solution

Malcolm previously investigated and noted:

• Straightforward to tweak focus styles for nimble-table-row / nimble-table-cell to show up in this case (example: :focus-visible =>[tabindex="0"]:focus).
• Just changing :focus-visible to :focus isn't a general-purpose solution because it appears to take effect at multiple levels (i.e. row + cell + action menu button, even when not using :focus-within, I was seeing similar behavior to that).
• Above style tweak works for rows/cells, but not action menu button / anchors / etc, because those have their own focus-visible styling (which may be on a subpart of the control). If we applied those styles, they'd take effect in conjunction with the existing control focus-visible styles (and we don't want both)
• Also explored other workarounds like focusing a hidden textbox before what we wanted to focus, setting contentEditable to true just before focusing, etc. Worked in some cases (again, for the row/cell usually, but not menu button/anchor), and probably too hacky to actually go with anyway.

Filed WebCompat issue: https://webcompat.com/issues/138911