fix(Button): replace disabled for a11y attribute aria-disabled

[LarryMatte]

https://equisoft.atlassian.net/browse/DS-743

Remplacer l'attribut disabled pour l'attribut d'accessibilité aria-disabled="true".

[github-actions]

Storybook for this build: https://ds.equisoft.io/pr-950/

[github-actions]

Webapp for this build: https://ds.equisoft.io/pr-950/webapp/

[savutsang]

Ca me semble beau tout ca.

Sauf que maintenant, meme s'il n'y a plus de click, il va quand meme avoir le propagation du click (le disabled normal lui le block). Je pense on devrait bloquer cette propagation pour pas changer ce comportement, sinon ca risque d'affecter certains apps.

[LarryMatte]

Si je fais ca comme ça est-ce que c'est good pour toi?

    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
        if (disabled) {
            event.preventDefault();
            event.stopPropagation();
        } else if (onClick) {
            onClick(event);
        }
    };

    const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
        if (disabled) {
            event.preventDefault();
            event.stopPropagation();
        } else if (onKeyDown) {
            onKeyDown(event);
        }
    };

<StyledButton
            ...
            aria-disabled={disabled ? 'true' : undefined}
            ...
        >

[savutsang]

Oui c'est good de meme.

[pylafleur]

Pas certain de comprendre quel est le gain de remplacer l'utilisation du disabled natif si on finit par reproduire le même comportement avec du code de notre côté?

Edit: Ah, est-ce que c'est pour qu'il puisse recevoir le focus?

[LarryMatte]

Quand un bouton est disabled nativement, il n'est pas focusable avec le clavier, ce qui pose des problèmes pour les utilisateurs de technologies d'assistance comme les lecteurs d'écran. Si un bouton est inaccessible via le clavier, ces utilisateurs ne pourront pas savoir qu'il existe sur la page, même s'il est seulement désactivé.

Exemple d'un formulaire. Si, pour une raison quelconque (champ required qui n'a pas été remplis ou il y a des erreurs dans la page) et que ces issues doivent être fixées avant que le bouton submit soit enabled et que le bouton submit est disabled nativement, l'utilisateur qui navigue avec le clavier pourrait ne jamais le trouver. Cela peut entraîner de la confusion pour les users car ils vont naviguer un formulaire sans submit buttons (selon leur perception de la chose).

En utilisant l'attribut aria-disabled, le bouton reste focusable et les lecteurs d'écran l'annoncent comme "dimmed". Ainsi, les utilisateurs de technologies d'assistance sont informés de sa présence et de son état désactivé.