Skip to content

bug(MatChipSet): several chipset issues: clickable area, unselect, keyboard access #26590

Closed
@scottg521

Description

@scottg521

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

See Stackblitz https://stackblitz.com/edit/angular-mcc788-qy9gcq?file=src/app/chips-overview-example.html

In this example:

  • if you click on the words or the checkmark, you get the event, but if you click on a part of the chip without text, you do not
  • if you click on the currently selected chip, it will deselect (so nothing is selected) which doesn't seem right for a radio-button-style chip set
  • using the keyboard, you can arrow up and down in the list and select with space or enter 👍, also you can tab out of the chip set and you can shift-tab to back into the chipset 👍, but you can't shift-tab to back out of it 👎 .

Reproduction

https://stackblitz.com/edit/angular-mcc788-qy9gcq?file=src/app/chips-overview-example.html

Steps to reproduce:

  1. click on words, and see selection
  2. click on chip but not on words, no selection
  3. click the words of the selected chip, deselected (and nothing selected)
  4. use keyboard arrows to move within chip set
  5. use tab to go to link after chipset
  6. use shift-tab to go back to chipset
  7. shift-tab will not go to link before chipset (or anywhere out of the chipset)

Expected Behavior

  • click anywhere on chip to select
  • prevented from deselecting selected chip (not sure what 'required' means but it doesn't help)
  • able to tab in and out of chipset in either direction

Actual Behavior

described above

Environment

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    AccessibilityThis issue is related to accessibility (a11y)P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/chips

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions