Visitar URL original
USWDS - Storybook: Initializing more stories with enhanced components by olsonap · Pull Request #6695 · uswds/uswds · GitHub
Skip to content

USWDS - Storybook: Initializing more stories with enhanced components - #6695

Draft
olsonap wants to merge 5 commits into
uswds:developfrom
olsonap:initializing-more-stories-with-enhanced-components
Draft

USWDS - Storybook: Initializing more stories with enhanced components#6695
olsonap wants to merge 5 commits into
uswds:developfrom
olsonap:initializing-more-stories-with-enhanced-components

Conversation

@olsonap

@olsonap olsonap commented Jun 5, 2026

Copy link
Copy Markdown
Contributor

Summary

Fixed remaining stories with enhanced components. The remaining stories not captured in #6664 have been updated to initialize the enhanced components on mount.

Breaking change

This is not a breaking change.

Related issue

Closes #6694

Related pull requests

This PR is for a branch off #6692.
I'm expecting that PR to be merged first, as some of these changes require those changes in order to be viewable.

Preview link

Not available

Problem statement

The USWDS Storybook app doesn't initialize a few enhanced components when the story renders.
Some of the consequences:

-- The banner and header submenu dropdown is expanded by default in each of the "PAGES" stories.
-- The date range picker with restricted dates stories don't apply the upper and lower bounds of the date range.
-- On small screens, the big footer variant is meant to render with the nav items collapsed into accordions, but instead they are expanded.
-- Input mask doesn't enforce any pattern.
-- Validation appears to work but dumps errors into the console.

All of these issues are resolved by initializing the appropriate enhanced components on mount.

Solution

The solution is to initialize the component with .on() on mount.

Major changes

Not applicable

Testing and review

Clone the repo, checkout this branch, execute npm install && npm start.
Manipulate and visually inspect the components affected by this PR.

Here are screenshots to show it's resolved:
image
image
image
image
image
Warnings here, but no errors:
image
Errors previously seen:
image

@olsonap
Adding aria disabled to usa-input-mask--content to pass axe because t…
b4652d8 
…he span renders directly over and outside of the disabled input
@annepetersen annepetersen added the Storybook Work on component stories, previews, or the Storybook development environment. label Jun 30, 2026
@ryparker

ryparker commented Sep 17, 2026

Copy link
Copy Markdown
Member

@coderabbitai full review

@coderabbitai

coderabbitai Bot commented Sep 17, 2026 •
edited
Loading

Copy link
Copy Markdown
✅ Action performed

Full review finished.

@coderabbitai

coderabbitai Bot commented Sep 17, 2026 •
edited
Loading

Copy link
Copy Markdown

Review Change StackReview Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: QUIET

Plan: Advanced

Run ID: 0e6f3bb6-1c27-4ee5-af98-397aaeea04d5

📥 Commits

Reviewing files that changed from the base of the PR and between 6e0ef7a and b4652d8.

📒 Files selected for processing (21)
  • packages/templates/usa-create-account/usa-create-account.stories.js
  • packages/templates/usa-documentation/usa-docs.stories.js
  • packages/templates/usa-error/usa-error.stories.js
  • packages/templates/usa-landing/usa-landing.stories.js
  • packages/templates/usa-sign-in/usa-sign-in.stories.js
  • packages/usa-banner/src/usa-banner.stories.js
  • packages/usa-button/src/usa-button.stories.js
  • packages/usa-checkbox/src/usa-checkbox.stories.js
  • packages/usa-date-picker/src/usa-date-picker.stories.js
  • packages/usa-date-range-picker/src/date-range-picker.stories.js
  • packages/usa-file-input/src/usa-file-input.stories.js
  • packages/usa-footer/src/usa-footer.stories.js
  • packages/usa-form/src/usa-form.stories.js
  • packages/usa-in-page-navigation/src/usa-in-page-navigation.stories.js
  • packages/usa-input-mask/src/index.js
  • packages/usa-input-mask/src/usa-input-mask.stories.js
  • packages/usa-input/src/usa-input.stories.js
  • packages/usa-radio/src/usa-radio.stories.js
  • packages/usa-range/src/usa-range.stories.js
  • packages/usa-table/src/usa-table.stories.js
  • packages/usa-validation/src/usa-validation.stories.js

Included review availability: Your plan provides up to 10 included reviews per hour; 1 remains after this review.

📝 Summary

Summary by CodeRabbit

  • New Features

    • Added Range component examples for nonzero minimum values and smaller step increments.
    • Expanded Storybook controls with clearer defaults and interactive options across buttons, forms, inputs, dates, tables, and other components.

  • Bug Fixes

    • Improved accessibility for masked inputs by marking visual mask content as unavailable when the associated input is disabled.

  • Documentation

    • Updated component demonstrations to provide more consistent, predictable previews across templates and interactive components.

Walkthrough

Storybook stories now control component initialization around rendering, use explicit args for defaults, add range scenarios, and mark generated input-mask content as disabled when its input is disabled.

Changes

Storybook behavior updates

Layer / File(s) Summary
Component initialization decorators
packages/templates/..., packages/usa-banner/..., packages/usa-date-range-picker/..., packages/usa-footer/..., packages/usa-input-mask/..., packages/usa-validation/...		 Decorators disable component behavior before story rendering and schedule re-enablement with requestAnimationFrame.
Explicit story arguments
packages/templates/usa-documentation/..., packages/usa-button/..., packages/usa-checkbox/..., packages/usa-date-picker/..., packages/usa-date-range-picker/..., packages/usa-file-input/..., packages/usa-form/..., packages/usa-in-page-navigation/..., packages/usa-input/..., packages/usa-radio/..., packages/usa-range/..., packages/usa-table/...		 Story defaults and scenario-specific values move from argTypes.defaultValue to args. The range stories add nonzero-minimum and small-step examples.
Input mask disabled-state output
packages/usa-input-mask/src/index.js		 Generated mask content receives aria-disabled="true" when the associated input is disabled or explicitly aria-disabled.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~30 minutes

Change: Bug fix · Severity of issue fixed: Medium

Suggested labels: Is: Breaking 🔴, Affects: Accessibility 🟡, Context: JavaScript

Merge Risk: ⚪ Minimal · up to b4652

Storybook initialization runs in supported browsers that provide requestAnimationFrame, so no actionable merge risk remains.

🚥 Pre-merge checks | ✅ 7 | ❌ 3

❌ Failed checks (3 warnings)

Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning packages/usa-input-mask/src/index.js changes runtime component behavior by adding aria-disabled="true" to mask content. Issue #6694 concerns Storybook initialization and does not require this prod… Remove the unrelated packages/usa-input-mask/src/index.js change, or link it to a separate issue that requires the behavior.
Regression Test Targets The Change ⚠️ Warning The PR changes production behavior in packages/usa-input-mask/src/index.js: createMaskedInputShell now sets aria-disabled="true" on .usa-input-mask--content for disabled or aria-disabled inp… Add or modify a Mocha spec under packages/usa-input-mask/src/test/ to initialize masks for both a natively disabled input and an input with aria-disabled="true", then assert that .usa-input-mask--content has aria-disabled="true". In…
Accessibility Verification Declared ⚠️ Warning The check applies because the PR adds the aria-disabled attribute to input-mask content. The PR description reports visual inspection and screenshots, but it does not name any assistive technology, … Document coverage for the changed input-mask behavior. Include assistive technology and browser combinations, such as NVDA with Firefox or Chrome, JAWS with Chrome or Edge, and VoiceOver with Safari. Record verification for native `disabled…
✅ Passed checks (7 passed)
Check name Status Explanation
Title check ✅ Passed The title follows the required format, "USWDS - : ", and accurately describes Storybook initialization updates.
Description check ✅ Passed The description clearly explains the Storybook initialization changes, affected components, problem statement, solution, testing, and related issue.
Linked Issues check ✅ Passed Issue #6694 requires Storybook enhanced components to initialize after mount. The changed stories disable the relevant modules before Story() and call .on() in requestAnimationFrame. The documen…
Breaking Change Declared ✅ Passed The description contains exactly one allowed statement: “This is not a breaking change.” The authoritative diff changes only Storybook stories and adds aria-disabled behavior in `packages/usa-input-…
No New Runtime Dependency ✅ Passed PASS. The pull request does not change any package.json dependencies field; both reviewed revisions contain only "lit": "3.3.2", and no package manifest changed. The only changed non-story production …
New Api Surface Follow-Ups ✅ Passed PASS — The reviewed diff does not add a $theme-* setting, public Sass mixin or function forwarded through uswds-core, data-* attribute constant, or .usa-* class/modifier. It adds Storybook dec…
Theme Token Discipline ✅ Passed PASS. The authoritative pull-request diff changes 21 JavaScript files under packages and changes no *.scss files. Therefore, the theme-token failure conditions do not apply to this pull request.
Full details: Out of Scope Changes check

Explanation

packages/usa-input-mask/src/index.js changes runtime component behavior by adding aria-disabled="true" to mask content. Issue #6694 concerns Storybook initialization and does not require this production-source change. The available issue evidence does not connect this change to the linked objective.

Full details: Regression Test Targets The Change

Explanation

The PR changes production behavior in packages/usa-input-mask/src/index.js: createMaskedInputShell now sets aria-disabled="true" on .usa-input-mask--content for disabled or aria-disabled inputs. The review diff adds no Mocha spec or sass-true test. Existing input-mask specs assert mask text only and do not assert this new attribute. The Storybook files do not satisfy the regression-test requirement.

Resolution

Add or modify a Mocha spec under packages/usa-input-mask/src/test/ to initialize masks for both a natively disabled input and an input with aria-disabled="true", then assert that .usa-input-mask--content has aria-disabled="true". Include an enabled-input assertion if needed to verify the conditional path. The assertions must fail against the base revision.

Full details: Accessibility Verification Declared

Explanation

The check applies because the PR adds the aria-disabled attribute to input-mask content. The PR description reports visual inspection and screenshots, but it does not name any assistive technology, browser combinations, or accessibility scenarios that were verified. The required accessibility test matrix is missing.

Resolution

Document coverage for the changed input-mask behavior. Include assistive technology and browser combinations, such as NVDA with Firefox or Chrome, JAWS with Chrome or Edge, and VoiceOver with Safari. Record verification for native disabled inputs and aria-disabled="true" inputs, including keyboard focus and interaction behavior. Do not report an announcement-behavior verdict without hands-on assistive-technology testing.

Comment @coderabbitai help to get the list of available commands.

@ryparker ryparker mentioned this pull request Sep 18, 2026
Open
2 tasks done
@Raydman Raydman mentioned this pull request Sep 18, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

Storybook Work on component stories, previews, or the Storybook development environment.

Projects

No open projects
USWDS Core Project Data
Status: Triage

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

USWDS - Bug: A few stories missed in recent enhancement PR

3 participants

@olsonap @ryparker @annepetersen