feat: allow focusing disabled buttons and displaying tooltips

[petermakowski]

Done

• feat: allow focusing disabled buttons and displaying tooltips
  • this allows to display associated tooltips via keyboard

Rationale

Previously, disabled attribute was used which prevents focusing the button entirely. This meant that users navigating by keyboard could not focus the button and any associated tooltip would not be displayed.

By switching to aria-disabled, the button can still be focused while conveying its disabled state to assistive technologies. Submit action is prevented by using .preventDefault.

https://css-tricks.com/making-disabled-buttons-more-inclusive/

QA

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

• View the "Disabled with tooltip" button example in Storybook
• Tab to the disabled button and verify the tooltip is displayed
• Hover over the disabled button to see the tooltip appear
• Click the disabled button and confirm the click is prevented

Percy steps

• New "Disabled with tooltip" button example added

Fixes

Fixes: https://warthogs.atlassian.net/browse/MAASENG-2122

Screenshots

After

[webteam-app]

Demo

Jenkins

demos.haus

[ndv99]

Can this not just be disabled passed directly in? It's already a boolean/undefined value

[petermakowski]

This is to explicitly skip this prop when false. This is similar to existing behaviour where disabled={false} results in disabled attribute not being rendered at all. I did this to reduce the impact of this change (such as failing snapshot tests).

[bartaz]

We had some discussions around that in the past, with no exact conclusion from UX part what's the best approach: canonical/vanilla-framework#4299 canonical/vanilla-framework#4942

But seems like having tooltips on disabled buttons is something that we want, so this may be a way for implementing this.

Is there anything here that would be worth upstreaming to Vanilla? I guess there are no CSS changes needed, but I guess we could have a similar example and functionality documented there.

[petermakowski]

@bartaz I don't think there is anything major that would need to be upstreamed to Vanilla as it already handles disabled state as expected without using :disabled through .is-disabled class.

We might want to update the Vanilla guidelines and suggest not using :disabled but aria-disabled with .is-disabled instead.

We could also allow applying disabled through aria-disabled selector as an alternative.

None of these changes are required for this PR to land, it stands on its own as is IMO.

[ndv99]

LGTM 👍

[github-actions]

🎉 This PR is included in version 0.53.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀