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.

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

p-chip: aria-label is not applied to remove icon #14973

Closed
akashuwtw opened this issue Mar 7, 2024 · 1 comment · Fixed by #15034
Closed

p-chip: aria-label is not applied to remove icon #14973

akashuwtw opened this issue Mar 7, 2024 · 1 comment · Fixed by #15034
Assignees
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA LTS-16-PORTABLE Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Milestone

Comments

@akashuwtw
Copy link

Describe the bug

aria-label set to p-chip are not getting applied to it's inner <span> element of remove icon.

The result of this is that the screen reader doesn't reads anything when remove icon receives a keyboard focus.

Environment

OS: Windows 10

Reproducer

No response

Angular version

16.2.7

PrimeNG version

16.5.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.0

Browser(s)

Chrome 121.0.6167.161, Edge 121.0.2277.112

Steps to reproduce the behavior

<p-chip
    *ngFor="let file of files"
    label="{{ file.name }}"
    [attr.aria-label]="getRemoveFileLabel(file.name)"
    class="sm"
    [removable]="true"
    removeIcon="pi cross"
    (onRemove)="onRemoveFile(file)" />

Expected behavior

aria-label should be applied to the <span> of remove icon which actually gets the keyboard focus.

@akashuwtw akashuwtw added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Mar 7, 2024
@cetincakiroglu cetincakiroglu added this to the 17.11.0 milestone Mar 8, 2024
@cetincakiroglu cetincakiroglu added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working Component: Accessibility Issue or pull request is related to WCAG or ARIA labels Mar 13, 2024
@cetincakiroglu cetincakiroglu self-assigned this Mar 13, 2024
@cetincakiroglu cetincakiroglu added Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add LTS-16-PORTABLE and removed Type: Bug Issue contains a bug related to a specific component. Something about the component is not working Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Mar 13, 2024
@cetincakiroglu
Copy link
Contributor

Fixed in #15034

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA LTS-16-PORTABLE Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants