Skip to content

feat: make disabled menu items accessible with feature flag#11541

Merged
web-padawan merged 4 commits into
mainfrom
feat/accessible-disabled-menu-items
Apr 23, 2026
Merged

feat: make disabled menu items accessible with feature flag#11541
web-padawan merged 4 commits into
mainfrom
feat/accessible-disabled-menu-items

Conversation

@vursen

@vursen vursen commented Apr 23, 2026

Copy link
Copy Markdown
Contributor

Description

This is the first part of the work to improve accessibility of disabled menu items. It introduces a new feature flag accessibleDisabledMenuItems that makes disabled context-menu and menu-bar sub-menu items focusable and hoverable, while still preventing selection and sub-menu opening. Tooltip support for disabled menu items will be added in a follow-up PR.

// Set before any context menu or menu bar is attached to the DOM.
window.Vaadin.featureFlags.accessibleDisabledMenuItems = true;

Part of #10415

Type of change

  • Feature

🤖 Partially generated with Claude Code

vursen and others added 2 commits April 23, 2026 13:00
When the `accessibleDisabledMenuItems` feature flag is enabled, disabled
context-menu and menu-bar sub-menu items become focusable and hoverable,
while still preventing selection and sub-menu opening. This mirrors the
existing `accessibleDisabledButtons` flag for root-level menu-bar buttons.

    window.Vaadin.featureFlags.accessibleDisabledMenuItems = true;

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Firefox can leave document.activeElement on <body> when calling
element.focus() inside an overlay without any focusable element in the
surrounding document, causing sendKeys to miss the focused item.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vursen vursen requested a review from web-padawan April 23, 2026 10:16
Comment thread packages/context-menu/src/vaadin-context-menu-item.js
Comment thread packages/context-menu/src/vaadin-contextmenu-items-mixin.js Outdated
Comment thread packages/menu-bar/test/accessible-disabled-menu-items.test.js Outdated
Comment thread packages/context-menu/test/accessible-disabled-menu-items.test.js
Comment thread packages/vaadin-lumo-styles/src/components/item.css
- Move "Disabled menu items" JSDoc from ItemsMixin to the vaadin-context-menu
  class JSDoc (both .js and .d.ts) for discoverability.
- Mirror the "Disabled sub-menu items" JSDoc section in vaadin-menu-bar-mixin.d.ts.
- Drop the unused global focusables from the menu-bar test fixture.
- Keep one focusable sibling in the context-menu test fixture to work around
  a Firefox focus quirk, with an explanatory comment.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Comment thread packages/context-menu/src/vaadin-context-menu.d.ts Outdated
@vursen vursen force-pushed the feat/accessible-disabled-menu-items branch from 7b54992 to f0f70d6 Compare April 23, 2026 13:42
@vursen vursen force-pushed the feat/accessible-disabled-menu-items branch from f0f70d6 to 18f7a62 Compare April 23, 2026 13:43
@sonarqubecloud

Copy link
Copy Markdown

@web-padawan web-padawan merged commit b42edcb into main Apr 23, 2026
10 checks passed
@web-padawan web-padawan deleted the feat/accessible-disabled-menu-items branch April 23, 2026 13:54
isipkh110 pushed a commit to isipkh110/flow-components that referenced this pull request Apr 28, 2026
## Description

Follow-up to vaadin/web-components#11541, which
introduced the `accessibleDisabledMenuItems` feature flag making
disabled context-menu and menu-bar sub-menu items focusable and
hoverable while still preventing selection and sub-menu opening.

This PR registers the flag on the Flow side so users can opt in by
adding the following to
`src/main/resources/vaadin-featureflags.properties`:

```
com.vaadin.experimental.accessibleDisabledMenuItems = true
```

The flag is registered via a new
`AccessibleDisabledMenuItemsFeatureFlagProvider` in the
`vaadin-context-menu-flow` module. `vaadin-menu-bar-flow` picks it up
transitively via its existing dependency on context-menu-flow, so a
single registration covers both components.

Also refreshes the `Button`, `MenuItem`, and `MenuBarItem` `setEnabled`
JSDocs to mirror the shorter wording used in the web-components PR. The
`MenuBarItem` doc now covers both `accessibleDisabledButtons` (for
root-level items) and `accessibleDisabledMenuItems` (for sub-menu
items).

## Type of change

- Feature

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vaadin-bot

Copy link
Copy Markdown
Collaborator

This ticket/PR has been released with Vaadin 25.2.0-alpha4.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants