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.

[bpmcneilly]

Any chance this needs work @liamdebeasi? This should be a fairly straightforward change from aria-hidden to aria-disabled on the checkbox component. Not sure if this bug applies to other components as well, though.

[liamdebeasi]

Thanks for the ping! So the aria-hidden was added to work around some quirks with how iOS/VoiceOver interacts with ion-checkbox, so removing that in favor of aria-disabled likely will cause behavior regressions on iOS. However, this is really due to how we've architected this component.

In Ionic 7 we are introducing a new checkbox architecture, and I was able to resolve the issue there. I have a PR up in https://github.com/ionic-team/ionic-framework/pull/26817.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/26817, and a fix will be available in an upcoming release of the Ionic Framework v7 beta.

[mastergogo]

Disabled checkboxes are still hidden from screen readers as aria-hidden is still applied to them, I could check this in ionic 7 beta, here is the repo for the same

[liamdebeasi]

You need to use the new checkbox syntax as the fix is only available there (you should have a warning in your console):

<ion-item>
  <ion-checkbox disabled="true">I agree to the terms and conditions</ion-checkbox>
</ion-item>

[mastergogo]

Got it, thanks!

[ionitron-bot[bot]]

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.