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

ionic-team / ionic-framework

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

Bug Report