feat(a11y): WCAG AA Storybook gate and high-priority remediations - #564
Merged
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (87)
🚧 Files skipped from review as they are similar to previous changes (78)
📝 WalkthroughSummary
Testing
WalkthroughThis change adds Storybook axe accessibility checks and CI execution, accessibility guidance and audit documentation, and regression tests. Oxygen UI components gain accessible names, semantic controls, focus handling, reduced-motion support, contrast updates, ref forwarding, and improved menu behavior. Storybook stories are updated with labels, semantic associations, keyboard guidance, and documented rule exceptions. Sequence Diagram(s)sequenceDiagram
participant Developer
participant Storybook
participant Axe
participant CI
Developer->>Storybook: render accessible stories
Storybook->>Axe: evaluate WCAG 2.1 AA rules
Axe-->>Storybook: report violations
CI->>Storybook: run built-story tests
Storybook-->>CI: pass or fail results
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
4 tasks
ajirthan
force-pushed
the
feat/a11y-wcag-baseline
branch
5 times, most recently
from
July 17, 2026 03:41
9d1e271 to
ef16ee8
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
packages/oxygen-ui/src/components/accessibility.test.tsx (1)
89-92: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueAssert exact state for attribute values.
Using exact assertions is more precise and robust than negative assertions like
not.toBe('').
packages/oxygen-ui/src/components/accessibility.test.tsx#L89-L92: Replace.not.toBe('')with.toBeNull()sinceSearchBaromits the attribute when the placeholder is empty.packages/oxygen-ui/src/components/accessibility.test.tsx#L122-L126: Replace.not.toBe('')with.toBe('Search')sinceListingTableToolbarfalls back to the default'Search'label.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/oxygen-ui/src/components/accessibility.test.tsx` around lines 89 - 92, Update the accessibility assertions in packages/oxygen-ui/src/components/accessibility.test.tsx at lines 89-92 and 122-126: for SearchBar with an empty placeholder, assert the textbox aria-label is null; for ListingTableToolbar, assert the aria-label is exactly "Search" instead of using a negative empty-string assertion.packages/oxygen-ui-docs/stories/Theming/useThemeContent.stories.tsx (1)
166-172: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueAdd an accessible name and role to the focusable scroll region.
Making the block focusable with
tabIndex={0}allows keyboard users to scroll, but it's a best practice to also include arole="region"and anaria-labelso that screen readers can announce its purpose. As per path instructions, this helps ensure proper correctness and best practices.♻️ Proposed refactor
- <Typography variant="body2" component="pre" tabIndex={0} sx={{ + <Typography variant="body2" component="pre" tabIndex={0} role="region" aria-label="Code snippet" sx={{🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/oxygen-ui-docs/stories/Theming/useThemeContent.stories.tsx` around lines 166 - 172, Update the focusable preformatted scroll region in the useThemeContent story by adding role="region" and a descriptive aria-label alongside tabIndex={0}, so assistive technologies announce its purpose while preserving the existing keyboard-scroll behavior.Source: Path instructions
packages/oxygen-ui/src/components/Form/ElementWrapper.tsx (1)
30-44: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse
useId()for DOM ID generation.Generating DOM IDs based on the
nameprop can lead to collisions if multiple forms on the same page use the same input names. Consider using React'suseId()to guarantee globally unique IDs for accessibility attributes.♻️ Proposed fix
export const ElementWrapper = (props: ElementWrapperProps) => { const { label, name, children } = props - const labelId = `${name}-label` + const generatedId = React.useId() + const labelId = `${name}-${generatedId}-label` // MUI Select renders a non-labelable div[role="combobox"], so `htmlFor` // alone doesn't give it an accessible name. Link Select children to the🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/oxygen-ui/src/components/Form/ElementWrapper.tsx` around lines 30 - 44, Update ElementWrapper’s labelId generation to use React’s useId() rather than deriving the DOM ID solely from name, while preserving the existing label linkage and Select child enhancement behavior. Ensure the generated ID remains suitable for labelId/htmlFor accessibility attributes.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/oxygen-ui/src/components/SearchBar/SearchBarBase.tsx`:
- Around line 72-89: Remove the top-level aria-label and aria-labelledby props
from the TextField invocation in SearchBarBase, while preserving their injection
through the htmlInput configuration so they apply only to the underlying input
element.
In `@packages/oxygen-ui/src/components/Sidebar/SidebarItem.tsx`:
- Around line 455-469: Update the popover component around the existing
disableRestoreFocus prop to also disable automatic and enforced focus whenever
popoverOpenedByClick is false. Keep autofocus and focus trapping enabled for
click/keyboard-opened popovers, while ensuring hover-only popovers leave focus
on the trigger.
- Around line 466-470: Update the popover content around SidebarItemPopoverList
to render a MenuItem instead of SidebarItemPopoverButton/ListItemButton,
preserving the existing styling and behavior while providing the MenuList’s
expected menu-item semantics.
---
Nitpick comments:
In `@packages/oxygen-ui-docs/stories/Theming/useThemeContent.stories.tsx`:
- Around line 166-172: Update the focusable preformatted scroll region in the
useThemeContent story by adding role="region" and a descriptive aria-label
alongside tabIndex={0}, so assistive technologies announce its purpose while
preserving the existing keyboard-scroll behavior.
In `@packages/oxygen-ui/src/components/accessibility.test.tsx`:
- Around line 89-92: Update the accessibility assertions in
packages/oxygen-ui/src/components/accessibility.test.tsx at lines 89-92 and
122-126: for SearchBar with an empty placeholder, assert the textbox aria-label
is null; for ListingTableToolbar, assert the aria-label is exactly "Search"
instead of using a negative empty-string assertion.
In `@packages/oxygen-ui/src/components/Form/ElementWrapper.tsx`:
- Around line 30-44: Update ElementWrapper’s labelId generation to use React’s
useId() rather than deriving the DOM ID solely from name, while preserving the
existing label linkage and Select child enhancement behavior. Ensure the
generated ID remains suitable for labelId/htmlFor accessibility attributes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 159b75f9-b913-477e-8560-44c24893cb7f
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (87)
.github/workflows/pr-builder.ymlpackages/oxygen-ui-docs/.storybook/main.jspackages/oxygen-ui-docs/.storybook/preview.jspackages/oxygen-ui-docs/ACCESSIBILITY.mdpackages/oxygen-ui-docs/package.jsonpackages/oxygen-ui-docs/stories/Accessibility.stories.tsxpackages/oxygen-ui-docs/stories/Animations/ParticleBackground.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/AppBreadcrumbs.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/AppShell.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/CodeBlock.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/Footer.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/Header.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/ListingTable.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/NotificationBanner.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/NotificationPanel.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/PageTitle.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/Sidebar.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/UserMenu.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/useAppShell.stories.tsxpackages/oxygen-ui-docs/stories/DataDisplay/Tooltip.stories.tsxpackages/oxygen-ui-docs/stories/Feedback/Backdrop.stories.tsxpackages/oxygen-ui-docs/stories/Feedback/Dialog.stories.tsxpackages/oxygen-ui-docs/stories/Feedback/Progress.stories.tsxpackages/oxygen-ui-docs/stories/Feedback/Snackbar.stories.tsxpackages/oxygen-ui-docs/stories/GettingStarted.stories.tsxpackages/oxygen-ui-docs/stories/HowToContribute.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/Button.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/ButtonGroup.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/Checkbox.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/ComplexSelect.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/NumberField.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/SearchBar.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/Select.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/Slider.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/Switch.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/TransferList.stories.tsxpackages/oxygen-ui-docs/stories/Layout/Container.stories.tsxpackages/oxygen-ui-docs/stories/Layout/ImageList.stories.tsxpackages/oxygen-ui-docs/stories/Navigation/BottomNavigation.stories.tsxpackages/oxygen-ui-docs/stories/Navigation/Drawer.stories.tsxpackages/oxygen-ui-docs/stories/Navigation/Link.stories.tsxpackages/oxygen-ui-docs/stories/Navigation/Menu.stories.tsxpackages/oxygen-ui-docs/stories/Navigation/Stepper.stories.tsxpackages/oxygen-ui-docs/stories/Navigation/Tabs.stories.tsxpackages/oxygen-ui-docs/stories/Surfaces/AppBar.stories.tsxpackages/oxygen-ui-docs/stories/Surfaces/ClickableCard.stories.tsxpackages/oxygen-ui-docs/stories/Templates/CreateServiceFormTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/DashboardTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/EmptyStateTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/FormValidationTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/LoginTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/TabbedContentTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/Templates.stories.tsxpackages/oxygen-ui-docs/stories/Templates/WizardTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Theming/Colors.stories.tsxpackages/oxygen-ui-docs/stories/Theming/ThemeSwitcher.stories.tsxpackages/oxygen-ui-docs/stories/Theming/useThemeContent.stories.tsxpackages/oxygen-ui-docs/stories/Utils/Modal.stories.tsxpackages/oxygen-ui-docs/stories/Utils/Popover.stories.tsxpackages/oxygen-ui-docs/stories/Utils/Popper.stories.tsxpackages/oxygen-ui-docs/stories/Utils/useColorScheme.stories.tsxpackages/oxygen-ui-docs/stories/Welcome.stories.tsxpackages/oxygen-ui/src/animations/ParticleBackground/ParticleBackground.tsxpackages/oxygen-ui/src/components/AppBreadcrumbs/AppBreadcrumbs.tsxpackages/oxygen-ui/src/components/CodeBlock/CodeBlock.tsxpackages/oxygen-ui/src/components/ColorSchemeToggle/ColorSchemeToggle.tsxpackages/oxygen-ui/src/components/ComplexSelect/ComplexSelect.tsxpackages/oxygen-ui/src/components/Footer/FooterVersion.tsxpackages/oxygen-ui/src/components/Form/ElementWrapper.tsxpackages/oxygen-ui/src/components/Header/HeaderBrand.tsxpackages/oxygen-ui/src/components/Header/HeaderToggle.tsxpackages/oxygen-ui/src/components/ListingTable/ListingTable/ListingTableDataGrid.tsxpackages/oxygen-ui/src/components/ListingTable/shared/ListingTableDensityControl.tsxpackages/oxygen-ui/src/components/ListingTable/shared/ListingTableToolbar.tsxpackages/oxygen-ui/src/components/NotificationBanner/NotificationBanner.tsxpackages/oxygen-ui/src/components/NotificationPanel/NotificationHeaderClose.tsxpackages/oxygen-ui/src/components/NotificationPanel/NotificationItem.tsxpackages/oxygen-ui/src/components/PageTitle/PageTitleBackButton.tsxpackages/oxygen-ui/src/components/SearchBar/SearchBar.tsxpackages/oxygen-ui/src/components/SearchBar/SearchBarBase.tsxpackages/oxygen-ui/src/components/Sidebar/SidebarItem.tsxpackages/oxygen-ui/src/components/StatCard/StatCard.tsxpackages/oxygen-ui/src/components/ThemeSwitcher/ThemeSelect.tsxpackages/oxygen-ui/src/components/UserMenu/UserMenuTrigger.tsxpackages/oxygen-ui/src/components/accessibility.test.tsxpackages/oxygen-ui/src/styles/OxygenThemeBase.tspnpm-workspace.yaml
ajirthan
force-pushed
the
feat/a11y-wcag-baseline
branch
from
July 20, 2026 08:43
ef16ee8 to
5ed2b51
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/oxygen-ui-docs/ACCESSIBILITY.md`:
- Around line 18-21: Update the audit results table and the corresponding
exception summary in ACCESSIBILITY.md to use consistent units: either reconcile
the listed rule counts with the 48 failed stories or explicitly label them as
violation instances. Clarify whether the 35 exception-bearing stories counts
overlapping stories between the color-contrast and nested-interactive groups,
and ensure the referenced sections use the same definitions.
- Line 85: Update the “Focus-indicator contrast” checklist entry in
ACCESSIBILITY.md to separate the WCAG 2.4.7 visible-focus verification from the
WCAG 1.4.11 focus-indicator contrast check, keeping the existing theme,
color-scheme, and :focus-visible audit details with the appropriate check.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 469ab9eb-9343-4ae2-b76b-4ef13b104a4b
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (87)
.github/workflows/pr-builder.ymlpackages/oxygen-ui-docs/.storybook/main.jspackages/oxygen-ui-docs/.storybook/preview.jspackages/oxygen-ui-docs/ACCESSIBILITY.mdpackages/oxygen-ui-docs/package.jsonpackages/oxygen-ui-docs/stories/Accessibility.stories.tsxpackages/oxygen-ui-docs/stories/Animations/ParticleBackground.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/AppBreadcrumbs.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/AppShell.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/CodeBlock.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/Footer.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/Header.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/ListingTable.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/NotificationBanner.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/NotificationPanel.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/PageTitle.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/Sidebar.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/UserMenu.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/useAppShell.stories.tsxpackages/oxygen-ui-docs/stories/DataDisplay/Tooltip.stories.tsxpackages/oxygen-ui-docs/stories/Feedback/Backdrop.stories.tsxpackages/oxygen-ui-docs/stories/Feedback/Dialog.stories.tsxpackages/oxygen-ui-docs/stories/Feedback/Progress.stories.tsxpackages/oxygen-ui-docs/stories/Feedback/Snackbar.stories.tsxpackages/oxygen-ui-docs/stories/GettingStarted.stories.tsxpackages/oxygen-ui-docs/stories/HowToContribute.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/Button.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/ButtonGroup.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/Checkbox.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/ComplexSelect.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/NumberField.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/SearchBar.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/Select.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/Slider.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/Switch.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/TransferList.stories.tsxpackages/oxygen-ui-docs/stories/Layout/Container.stories.tsxpackages/oxygen-ui-docs/stories/Layout/ImageList.stories.tsxpackages/oxygen-ui-docs/stories/Navigation/BottomNavigation.stories.tsxpackages/oxygen-ui-docs/stories/Navigation/Drawer.stories.tsxpackages/oxygen-ui-docs/stories/Navigation/Link.stories.tsxpackages/oxygen-ui-docs/stories/Navigation/Menu.stories.tsxpackages/oxygen-ui-docs/stories/Navigation/Stepper.stories.tsxpackages/oxygen-ui-docs/stories/Navigation/Tabs.stories.tsxpackages/oxygen-ui-docs/stories/Surfaces/AppBar.stories.tsxpackages/oxygen-ui-docs/stories/Surfaces/ClickableCard.stories.tsxpackages/oxygen-ui-docs/stories/Templates/CreateServiceFormTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/DashboardTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/EmptyStateTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/FormValidationTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/LoginTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/TabbedContentTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/Templates.stories.tsxpackages/oxygen-ui-docs/stories/Templates/WizardTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Theming/Colors.stories.tsxpackages/oxygen-ui-docs/stories/Theming/ThemeSwitcher.stories.tsxpackages/oxygen-ui-docs/stories/Theming/useThemeContent.stories.tsxpackages/oxygen-ui-docs/stories/Utils/Modal.stories.tsxpackages/oxygen-ui-docs/stories/Utils/Popover.stories.tsxpackages/oxygen-ui-docs/stories/Utils/Popper.stories.tsxpackages/oxygen-ui-docs/stories/Utils/useColorScheme.stories.tsxpackages/oxygen-ui-docs/stories/Welcome.stories.tsxpackages/oxygen-ui/src/animations/ParticleBackground/ParticleBackground.tsxpackages/oxygen-ui/src/components/AppBreadcrumbs/AppBreadcrumbs.tsxpackages/oxygen-ui/src/components/CodeBlock/CodeBlock.tsxpackages/oxygen-ui/src/components/ColorSchemeToggle/ColorSchemeToggle.tsxpackages/oxygen-ui/src/components/ComplexSelect/ComplexSelect.tsxpackages/oxygen-ui/src/components/Footer/FooterVersion.tsxpackages/oxygen-ui/src/components/Form/ElementWrapper.tsxpackages/oxygen-ui/src/components/Header/HeaderBrand.tsxpackages/oxygen-ui/src/components/Header/HeaderToggle.tsxpackages/oxygen-ui/src/components/ListingTable/ListingTable/ListingTableDataGrid.tsxpackages/oxygen-ui/src/components/ListingTable/shared/ListingTableDensityControl.tsxpackages/oxygen-ui/src/components/ListingTable/shared/ListingTableToolbar.tsxpackages/oxygen-ui/src/components/NotificationBanner/NotificationBanner.tsxpackages/oxygen-ui/src/components/NotificationPanel/NotificationHeaderClose.tsxpackages/oxygen-ui/src/components/NotificationPanel/NotificationItem.tsxpackages/oxygen-ui/src/components/PageTitle/PageTitleBackButton.tsxpackages/oxygen-ui/src/components/SearchBar/SearchBar.tsxpackages/oxygen-ui/src/components/SearchBar/SearchBarBase.tsxpackages/oxygen-ui/src/components/Sidebar/SidebarItem.tsxpackages/oxygen-ui/src/components/StatCard/StatCard.tsxpackages/oxygen-ui/src/components/ThemeSwitcher/ThemeSelect.tsxpackages/oxygen-ui/src/components/UserMenu/UserMenuTrigger.tsxpackages/oxygen-ui/src/components/accessibility.test.tsxpackages/oxygen-ui/src/styles/OxygenThemeBase.tspnpm-workspace.yaml
🚧 Files skipped from review as they are similar to previous changes (69)
- packages/oxygen-ui-docs/stories/Navigation/Stepper.stories.tsx
- packages/oxygen-ui-docs/stories/Utils/Popper.stories.tsx
- packages/oxygen-ui-docs/stories/Navigation/Drawer.stories.tsx
- packages/oxygen-ui-docs/stories/Templates/DashboardTemplate.stories.tsx
- packages/oxygen-ui-docs/stories/Welcome.stories.tsx
- packages/oxygen-ui-docs/stories/Theming/useThemeContent.stories.tsx
- packages/oxygen-ui/src/components/StatCard/StatCard.tsx
- packages/oxygen-ui-docs/stories/AppElements/AppShell.stories.tsx
- packages/oxygen-ui-docs/stories/AppElements/CodeBlock.stories.tsx
- packages/oxygen-ui-docs/stories/Feedback/Dialog.stories.tsx
- packages/oxygen-ui/src/components/PageTitle/PageTitleBackButton.tsx
- packages/oxygen-ui-docs/stories/Utils/Modal.stories.tsx
- packages/oxygen-ui-docs/stories/Utils/useColorScheme.stories.tsx
- packages/oxygen-ui/src/components/NotificationPanel/NotificationItem.tsx
- packages/oxygen-ui-docs/stories/Templates/WizardTemplate.stories.tsx
- packages/oxygen-ui-docs/stories/Navigation/Link.stories.tsx
- packages/oxygen-ui-docs/stories/Theming/Colors.stories.tsx
- packages/oxygen-ui-docs/stories/Templates/CreateServiceFormTemplate.stories.tsx
- packages/oxygen-ui-docs/stories/Layout/Container.stories.tsx
- packages/oxygen-ui-docs/stories/Templates/LoginTemplate.stories.tsx
- packages/oxygen-ui-docs/stories/Feedback/Backdrop.stories.tsx
- packages/oxygen-ui/src/components/ColorSchemeToggle/ColorSchemeToggle.tsx
- packages/oxygen-ui-docs/stories/Surfaces/ClickableCard.stories.tsx
- packages/oxygen-ui-docs/stories/AppElements/PageTitle.stories.tsx
- packages/oxygen-ui-docs/stories/Accessibility.stories.tsx
- packages/oxygen-ui/src/components/Header/HeaderToggle.tsx
- packages/oxygen-ui-docs/stories/Feedback/Progress.stories.tsx
- packages/oxygen-ui/src/components/Footer/FooterVersion.tsx
- packages/oxygen-ui/src/components/CodeBlock/CodeBlock.tsx
- packages/oxygen-ui-docs/stories/Inputs/Button.stories.tsx
- packages/oxygen-ui-docs/stories/AppElements/NotificationBanner.stories.tsx
- packages/oxygen-ui-docs/stories/AppElements/Header.stories.tsx
- packages/oxygen-ui-docs/stories/Templates/TabbedContentTemplate.stories.tsx
- packages/oxygen-ui-docs/stories/Surfaces/AppBar.stories.tsx
- packages/oxygen-ui-docs/stories/DataDisplay/Tooltip.stories.tsx
- packages/oxygen-ui/src/styles/OxygenThemeBase.ts
- packages/oxygen-ui-docs/package.json
- packages/oxygen-ui/src/components/SearchBar/SearchBar.tsx
- packages/oxygen-ui/src/components/NotificationPanel/NotificationHeaderClose.tsx
- packages/oxygen-ui-docs/stories/Templates/Templates.stories.tsx
- packages/oxygen-ui-docs/stories/Inputs/NumberField.stories.tsx
- packages/oxygen-ui/src/components/Form/ElementWrapper.tsx
- packages/oxygen-ui-docs/stories/AppElements/AppBreadcrumbs.stories.tsx
- packages/oxygen-ui/src/components/ThemeSwitcher/ThemeSelect.tsx
- packages/oxygen-ui-docs/stories/Inputs/ComplexSelect.stories.tsx
- packages/oxygen-ui-docs/stories/Templates/FormValidationTemplate.stories.tsx
- packages/oxygen-ui/src/components/ListingTable/ListingTable/ListingTableDataGrid.tsx
- packages/oxygen-ui-docs/stories/Inputs/Select.stories.tsx
- packages/oxygen-ui-docs/stories/HowToContribute.stories.tsx
- packages/oxygen-ui/src/components/NotificationBanner/NotificationBanner.tsx
- packages/oxygen-ui-docs/stories/Animations/ParticleBackground.stories.tsx
- packages/oxygen-ui-docs/stories/GettingStarted.stories.tsx
- packages/oxygen-ui-docs/stories/Utils/Popover.stories.tsx
- packages/oxygen-ui/src/components/SearchBar/SearchBarBase.tsx
- packages/oxygen-ui/src/components/AppBreadcrumbs/AppBreadcrumbs.tsx
- packages/oxygen-ui-docs/.storybook/preview.js
- packages/oxygen-ui/src/components/UserMenu/UserMenuTrigger.tsx
- packages/oxygen-ui/src/components/ListingTable/shared/ListingTableToolbar.tsx
- packages/oxygen-ui-docs/stories/AppElements/useAppShell.stories.tsx
- packages/oxygen-ui-docs/stories/AppElements/ListingTable.stories.tsx
- packages/oxygen-ui-docs/stories/Inputs/SearchBar.stories.tsx
- packages/oxygen-ui-docs/stories/Layout/ImageList.stories.tsx
- packages/oxygen-ui/src/components/accessibility.test.tsx
- packages/oxygen-ui-docs/stories/Inputs/Checkbox.stories.tsx
- packages/oxygen-ui/src/components/Sidebar/SidebarItem.tsx
- packages/oxygen-ui-docs/stories/AppElements/NotificationPanel.stories.tsx
- packages/oxygen-ui-docs/stories/Inputs/Slider.stories.tsx
- packages/oxygen-ui/src/animations/ParticleBackground/ParticleBackground.tsx
- packages/oxygen-ui/src/components/ComplexSelect/ComplexSelect.tsx
…archPlaceholder is empty
…stead of inputProps
Click/keyboard-opened menus ignore mouse-leave; hover-opened menus use a short leave delay so the pointer can reach the sibling popover paper.
Call onToggleExpand on hover-open only when the item is not already expanded, so the full sidebar reflects nested items inspected via hover.
Treat only trimmed non-empty aria values as accessible names so a whitespace aria-label cannot block placeholder-based naming.
Spread consumer props first, then apply menu-owned aria-controls, aria-expanded, and a meaningful aria-label so open state cannot be clobbered.
…d contrast checks
ajirthan
force-pushed
the
feat/a11y-wcag-baseline
branch
from
July 21, 2026 08:58
1262b8c to
2649d94
Compare
brionmario
approved these changes
Jul 23, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
@storybook/addon-a11y+ test-runner CI (WCAG 2.1 A/AA tags; fail PRs on new violations)#FF7300,Form.CardButton) with linked upstream issuespackages/oxygen-ui-docs/ACCESSIBILITY.md+ Storybook page) and contributor policyRelated to #557 (Phase 1 — WCAG 2.1 AA baseline bootstrap). Does not close the epic (Phase 2 / WCAG 2.2 AA remains open).
Follow-ups
Test plan
pnpm --filter @wso2/oxygen-ui test(includesaccessibility.test.tsx)pnpm build:storybook+pnpm --filter @wso2/oxygen-ui-docs test:storybook:ciwso2/oxygen-uiissues (A11y: Brand primary #FF7300 fails WCAG AA 4.5:1 text contrast (Classic/WSO2 themes) #558 / A11y: Form.CardButton nests interactive controls inside a button (nested-interactive) #562)