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

[4.1.1] Ion-checkbox's internal button does not have an accessible name #17796

Closed
shreeshbhat opened this issue Mar 15, 2019 · 4 comments · Fixed by #22402
Closed

[4.1.1] Ion-checkbox's internal button does not have an accessible name #17796

shreeshbhat opened this issue Mar 15, 2019 · 4 comments · Fixed by #22402
Labels
help wanted a good issue for the community package: core @ionic/core package
Milestone

Comments

@shreeshbhat
Copy link
Contributor

Bug Report

Ionic version:
[x] 4.1.1

Current behavior:
Ion-checkbox's button does not have an accessible name.

Expected behavior:
Ion-checkbox should allow a prop named aria-label and set it on Ion-checkbox's internal button.

Steps to reproduce:
Use Ion-checkbox in a simple html and run Lighthouse Audit from Chrome.
It shows the following error for accessibility :

  1. Buttons do not have an accessible name
    When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers.

Failing Elements
<button type="button"></button>

Ionic info:

Ionic:

   ionic (Ionic CLI) : 4.3.1

System:

   NodeJS : v8.12.0
   npm    : 6.9.0
   OS     : macOS Sierra
@ionitron-bot ionitron-bot bot added the triage label Mar 15, 2019
@shreeshbhat
Copy link
Contributor Author

I would like to pick this up as this is a beginner friendly fix.
To fix this, I will add a Prop named aria-label in ion-checkbox and assign it to the button used in the component.
Also, I can default it to name prop.
The changes are similar to how it is handled in ion-icon.
https://github.com/ionic-team/ionic/blob/4.1.x/core/src/components/icon/readme.md
If this approach sounds good, I will make the change and raise a PR this weekend.

@shawnm0705
Copy link

shawnm0705 commented Sep 19, 2019

Same as <ion-select> the internal button generated from ion-select also doesn't have aria-label

@brandyscarney brandyscarney added help wanted a good issue for the community package: core @ionic/core package labels Oct 8, 2019
@ionitron-bot
Copy link

ionitron-bot bot commented Oct 8, 2019

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!

@ionitron-bot ionitron-bot bot removed the triage label Oct 8, 2019
Tobias-Braun added a commit to Tobias-Braun/ionic that referenced this issue May 1, 2020
Bug ionic-team#17796
The issue creator mentiones that there is an option missing to create an aria-label for the button.
Add an ariaLabel prop to the checkbox and delegate it to the button for accessibility.

closes  ionic-team#17796
@brandyscarney brandyscarney added this to the a11y milestone Oct 2, 2020
TakumaKira pushed a commit to TakumaKira/ionic-framework that referenced this issue Nov 13, 2020
@ionitron-bot
Copy link

ionitron-bot bot commented Dec 12, 2020

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Dec 12, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
help wanted a good issue for the community package: core @ionic/core package
Projects
None yet
3 participants