Skip to content

Commit

Permalink
apply Rolf's suggestions
Browse files Browse the repository at this point in the history
  • Loading branch information
vursen committed Jan 21, 2025
1 parent d582263 commit 2fb3ae9
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 10 deletions.
18 changes: 9 additions & 9 deletions articles/components/button/index.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -365,7 +365,7 @@ endif::[]

== Disabled

Buttons representing actions that aren't currently available to the user should be either hidden or disabled. A disabled button is rendered as "dimmed" and prevents all user interactions, including clicks, focus, and hover events.
Buttons representing actions that arent currently available to the user should be either hidden or disabled. A disabled button is rendered as "dimmed".

[.example]
--
Expand All @@ -392,7 +392,11 @@ include::{root}/frontend/demo/component/button/react/button-disabled.tsx[render,
endif::[]
--

This default behavior, however, has accessibility drawbacks: users can't see tooltips that might explain why a button is disabled, whereas screen readers skip disabled buttons entirely. To improve this, an experimental enhancement allows disabled buttons to receive focus and show tooltips, while still preventing other interactions. You can enable this feature with the following feature flag:

=== Focus and Hover

By default, disabled buttons are not focusable and cannot react to hover events. This can cause accessibility issues by making them entirely invisible to assistive technologies, and prevents the use of Tooltips to explain why the action is not available.
This can be addressed by enabling the feature flag `accessibleDisabledButtons`, which makes disabled buttons focusable and hoverable, while preventing them from being triggered:

Check failure on line 399 in articles/components/button/index.adoc

View workflow job for this annotation

GitHub Actions / lint

[vale] reported by reviewdog 🐶 [Vale.Spelling] Did you really mean 'hoverable'? Raw Output: {"message": "[Vale.Spelling] Did you really mean 'hoverable'?", "location": {"path": "articles/components/button/index.adoc", "range": {"start": {"line": 399, "column": 124}}}, "severity": "ERROR"}

[.example]
--
Expand All @@ -412,14 +416,10 @@ window.Vaadin.featureFlags.accessibleDisabledButtons = true;
--


=== Hidden vs. Disabled

Hiding entirely an unavailable action is often preferable to a disabled button, as this reduces UI clutter. However, in certain situations, this can be problematic. If the user expects a button to be present -- such as at the end of a form -- hiding the button can cause confusion, even if the form clearly shows the presence of one or more invalid fields. Also, since a hidden button doesn't occupy any space in the UI, toggling its visibility can cause unwanted changes in the layout of other elements.


=== Show Error on Click
=== Alternatives to Disabling

As an alternative to hiding or disabling buttons, configure instead unavailable actions to show an error message when the button is clicked by using a <<../notification/index#,Notification>> or an adjacent inline text element. This approach is the most accessible option, but may be frustrating to users who expect unavailable actions to be distinguished somehow from available actions.
The most obvious alternative to disabling a button is to hide it entirely. This reduces UI clutter, but can cause confusion as it doesn't give the user any clue of where the button will appear once the action it represents becomes available. There is also a risk of undesired layout shifts in the UI when the button appears.

Check warning on line 421 in articles/components/button/index.adoc

View workflow job for this annotation

GitHub Actions / lint

[vale] reported by reviewdog 🐶 [Vaadin.Will] Avoid using 'will'. Raw Output: {"message": "[Vaadin.Will] Avoid using 'will'.", "location": {"path": "articles/components/button/index.adoc", "range": {"start": {"line": 421, "column": 182}}}, "severity": "WARNING"}

Check warning on line 421 in articles/components/button/index.adoc

View workflow job for this annotation

GitHub Actions / lint

[vale] reported by reviewdog 🐶 [Vaadin.ThereIs] Don't start a sentence with 'There is'. Raw Output: {"message": "[Vaadin.ThereIs] Don't start a sentence with 'There is'.", "location": {"path": "articles/components/button/index.adoc", "range": {"start": {"line": 421, "column": 243}}}, "severity": "WARNING"}
Another option is to keep the button visible and enabled, but show an error, e.g. using a Notification, when it's clicked. This option is best combined with some custom styling of the button to give the user a hint that the action is unavailable.


=== Prevent Multiple Clicks
Expand Down
2 changes: 1 addition & 1 deletion articles/components/menu-bar/index.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -331,7 +331,7 @@ include::{root}/frontend/demo/component/menubar/react/menu-bar-disabled.tsx[rend
endif::[]
--

Since disabled root-level items (buttons) prevent all user interactions, there are accessibility drawbacks: users can't see tooltips that might explain why a button is disabled, whereas screen readers skip disabled buttons entirely. To improve this, an experimental enhancement allows disabled buttons to receive focus and show tooltips, while still preventing other interactions. You can enable this feature with the following feature flag:
By default, disabled buttons (root-level items) are not focusable and cannot react to hover events. This can cause accessibility issues by making them entirely invisible to assistive technologies, and prevents the use of Tooltips to explain why the action is not available. This can be addressed by enabling the feature flag `accessibleDisabledButtons`, which makes disabled buttons focusable and hoverable, while preventing them from being triggered:

Check failure on line 334 in articles/components/menu-bar/index.adoc

View workflow job for this annotation

GitHub Actions / lint

[vale] reported by reviewdog 🐶 [Vale.Spelling] Did you really mean 'hoverable'? Raw Output: {"message": "[Vale.Spelling] Did you really mean 'hoverable'?", "location": {"path": "articles/components/menu-bar/index.adoc", "range": {"start": {"line": 334, "column": 398}}}, "severity": "ERROR"}

[.example]
--
Expand Down

0 comments on commit 2fb3ae9

Please sign in to comment.