bug: disabled checkbox should not be hidden from screen readers

[mastergogo]

Prerequisites

• [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

Current Behavior

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.

Expected Behavior

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

https://github.com/mastergogo/disableIonicCheckBox

Ionic Info

Ionic:

Ionic CLI : 6.19.0 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 6.2.1

Capacitor:

Capacitor CLI : 4.0.1 @capacitor/android : not installed @capacitor/core : 4.0.1 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.6.0

System:

NodeJS : v16.14.1 (/usr/local/bin/node) npm : 8.5.0 OS : macOS Monterey

Additional Information

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.

[liamdebeasi]

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.