Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug(material/chips): Chips should have larger touch targets #29511

Open
1 task
amysorto opened this issue Jul 29, 2024 · 0 comments
Open
1 task

bug(material/chips): Chips should have larger touch targets #29511

amysorto opened this issue Jul 29, 2024 · 0 comments
Labels
Accessibility This issue is related to accessibility (a11y) area: material/chips P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@amysorto
Copy link
Contributor

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

Even though icon button defaults to 40px, the touch target is still 48px from here: https://gith
ub.com/angular/components/blob/main/src/material/button/_button-base.scss#L126.

Screenshot 2024-07-29 at 2 34 16 PM Screenshot 2024-07-29 at 2 35 10 PM

Chips has interactive icons buttons or the chip itself is interactive, it should also have a touch target of at least 48x48px to be more accessible

Reproduction

https://material.angular.io/components/chips/examples

Expected Behavior

Touch targets of at least 48x48px

Actual Behavior

Smaller touch targets than 48x48px
Screenshot 2024-07-29 at 2 33 29 PM

Environment

  • Angular:
  • CDK/Material:
  • Browser(s):
  • Operating System (e.g. Windows, macOS, Ubuntu):
@amysorto amysorto added needs triage This issue needs to be triaged by the team P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent Accessibility This issue is related to accessibility (a11y) area: material/chips and removed needs triage This issue needs to be triaged by the team labels Jul 29, 2024
MadunaThabo added a commit to MadunaThabo/components that referenced this issue Aug 21, 2024
@MadunaThabo
fix(material/chips): Fix chips touch target to 48px * 48px
00bcfac 
Increases the touch target to the chip icon to have 48px *48px

Fixes angular#29511.
@MadunaThabo MadunaThabo mentioned this issue Aug 21, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Accessibility This issue is related to accessibility (a11y) area: material/chips P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/chips): Fix chips touch target to 48px * 48px MadunaThabo/components
1 participant
@amysorto