Skip to content

Popover: focusOnMount shouldn't be specific to keyboard interaction #5559

@afercia

Description

@afercia

Many users are not exclusively "mouse users" or "keyboard users". Actually, many users make a mixed use of mouse and keyboard. Implementing software features that work just with mouse or keyboard interaction, is often just an assumption.

In the Popover component there's some code intentionally used to move focus to the Popover only when a keyboard is used.

This seems to me a big assumption, as focus should always be moved to the Popover regardless of the device used. Anecdotally, I personally often make a mixed use of mouse and keyboard, as that's the fastest way to interact with an interface for me. I'm pretty sure I'm not the only one.

So what happens with the Popover? Let's consider one of the Popover implementations: the more options menu. When using the mouse (screenshot on the left) focus is not moved to the Popover. Instead, when using a keyboard (screenshot on the right) focus is moved to the Popover:

mouse and keyboard

This doesn't allow mixed use of mouse and keyboard: for example, users might want to click to open the menu and then quickly use the Tab key to select a menu item. Users often find unexpected ways to interact with an UI, an the UI shouldn't make any assumption on the expected behaviors.

I don't see a good reason for this distinction between mouse and keyboard interaction other than the will to not display the focus style on the first item. If this is the case, I'd like to remind everyone the focus style is a native accessibility feature that should always work for all users, regardless of the device they use.

From a technical perspective, removing this different behavior would also help in reducing the number of keyboard events used in Gutenberg, which have recently come to a point where they seem rather convoluted and fragile. /cc @aduth

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).

    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