[EuiContextMenu] tab key doesn't cycle through context menu items in Safari

[andrew-goldstein]

EuiDataGrid popovers don't appear to own keyboard focus in Safari, which prevents item selection via keyboard

EuiDataGrid popovers in EUI version v54.0.0 don't appear to own keyboard focus in Safari 15.4, which prevents item selection via keyboard

✅ Chrome 100.0.4896.75 behaves as-expected
✅ Firefox 99.0 behaves as-expected

To reproduce:

1. Navigate to the Data grid documentation page: https://elastic.github.io/eui/#/tabular-content/data-grid

2. Using the keyboard, navigate to any ... button in the Actions column to select it, per the screenshot below:

3. Press Enter to display the actions popover

4. Press the Tab key at least three times while the popover is open

Expected result

• The popover continues to own keyboard focus, such that pressing Tab enables item selection, per the video using Chrome 100.0.4896.75 below:

chrome_owns_focus.mov

Actual results

Per the video using Safari 15.4 below:

• The popover appears to loose keyboard focus after the first time Tab is pressed
• A border is displayed around the popover
• Pressing Tab no longer cycles through items in the popover, preventing item selection via keyboard

safari_popover_focus.mov

[chandlerprall]

Thanks for finding & reporting!

I can reproduce this in the context menu examples, not unique to the data grid example. I've renamed the issue to better reflect the buggy interaction.

[cee-chen]

For even more fun times, Caroline and I are on Big Sur Safari v15.3 and are tabbing through https://elastic.github.io/eui/#/tabular-content/data-grid and the main ContextMenu examples just fine. It looks like Greg and Chandler are experiencing this buggy behavior though. It's unclear what the differences are between our setups that would lead to this discrepancy.

Screencap of working Safari behavior:

[chandlerprall]

There's a Safari preference,

Which modifies this behavior (I thought this only impacted links, I'm now not sure what Safari's heuristic here is). Turning that option on, I can tab between the menu items. As this is a difference in browser behaviour, and especially as tabbing between items goes against the WAI guidelines (#5737), I'm gonna drop the urgent label to allow discussion, but I'd lean toward closing this as a Won't Fix/Works as Intended.

[cee-chen]

Ahah!! Yes, that's it, I had that checked - thank you Chandler. Do we know if that gets checked by default for Safari?

[chandlerprall]

Do we know if that gets checked by default for Safari?

I have never toggled it before today, and it was unchecked on my machine.

[cchaos]

I think it's off by default in Mac, I kinda remember turning it on back in the day. But I don't think it gets reset with any browser or OS update. Honestly, I think it's a terrible a11y misstep by Apple. But totally not our fault 😸

@andrew-goldstein Can you confirm if you can even tab to any other portion of the UI?

[andrew-goldstein]

I think it's off by default in Mac, I kinda remember turning it on back in the day. But I don't think it gets reset with any browser or OS update. Honestly, I think it's a terrible a11y misstep by Apple. But totally not our fault 😸

@andrew-goldstein Can you confirm if you can even tab to any other portion of the UI?

The Press Tab to highlight each item on a webpage setting was unchecked / off by default of my Mac

• This Mac was somewhat-recently shipped directly from Apple with a clean install of Monterey
• The OS has been updated to the latest stable version of Monterey, 12.3.1
• I don't recall changing that setting (on this Mac)

Observations:

• When Press Tab to highlight each item on a webpage is unchecked / off, (which appears to be the default on this Mac), pressing Tab repeatedly doesn't navigate to other part of the page, and doesn't highlight items within the context menu
  • I was wondering if items in the context menu were being selected with hidden highlighting, but combinations of pressing Tab and Enter while in the unexpected state does NOT trigger any action
• When Press Tab to highlight each item on a webpage is checked / on, the context menu behavior is consistent with Chrome and Firefox

[cee-chen]

I guess my question here is whether this is considered intended behavior under Safari settings? (I would assume that Safari users that primarily use the keyboard for navigation would have this setting turned on.)

If so, should we leave this as-is?

[chandlerprall]

If so, should we leave this as-is?

Looks that way, we'd be overriding built-in browser behaviour that likely contradicts user expectations, echoing Caroline:

I think it's off by default in Mac, I kinda remember turning it on back in the day. But I don't think it gets reset with any browser or OS update. Honestly, I think it's a terrible a11y misstep by Apple. But totally not our fault 😸

Closing as Works as Expected