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

bug: ion-checkbox generated HTML markup has an accessibility issue on Lighthouse Audit #20517

Closed
albernaz opened this issue Feb 17, 2020 · 1 comment · Fixed by #22402
Closed
Labels
Milestone

Comments

@albernaz
Copy link

Bug Report

ion-checkbox generated HTML markup has an accessibility issue on Lighthouse Audit.

<ion-checkbox _ngcontent-ila-c3="" aria-required="true" color="warning" 
formcontrolname="privacy" id="privacy" name="privacy" slot="start" ng-reflect-color="warning"
 ng-reflect-name="privacy" class="ng-untouched ng-pristine ng-invalid ion-untouched ion-pristine ion-invalid ion-color ion-color-warning md in-item interactive hydrated" role="checkbox" 
aria-checked="false" aria-labelledby="ion-cb-0-lbl"><input type="hidden" class="aux-input" 
name="privacy" value=""></ion-checkbox>

<svg class="checkbox-icon" viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"></path></svg>

<button type="button"></button>

Ionic version:

[x] 5

Current behavior:

Lighthouse Audit: Buttons do not have an accessible name
Failing Elements
button

Expected behavior:

Should pass Lighthouse Audit Test.

Steps to reproduce:

Related code:

insert short code snippets here

Other information:

https://github.com/ionic-team/ionic/blob/master/core/src/components/checkbox/checkbox.tsx line 168-169
Just add line bellow to the Button HTML tag:
aria-labelledby={labelId}

This must fix it.

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.15 (C:\Users\Fabiano Lemos\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.0.0
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.1.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.13.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.13.7
   OS     : Windows 10
@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
Projects
None yet
2 participants