feat: explain how to make disabled buttons accessible

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 is excluded from the focus order. This may be useful when you don't want interactive UI elements to receive the focus using the tab key.
+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, by default, prevents all user interactions, including clicks, focus, and hover events.
 
 [.example]
 --
@@ -392,6 +392,27 @@ include::{root}/frontend/demo/component/button/react/button-disabled.tsx[render,
 endif::[]
 --
 
+=== Accessibility
+
+While the default behavior effectively prevents accidental interactions, it has an accessibility drawback: screen readers skip disabled buttons entirely, and users can't see tooltips that might explain why the button is disabled. To address this, an experimental enhancement allows disabled buttons to receive focus and show tooltips, improving their accessibility. This feature can be enabled with the following feature flag:
+
+[.example]
+--
+.`Flow`
+[source,properties]
+----
+# Add this line to src/main/resources/vaadin-featureflags.properties
+com.vaadin.experimental.accessibleDisabledButtons=true
+----
+
+.`Lit & React`
+[source,js]
+----
+// Set before any button is added to the DOM
+window.Vaadin.featureFlags.accessibleDisabledButtons = true;
+----
+--
+
 
 === Hidden vs. Disabled