ionic-framework copied to clipboard
bug: disabled checkbox should not be hidden from screen readers
- [X] I have read the Contributing Guidelines.
- [X] I agree to follow the Code of Conduct.
- [X] I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
- [ ] v4.x
- [X] v5.x
- [X] v6.x
- [ ] Nightly
On a disable ion-checkbox, ionic is applying an aria-hidden attribute, which is hiding the element from the DOM tree, therefore screen readers such as TalkBack and Voiceover are skipping the entire element.
The disable ion-checkbox should not be hidden from the screen readers and should announce the disable properties of ion-checkbox such as "dim" for voiceover and "disabled" for TalkBack.
Steps to Reproduce
Create a simple disable ion-checkbox and navigate using the screen reader both Talk back and Voiceover and notice that how screen reader will skip and not announce the disable property of ion-checkbox, it can be misleading for the SR user.
Code Reproduction URL
Ionic CLI : 6.19.0 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 6.2.1
Capacitor CLI : 4.0.1 @capacitor/android : not installed @capacitor/core : 4.0.1 @capacitor/ios : not installed
cordova-res : not installed globally native-run : 1.6.0
NodeJS : v16.14.1 (/usr/local/bin/node) npm : 8.5.0 OS : macOS Monterey
Ionic should not apply aria-hidden to the element and let is behave like a native disable element which will provide the semantic meaning and state of the element to the user. Let me know if more info is needed from my side.
Thanks for the issue. I can confirm that this is a bug. It looks like this behavior was added in https://github.com/ionic-team/ionic-framework/commit/7214a8401b709e1353155304cf6e9f97b2b4d294. The behavior was added in order to account for iOS/VoiceOver.