Repository navigation
bug: Checkbox touch target issue when there is a link in the text - A11y issue #23289
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.
Activity
liamdebeasi commentedon Aug 2, 2022
Hi there,
We are proposing some changes to form components that seek to resolve this issue. We would love your feedback on these proposed changes! You can read more about the changes and leave comments here: #25660
liamdebeasi commentedon Jan 6, 2023
Hey there,
We recently merged some changes in 9d52e70 that should resolve this issue. These changes are part of the work I referenced in #25660.
This new architecture will be available in Ionic 7.0. We will have a beta period in the future where developers can test and provide feedback. Since the work to resolve this issue has been completed, I am going to close this. Let me know if you have any questions. Thanks!
ionitron-bot commentedon Feb 5, 2023
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.