From 6573f74fd31220421022f09cdfe6cb9d3bba1cf4 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 19 May 2026 16:51:41 +0400 Subject: [PATCH 1/5] docs: document accessibleDisabledMenuItems feature flag Explain how to enable Tooltips on disabled Menu Bar sub-menu items and Context Menu items by enabling the `accessibleDisabledMenuItems` feature flag. Add brief cross-references from the Tooltips sections. Co-Authored-By: Claude Opus 4.7 (1M context) --- articles/components/context-menu/index.adoc | 21 +++++++++++++++++++ articles/components/menu-bar/index.adoc | 23 ++++++++++++++++++++- 2 files changed, 43 insertions(+), 1 deletion(-) diff --git a/articles/components/context-menu/index.adoc b/articles/components/context-menu/index.adoc index a883a665a5..5f5b6dde9c 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 especially 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. Enable the `accessibleDisabledMenuItems` feature flag 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..3d0a19e484 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. Enable the `accessibleDisabledButtons` feature flag to make them focusable and hoverable without allowing them to be triggered: [.example] -- @@ -203,6 +203,25 @@ window.Vaadin.featureFlags.accessibleDisabledButtons = true; ---- -- +Disabled sub-menu items behave similarly. Enable the `accessibleDisabledMenuItems` feature flag 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; +---- +-- + === Checkable Menu Items @@ -343,6 +362,8 @@ endif::[] See the <<../tooltip#,Tooltips documentation page>> for details on tooltip configuration. +Tooltips are especially 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 From f365689b6e2fdd7c6c1f7158523135c8e7e81fba Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 19 May 2026 16:54:12 +0400 Subject: [PATCH 2/5] docs: rephrase sub-menu items feature flag intro Co-Authored-By: Claude Opus 4.7 (1M context) --- articles/components/menu-bar/index.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/articles/components/menu-bar/index.adoc b/articles/components/menu-bar/index.adoc index 3d0a19e484..3e8467f0fc 100644 --- a/articles/components/menu-bar/index.adoc +++ b/articles/components/menu-bar/index.adoc @@ -203,7 +203,7 @@ window.Vaadin.featureFlags.accessibleDisabledButtons = true; ---- -- -Disabled sub-menu items behave similarly. Enable the `accessibleDisabledMenuItems` feature flag to make them focusable and hoverable without allowing them to be triggered: +Similarly, the `accessibleDisabledMenuItems` feature flag can be enabled to make disabled sub-menu items focusable and hoverable without allowing them to be triggered: [.example] -- From 03b605f733a3c8943931df53c2ff3da220a0093a Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 19 May 2026 16:57:06 +0400 Subject: [PATCH 3/5] docs: switch feature flag prose to non-imperative voice Co-Authored-By: Claude Opus 4.7 (1M context) --- articles/components/context-menu/index.adoc | 2 +- articles/components/menu-bar/index.adoc | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/articles/components/context-menu/index.adoc b/articles/components/context-menu/index.adoc index 5f5b6dde9c..37f7ce9219 100644 --- a/articles/components/context-menu/index.adoc +++ b/articles/components/context-menu/index.adoc @@ -312,7 +312,7 @@ 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. Enable the `accessibleDisabledMenuItems` feature flag to make them focusable and hoverable without allowing them to be triggered: +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 `accessibleDisabledMenuItems` feature flag can be enabled to make them focusable and hoverable without allowing them to be triggered: [.example] -- diff --git a/articles/components/menu-bar/index.adoc b/articles/components/menu-bar/index.adoc index 3e8467f0fc..f6a7964aaa 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) aren't focusable or hoverable, which hides them from assistive technologies and prevents Tooltips on disabled buttons from showing. Enable the `accessibleDisabledButtons` feature flag to make them focusable and hoverable without allowing them to be 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] -- From 20cd32c2582951a8fc60c746dc9e591f99f806d8 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 19 May 2026 16:57:54 +0400 Subject: [PATCH 4/5] docs: soften tooltip usefulness phrasing for disabled menu items --- articles/components/context-menu/index.adoc | 2 +- articles/components/menu-bar/index.adoc | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/articles/components/context-menu/index.adoc b/articles/components/context-menu/index.adoc index 37f7ce9219..89145b7135 100644 --- a/articles/components/context-menu/index.adoc +++ b/articles/components/context-menu/index.adoc @@ -189,7 +189,7 @@ endif::[] See the <<../tooltip#,Tooltips documentation page>> for details on tooltip configuration. -Tooltips are especially 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. +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 diff --git a/articles/components/menu-bar/index.adoc b/articles/components/menu-bar/index.adoc index f6a7964aaa..e43a212415 100644 --- a/articles/components/menu-bar/index.adoc +++ b/articles/components/menu-bar/index.adoc @@ -362,7 +362,7 @@ endif::[] See the <<../tooltip#,Tooltips documentation page>> for details on tooltip configuration. -Tooltips are especially 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. +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 From e48d8e4f82418c742c5cae2b3bcdc4b26c5202e7 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 19 May 2026 17:02:46 +0400 Subject: [PATCH 5/5] docs: tag accessibleDisabledMenuItems flag with since 25.2 badge Co-Authored-By: Claude Opus 4.7 (1M context) --- articles/components/context-menu/index.adoc | 2 +- articles/components/menu-bar/index.adoc | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/articles/components/context-menu/index.adoc b/articles/components/context-menu/index.adoc index 89145b7135..1d0389ba9b 100644 --- a/articles/components/context-menu/index.adoc +++ b/articles/components/context-menu/index.adoc @@ -312,7 +312,7 @@ 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 `accessibleDisabledMenuItems` feature flag can be enabled to make them focusable and hoverable without allowing them to be triggered: +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] -- diff --git a/articles/components/menu-bar/index.adoc b/articles/components/menu-bar/index.adoc index e43a212415..22ec7ec099 100644 --- a/articles/components/menu-bar/index.adoc +++ b/articles/components/menu-bar/index.adoc @@ -203,7 +203,7 @@ window.Vaadin.featureFlags.accessibleDisabledButtons = true; ---- -- -Similarly, the `accessibleDisabledMenuItems` feature flag can be enabled to make disabled sub-menu items focusable and hoverable without allowing them to be triggered: +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] --