Skip to content

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

@andrew-goldstein

Description

@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:

select_action_cell

  1. Press Enter to display the actions popover

  2. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions