bug: ion-button is treated as disabled by VoiceOver when passed disabled={"false"} prop

[llostris]

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

v7.x

Current Behavior

IonButton componen, when passed disabled={false} prop, will be shown to the user as enabled, but treated as disabled by accessibility tooling (macOS Voiceover).

The generated HTML for the following React code:

<IonButton disabled={false}>Disabled=False</IonButton>

is this:

<ion-button disabled="false" class="ios button button-solid ion-activatable ion-focusable">Disabled=False</ion-button>

Note 1: There's a disabled="false" attribute, which according to HTML spec means that this button is disabled (see documentation about boolean attributes and disabled attribute which is a boolean attribute.

Note 2: Ionic displays this button as enabled:

So this is inconsistent behaviour.

Expected Behavior

Considering Ionic displays this button as enabled, I believe the generated HTML should look as follows:

<ion-button class="ios button button-solid ion-activatable ion-focusable">Disabled=False</ion-button>

without disabled="false" prop.

Steps to Reproduce

<IonButton disabled={false}>Disabled=False</IonButton>

You can now inspect the button and see that it's rendered as:

<ion-button disabled="false" class="ios button button-solid ion-activatable ion-focusable">Disabled=False</ion-button>

And displayed as

So:

• It has enabled button styling

Code Reproduction URL

https://stackblitz.com/edit/ztrqwi?file=src%2Fmain.tsx

Ionic Info

Ionic:

   Ionic CLI       : 7.0.1 (/Users/magdalenastrzoda/.config/yarn/global/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 7.2.2

Capacitor:

   Capacitor CLI      : 4.7.3
   @capacitor/android : 4.7.3
   @capacitor/core    : 4.7.3
   @capacitor/ios     : 4.7.3

Utility:

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

System:

   NodeJS : v18.15.0 (/Users/magdalenastrzoda/.nvm/versions/node/v18.15.0/bin/node)
   npm    : 9.5.0
   OS     : macOS Monterey


  ───────────────────────────────────────────────

     Ionic CLI update available: 7.0.1 → 7.1.1
         Run npm i -g @ionic/cli to update

  ───────────────────────────────────────────────

### Additional Information

We've seen this behaviour both on 7.0.x and 7.2.x versions of Ionic for React.

[sean-perkins]

Hello @llostris thanks for reporting this issue!

This is currently a product of design for Stencil that the team has discussed changing. False values are still reflected to the host web component node, even though they should be removed.

While not a viable workaround at scale, developers can assign undefined instead of false for the attribute to be removed.

The issue is being tracked here: stenciljs/output-targets#123 in an addition to an internal ticket. This is an important change we want to make, but realize it is a breaking change and will need to be communicated and documented appropriately.