UI: Add accessibility statement page #33455

Sidnioulz · 2026-01-02T16:26:55Z

Closes #33453

What I did

Created an accessibility statement page, ahead of the blog post on accessibility, so we can reference it.

Added an accessibility statement page
Added a link to the page in the settings menu and tablist
Added a link to the page in the mobile sidebar heading
Cleaned up some mobile sidebar prop drilling in favour of already-in-use useLayout hook
Added stories for mobile version of the sidebar Menu

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

Open Storybook
In desktop mode, in sidebar settings menu, click Accessibility statement
In mobile mode, open the sidebar and click the accessibility icon

Documentation

ø

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

Release Notes

New Features
- Added a comprehensive accessibility statement detailing conformance, accessibility measures, feedback channels, compatibility information, and technical specifications.
- Accessibility statement now accessible via a new link in the sidebar and a dedicated button in the mobile menu.
- New settings tab for quick access to the accessibility statement.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

nx-cloud · 2026-01-02T16:27:26Z

View your CI Pipeline Execution ↗ for commit c296c2e

Command	Status	Duration	Result
`nx run-many -t compile,check,knip,test,pretty-d...`	✅ Succeeded	8m 23s	View ↗

☁️ Nx Cloud last updated this comment at 2026-01-02 16:39:55 UTC

coderabbitai · 2026-01-02T16:31:00Z

📝 Walkthrough

Walkthrough

This PR introduces a comprehensive accessibility statement feature to Storybook, including new UI components for desktop and mobile views, layout state management for mobile panel visibility, menu and sidebar integration, a settings page for the accessibility statement, and corresponding Storybook stories for testing.

Changes

Cohort / File(s)	Summary
Accessibility Statement Components `A11yStatement.tsx`, `A11yStatementPage.tsx`	Two new components rendering accessibility statement content with styled UI elements, keyboard shortcut displays, and typography-based layout for both component-level reuse and full settings page display.
Mobile Accessibility Statement `MobileA11yStatement.tsx`, `MobileA11yStatement.stories.tsx`	New mobile panel component with slide animations and back button, plus full Storybook story setup with light/dark theme variants and programmatic open/close testing.
Layout State Management `LayoutProvider.tsx`	Added `isMobileA11yStatementOpen` boolean state and `setMobileA11yStatementOpen` setter to layout context, exposed through context value and dependency arrays.
Mobile Navigation Integration `MobileMenuDrawer.tsx`	MobileA11yStatement component now rendered inside drawer modal alongside children.
Sidebar and Heading Components `Sidebar.tsx`, `Heading.tsx`, `Menu.tsx` (components/)	Removed `onMenuClick` prop across Sidebar and Heading; added `a11yStatementHref` prop to Heading for conditional accessibility statement link rendering; Menu.tsx updated with AccessibilityIcon import and mobile button to trigger `setMobileA11yStatementOpen`.
Sidebar Stories `Heading.stories.tsx`, `Menu.stories.tsx`	Added `AccessibilityStatementLinkFocused` story for Heading; four new mobile-layout stories (Mobile, MobileA11yStatement, MobileAbout, MobileClose) in Menu.stories with state toggle verification.
Menu Configuration `Menu.tsx` (container/), `Sidebar.tsx` (container/)	New accessibility statement menu item with AccessibilityIcon added to menu structure; removed onMenuClick prop and SidebarProps import from SidebarContainer.
Settings Integration `settings/index.tsx`	New "Accessibility statement" route added to settings tabs, rendering A11yStatementPage at path "accessibility-statement".
App Root `App.tsx`	Removed useLayout import and onMenuClick handler; Sidebar no longer receives onMenuClick prop.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Menu
    participant LayoutProvider
    participant MobileA11yStatement
    participant Settings/Router
    participant A11yStatementPage

    rect rgb(200, 220, 255)
    note over User,MobileA11yStatement: Mobile Flow
    User->>Menu: Clicks Accessibility Icon
    Menu->>LayoutProvider: setMobileA11yStatementOpen(true)
    LayoutProvider->>MobileA11yStatement: isMobileA11yStatementOpen = true
    MobileA11yStatement->>MobileA11yStatement: Render with slideFromRight animation
    MobileA11yStatement->>User: Display accessibility statement panel
    User->>MobileA11yStatement: Clicks Back button
    MobileA11yStatement->>LayoutProvider: setMobileA11yStatementOpen(false)
    LayoutProvider->>MobileA11yStatement: Unmount with slideToRight animation
    end

    rect rgb(220, 255, 200)
    note over User,A11yStatementPage: Desktop/Settings Flow
    User->>Menu: Clicks Accessibility Statement menu item
    Menu->>Settings/Router: Navigate to /settings/accessibility-statement
    Settings/Router->>A11yStatementPage: Route activated
    A11yStatementPage->>User: Display accessibility statement page
    end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

storybookjs/storybook#32458 — Both PRs make overlapping code-level changes to layout context state, sidebar/menu/heading components, and mobile navigation integration for accessibility features.
storybookjs/storybook#32795 — Both PRs modify the same sidebar, menu, heading, and layout context files with related state and prop changes.
storybookjs/storybook#33140 — Both PRs make direct code changes to sidebar-related Menu.tsx and story files with similar component integration patterns.

✨ Finishing touches

📝 Generate docstrings

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (3)

code/core/src/manager/components/a11y/A11yStatement.tsx (1)

32-186: Extract the hardcoded date to improve maintainability.

The accessibility statement is well-structured. However, the date on line 184 is hardcoded as a string literal ("2 January 2026"). Consider extracting this to a constant at the top of the file or in a config file to simplify future updates without modifying the component directly.

The browser version numbers on line 87 (Chrome 131, Edge 134, Firefox 136, Safari 18.3, Opera 117) are also hardcoded. If these versions are tied to Storybook's official compatibility policy, consider defining them as a constant to ensure consistency across documentation and code.
code/core/src/manager/components/sidebar/Heading.tsx (1)
97-103: Remove rel="canonical" — it's not semantically appropriate here.

The rel="canonical" attribute is intended for <link> elements in the document <head> to indicate the preferred URL for SEO deduplication. It has no meaningful effect on navigation anchors and may confuse future maintainers.

Additionally, tabIndex={0} is redundant since anchor elements with an href attribute are natively keyboard-focusable.
🔎 Proposed fix
       {a11yStatementHref && (
         <SkipToCanvasLink ariaLabel={false} asChild>
-          <a href={a11yStatementHref} rel="canonical" tabIndex={0}>
+          <a href={a11yStatementHref}>
             Accessibility Statement
           </a>
         </SkipToCanvasLink>
       )}
code/core/src/manager/components/mobile/a11y/MobileA11yStatement.stories.tsx (1)
63-68: Consider using waitFor instead of hardcoded delay for more reliable tests.

The hardcoded 1000ms delay can be flaky (too short on slow CI) or wasteful (too long when rendering is fast). If this is primarily for Chromatic visual testing, it may be acceptable, but for interaction testing reliability, consider using waitFor.
🔎 Proposed alternative
+import { waitFor, within } from 'storybook/test';
+
 export const Closed: Story = {
   play: async ({ canvasElement }) => {
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    const closeButton = within(canvasElement).getByText('Back');
-    closeButton.click();
+    const canvas = within(canvasElement);
+    await waitFor(() => canvas.getByText('Back'));
+    const closeButton = canvas.getByText('Back');
+    await closeButton.click();
   },
 };

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7f193d3 and c296c2e.

📒 Files selected for processing (15)

code/core/src/manager/App.tsx
code/core/src/manager/components/a11y/A11yStatement.tsx
code/core/src/manager/components/layout/LayoutProvider.tsx
code/core/src/manager/components/mobile/a11y/MobileA11yStatement.stories.tsx
code/core/src/manager/components/mobile/a11y/MobileA11yStatement.tsx
code/core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx
code/core/src/manager/components/sidebar/Heading.stories.tsx
code/core/src/manager/components/sidebar/Heading.tsx
code/core/src/manager/components/sidebar/Menu.stories.tsx
code/core/src/manager/components/sidebar/Menu.tsx
code/core/src/manager/components/sidebar/Sidebar.tsx
code/core/src/manager/container/Menu.tsx
code/core/src/manager/container/Sidebar.tsx
code/core/src/manager/settings/A11yStatementPage.tsx
code/core/src/manager/settings/index.tsx

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{js,jsx,ts,tsx,json,md,html,css,scss}