Skip to content

bug(material/chips): clicking on an editable chip focuses it and does not begin editing but pressing enter begins the editing state #27106

Closed
@zarend

Description

@zarend

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

For editable chips, clicking on the chip and pressing enter do not have the same effect. Click on the chip focuses it and doesn't have any other side effects. To begin editing the chip, the user can either press enter or double click on it. Since htis is a butotn interaciton, I would expect enter and click to perform the action of the button. Since click and enter are not consistent, that means that the editable chip doesn't conform to the ARIA button interaciton pattern.

Double click is generally not available to Screen Readers and Assistive Technology.

Reproduction

Steps to reproduce:

  1. Navigate to "Chips with input" example on https://material.angular.io/components/chips/examples#chips-input
  2. (Demo appears with favorite fruits)
  3. Click on "Lemon"

Expected Behavior

A cursor appears after "Lemon" to indicate that it is in the editing state.

This is expected because that's what pressing enter does.

Actual Behavior

The background of "Lemon" darkens to indicated that it is focused

Environment

  • Angular:
  • CDK/Material:
  • Browser(s):
  • Operating System (e.g. Windows, macOS, Ubuntu):

Metadata

Metadata

Assignees

No one assigned

    Labels

    AccessibilityThis issue is related to accessibility (a11y)P2The issue is important to a large percentage of users, with a workaroundarea: material/chips

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions