Skip to content

Listbox keyboard interaction model — a way to get the old behavior? #1484

Open

Description

@LeaVerou

appearance: base-select currently changes the keyboard interaction model completely:

Old listbox New listbox
Arrow keys (up/down) Move selected option Move focus
Enter or Space Nothing Check/uncheck selected option

Testcase: https://codepen.io/leaverou/pen/ogBPMye

It appears this came out of the changes proposed in #113 and is by design.

I think this is generally a better default, though it does worry me that having so different behavior between a styled and an unstyled listbox could be confusing for sighted keyboard users.

But there is no way to get the old behavior back! While this is a better default, the old behavior did have some things going for it for certain use cases:

  • It is now not possible to create a non-nullable listbox (without scripting). There are cases where an empty value is truly not meaningful.
  • This requires an extra keystroke per selection

I wonder if it would make sense to introduce a CSS property or HTML attribute to control this. As a bonus, this could allow folks to adopt the new behavior on auto select too!

Related:

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions