diff --git a/articles/components/context-menu/index.adoc b/articles/components/context-menu/index.adoc index a883a665a5..1d0389ba9b 100644 --- a/articles/components/context-menu/index.adoc +++ b/articles/components/context-menu/index.adoc @@ -189,6 +189,8 @@ endif::[] See the <<../tooltip#,Tooltips documentation page>> for details on tooltip configuration. +Tooltips are also useful on disabled menu items to explain why an action is unavailable, but they are not shown by default. See <<#disabled-menu-items,Disabled Menu Items>> for how to enable them. + == Custom Items @@ -310,6 +312,25 @@ include::{root}/frontend/demo/component/contextmenu/react/context-menu-disabled. endif::[] -- +By default, disabled menu items aren't focusable or hoverable, which hides them from assistive technologies and prevents Tooltips on disabled items from showing. The [since:com.vaadin:vaadin@V25.2]#`accessibleDisabledMenuItems`# feature flag can be enabled to make them focusable and hoverable without allowing them to be triggered: + +[.example] +-- +.`Flow` +[source,properties] +---- +# Add this line to src/main/resources/vaadin-featureflags.properties +com.vaadin.experimental.accessibleDisabledMenuItems=true +---- + +.`Lit & React` +[source,js] +---- +// Set before any menu is added to the DOM +window.Vaadin.featureFlags.accessibleDisabledMenuItems = true; +---- +-- + === Disable on Click (Flow) diff --git a/articles/components/menu-bar/index.adoc b/articles/components/menu-bar/index.adoc index 45d44bade5..22ec7ec099 100644 --- a/articles/components/menu-bar/index.adoc +++ b/articles/components/menu-bar/index.adoc @@ -184,7 +184,7 @@ include::{root}/frontend/demo/component/menubar/react/menu-bar-disabled.tsx[rend endif::[] -- -By default, disabled buttons (i.e., 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 allows focusing and hovering on disabled buttons, while preventing them from being triggered: +By default, disabled buttons (i.e., root-level items) aren't focusable or hoverable, which hides them from assistive technologies and prevents Tooltips on disabled buttons from showing. The `accessibleDisabledButtons` feature flag can be enabled to make them focusable and hoverable without allowing them to be triggered: [.example] -- @@ -203,6 +203,25 @@ window.Vaadin.featureFlags.accessibleDisabledButtons = true; ---- -- +Similarly, the [since:com.vaadin:vaadin@V25.2]#`accessibleDisabledMenuItems`# feature flag can be enabled to make disabled sub-menu items focusable and hoverable without allowing them to be triggered: + +[.example] +-- +.`Flow` +[source,properties] +---- +# Add this line to src/main/resources/vaadin-featureflags.properties +com.vaadin.experimental.accessibleDisabledMenuItems=true +---- + +.`Lit & React` +[source,js] +---- +// Set before any menu is added to the DOM +window.Vaadin.featureFlags.accessibleDisabledMenuItems = true; +---- +-- + === Checkable Menu Items @@ -343,6 +362,8 @@ endif::[] See the <<../tooltip#,Tooltips documentation page>> for details on tooltip configuration. +Tooltips are also useful on disabled menu items to explain why an action is unavailable, but they are not shown by default. See <<#disabled-items,Disabled Items>> for how to enable them. + == Keyboard Usage