Description
Bug Report
Ionic version:
4.x
5.x
Current behavior:
if ion-checkbox has text and along with text if there is a link present, then touch target for the checkbox becomes very small, user cannot tap on the text to select the checkbox, also the link becomes inaccessible for the screen reader user. however, if the link is removed, then the user can select the checkbox by tapping on the text itself.
Expected behavior:
Users should be able to tap on the text to select the checkbox regardless of the link present or not as it provides a larger touch target.
Steps to reproduce:
I have added reproducible code below, there are two checkboxes, one with a link and one without it, you should be able to select the checkbox by tapping on the text itself, but that'll only happen on the checkbox without the link in it. Users should be able to select both the checkboxes just by tapping on the text, I had deployed the app to test this using capacitor.
<ion-item> <ion-checkbox color="primary"> </ion-checkbox> <ion-label class="ion-text-wrap" >please select the checkbox to agree to <a href="#">terms and conditions</a></ion-label> </ion-item> <ion-item> <ion-checkbox color="primary"> </ion-checkbox> <ion-label class="ion-text-wrap" >please select the checkbox to agree to terms and conditions</ion-label> </ion-item>
let me know if more info is needed to reproduce the issue.