You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/components/button/index.adoc
+9-9Lines changed: 9 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -365,7 +365,7 @@ endif::[]
365
365
366
366
== Disabled
367
367
368
-
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.
368
+
Buttons representing actions that aren't currently available to the user should be either hidden or disabled. A disabled button is rendered as "dimmed".
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:
395
+
396
+
=== Focus and Hover
397
+
398
+
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.
399
+
This can be addressed by enabling the feature flag `accessibleDisabledButtons`, which makes disabled buttons focusable and hoverable, while preventing them from being triggered:
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.
418
-
419
-
420
-
=== Show Error on Click
419
+
=== Alternatives to Disabling
421
420
422
-
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.
421
+
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.
422
+
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.
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:
334
+
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:
0 commit comments