Skip to content

Comments

feat(VCST-4566): improve vc-select a11y#2193

Open
goldenmaya wants to merge 9 commits intodevfrom
feat/VCST-4566-vc-select-a11y
Open

feat(VCST-4566): improve vc-select a11y#2193
goldenmaya wants to merge 9 commits intodevfrom
feat/VCST-4566-vc-select-a11y

Conversation

@goldenmaya
Copy link
Contributor

@goldenmaya goldenmaya commented Feb 23, 2026

Description

References

Jira-link:

https://virtocommerce.atlassian.net/browse/VCST-4566

Artifact URL:

https://vc3prerelease.blob.core.windows.net/packages/vc-theme-b2b-vue-2.42.0-pr-2193-38f0-38f027e0.zip


Note

Medium Risk
Touches core UI-kit primitives (VcSelect, VcMenuItem, VcCheckbox, VcRadioButton) and changes DOM/ARIA structure and click handling, which could cause subtle regressions in keyboard navigation, focus, and selection behavior across the app.

Overview
Accessibility overhaul for VcSelect and dropdown options. VcSelect now wires label→trigger via IDs, exposes proper listbox semantics (aria-expanded, aria-controls, aria-activedescendant, aria-describedby, aria-invalid/required/disabled), assigns stable option IDs, adds a polite live-region announcing search result counts, and distinguishes no results vs no options states.

Menu/list semantics and embedded interactive controls. VcDropdownMenu can now pass list id/role/aria-label; VcMenuItem now supports optionId, conditionally renders aria-selected only for valid roles, and preserves native list semantics unless an explicit ARIA role is set. VcCheckbox/VcRadioButton were refactored to avoid nested interactive elements inside clickable VcMenuItem (hide the real input, render a visual indicator, and switch container tag), and app code was adjusted to rely on menu-item clicks for selection (sorting, facet filters, org switcher).

Docs/tests/i18n updates. Storybook stories were expanded and configured for a11y rules, and locales add new strings for Clear and select live/no-options messaging.

Written by Cursor Bugbot for commit 38f027e. This will update automatically on new commits. Configure here.

@goldenmaya goldenmaya requested a review from a team as a code owner February 23, 2026 10:26
@goldenmaya goldenmaya requested review from Andrew-Orlov, ivan-kalachikov, muller39 and yuskithedeveloper and removed request for a team February 23, 2026 10:26
@sonarqubecloud
Copy link

Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.

const isInteractive = computed(
() => innerTag.value === "button" || innerTag.value === "a" || innerTag.value === "router-link",
);
provide(INTERACTIVE_PARENT_KEY, isInteractive);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isInteractive never activates for current VcMenuItem usages

Medium Severity

The isInteractive computed only checks innerTag (which requires clickable, to, or externalLink props), but every VcMenuItem containing a VcCheckbox or VcRadioButton in production code uses @click without clickable. This means isInteractive is always false, INTERACTIVE_PARENT_KEY always provides false, and the conditional input hiding (v-if="!isInsideInteractive") and container tag switching (labelspan) never activate — despite the code comment saying "ONLY in standalone mode."

Additional Locations (1)

Fix in Cursor Fix in Web

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant