Skip to content

Core: Remove maximum-scale=1 from viewport meta tag#31283

Merged
ghengeveld merged 6 commits intostorybookjs:nextfrom
yatishgoel:fix/viewport-zoom-accessibility
May 8, 2025
Merged

Core: Remove maximum-scale=1 from viewport meta tag#31283
ghengeveld merged 6 commits intostorybookjs:nextfrom
yatishgoel:fix/viewport-zoom-accessibility

Conversation

@yatishgoel
Copy link
Copy Markdown
Contributor

@yatishgoel yatishgoel commented Apr 28, 2025

Closes #31272

What I did

Removed maximum-scale=1 from the viewport meta tag in the Storybook manager UI. This property was originally introduced to prevent mobile browsers from zooming in onto a focused input field, specifically the search field. To remedy the original issue, the font size for the search input was bumped to 16px on mobile, and element padding/sizing for mobile has been updated accordingly.

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

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

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 canary-release-pr.yml --field pr=<PR_NUMBER>

Greptile Summary

Removed 'maximum-scale=1' from the viewport meta tag in the HTML template to improve accessibility, allowing users to zoom content up to 200% as per WCAG 2.1 Success Criterion 1.4.4.

  • Modified code/core/assets/server/template.ejs to remove maximum-scale restriction, enabling zoom functionality for users with visual impairments
  • Change ensures compliance with WCAG accessibility standards for text resizing

Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot left a comment

Choose a reason for hiding this comment

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

LGTM

1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented Apr 28, 2025

View your CI Pipeline Execution ↗ for commit 1b26019.

Command Status Duration Result
nx run-many -t build --parallel=3 ✅ Succeeded 1m 45s View ↗

☁️ Nx Cloud last updated this comment at 2025-05-07 15:52:03 UTC

Copy link
Copy Markdown
Member

@Sidnioulz Sidnioulz left a comment

Choose a reason for hiding this comment

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

See #31272 (comment). We'll need to check that the original bug no longer exists.

@valentinpalkovic
Copy link
Copy Markdown
Contributor

@ghengeveld Can you please verify that removing the attribute doesn't reintroduce the issues closed by this PR?

@ghengeveld ghengeveld changed the title fix(a11y): Remove maximum-scale=1 from viewport meta tag Core: Remove maximum-scale=1 from viewport meta tag May 7, 2025
Comment thread code/core/src/manager/components/sidebar/Search.tsx
@ghengeveld ghengeveld merged commit 51040e5 into storybookjs:next May 8, 2025
54 checks passed
@github-actions github-actions Bot mentioned this pull request May 8, 2025
29 tasks
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.

[Bug]: Accessibility issue: maximum-scale=1 added to viewport meta tag in the <head> prevents zooming

4 participants