Skip to content

fix(a11y): Add email label for accessibility - #437

Open
code-qtzl wants to merge 2 commits into
storybookjs:mainfrom
code-qtzl:fix/accessibility-newsletter-email
Open

fix(a11y): Add email label for accessibility#437
code-qtzl wants to merge 2 commits into
storybookjs:mainfrom
code-qtzl:fix/accessibility-newsletter-email

Conversation

@code-qtzl

@code-qtzl code-qtzl commented Jun 25, 2026

Copy link
Copy Markdown

Closes: #435

Description

Adds an accessible label to the email <input> in the global footer newsletter form.
The field previously had only a placeholder, which is not a valid label substitute, screen readers announce it as an unlabeled "edit text" field.

Fix

Add a visually-hidden label associated to the input:

+ <label htmlFor="email" className="ui-sr-only">Email address</label>
  <input id="email" type="email" name="email" placeholder="you@domain.com" ... />

Summary by CodeRabbit

  • Accessibility
    • Added a screen-reader-only label to the email field in the newsletter form, improving usability for assistive technology users.

@netlify

netlify Bot commented Jun 25, 2026

Copy link
Copy Markdown

Deploy Preview for storybook-addon-catalog ready!

Name Link
🔨 Latest commit b9eb42c
🔍 Latest deploy log https://app.netlify.com/projects/storybook-addon-catalog/deploys/6a5f637b17540a000753c5dc
😎 Deploy Preview https://deploy-preview-437--storybook-addon-catalog.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Jun 25, 2026

Copy link
Copy Markdown

Deploy Preview for storybook-frontpage ready!

Name Link
🔨 Latest commit b9eb42c
🔍 Latest deploy log https://app.netlify.com/projects/storybook-frontpage/deploys/6a5f637b3daed80008eb25a9
😎 Deploy Preview https://deploy-preview-437--storybook-frontpage.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai

coderabbitai Bot commented Jun 25, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9782bb64-4911-4a0f-8b45-4d76daa06b1a

📥 Commits

Reviewing files that changed from the base of the PR and between 8830f27 and 2b86ab4.

📒 Files selected for processing (1)
  • packages/ui/src/newsletter-form/index.tsx

📝 Walkthrough

Walkthrough

The newsletter form now renders a screen-reader-only label for the email input, associated with htmlFor="email".

Changes

Newsletter form accessibility

Layer / File(s) Summary
Email label insertion
packages/ui/src/newsletter-form/index.tsx
An off-screen label with htmlFor="email" is inserted before the email input.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes


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.

❤️ Share

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

@jonniebigodes jonniebigodes self-assigned this Jul 21, 2026
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.

[Bug] A11y: Add label to newsletter email input in footer

3 participants