From 2fb3ae91fdbfdf602dd4bb1cf24a6650bd3b74ad Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 21 Jan 2025 17:55:39 +0400 Subject: [PATCH] apply Rolf's suggestions --- articles/components/button/index.adoc | 18 +++++++++--------- articles/components/menu-bar/index.adoc | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/articles/components/button/index.adoc b/articles/components/button/index.adoc index 5d1821cebf..5cfb3488b2 100644 --- a/articles/components/button/index.adoc +++ b/articles/components/button/index.adoc @@ -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 aren’t currently available to the user should be either hidden or disabled. A disabled button is rendered as "dimmed". [.example] -- @@ -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: [.example] -- @@ -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. +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 diff --git a/articles/components/menu-bar/index.adoc b/articles/components/menu-bar/index.adoc index bca539dce8..a86885db0d 100644 --- a/articles/components/menu-bar/index.adoc +++ b/articles/components/menu-bar/index.adoc @@ -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: [.example] --