bug: ion-checkbox svg visible to assistive technology

[RasmusKjeldgaard]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

ion-checkbox has an svg checkbox icon that currently appears in the accessibility tree as having role 'image', and can be targeted by screen readers, but with no other contextual information about the svgs, making it difficult to understand.

Using VoiceOver, I get the following experience when stepping into a checkbox and past the label:

Scanning the page with analysis tools such as axe devTools will also result in "SVG element missing accessible name" types of errors.

Expected Behavior

I think the svg should be hidden from AT with aria-hidden="true" or similar, so only the entire checkbox control and any label inside is reachable.

Steps to Reproduce

1. Navigate to a page with an ion-checkbox, e.g. https://stackblitz.com/edit/r1exi21m
2. Browse the page with a screen-reader, and step into the checkbox control.
3. See that svg inside ion-checkbox is reachable

Code Reproduction URL

https://stackblitz.com/edit/r1exi21m

Ionic Info

Reproduced in stackblitz.

Additional Information

No response

[RasmusKjeldgaard]

If this does turn out to be a bug, let me know if it makes sense to handle as a contribution, and I'll look into it.