Skip to content

fix(a11y): add accessible labels to EmbedCodeContent height/width inputs#41995

Merged
eschutho merged 2 commits into
masterfrom
fix/a11y-embedcode-input-labels
Jul 13, 2026
Merged

fix(a11y): add accessible labels to EmbedCodeContent height/width inputs#41995
eschutho merged 2 commits into
masterfrom
fix/a11y-embedcode-input-labels

Conversation

@eschutho

@eschutho eschutho commented Jul 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Summary

  • superset-frontend/src/explore/components/EmbedCodeContent.tsx renders two <Input type="number"> fields (Chart height, Chart width) with only a sibling <Typography.Text> as a visual label — no <label htmlFor>, aria-label, or aria-labelledby tying the label to the input programmatically.
  • Wraps each <Typography.Text> in a native <label htmlFor> and wires it to the input via id (the width input already had an unused id="embed-width" set up for exactly this, never connected — the height input gets a matching id="embed-height").
  • Behavior is unchanged — purely additive markup, no visual or functional change (native <label> also gains click-to-focus for sighted mouse users, as a side benefit).

WCAG 2.1 SC 4.1.2 (Name, Role, Value) — Level A: the accessible name of a form control must be programmatically determinable.

Test plan

  • Added a test to EmbedCodeContent.test.tsx asserting screen.findByLabelText('Chart height') and screen.findByLabelText('Chart width') both resolve.
  • Manual: open the "Embed" dialog in Explore, tab to the height/width inputs with a screen reader running — each input now announces "Chart height"/"Chart width" instead of no name at all.

@dosubot dosubot Bot added change:frontend Requires changing the frontend design:accessibility Related to accessibility standards labels Jul 13, 2026
@bito-code-review

bito-code-review Bot commented Jul 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Code Review Agent Run #92fc67

Actionable Suggestions - 0
Review Details
  • Files reviewed - 2 · Commit Range: 5d3d893..5d3d893
    • superset-frontend/src/explore/components/EmbedCodeContent.test.tsx
    • superset-frontend/src/explore/components/EmbedCodeContent.tsx
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful
Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by Bito Logo

@eschutho eschutho requested a review from richardfogaca July 13, 2026 10:30
@eschutho
fix(a11y): use native label htmlFor for EmbedCodeContent inputs
b3bf38f 
Per self-review: prefer a real <label htmlFor> over aria-label since
visible label text already existed, and wire up the previously-unused
id="embed-width" instead of duplicating the string in aria-label.

WCAG 2.1 SC 4.1.2 (Name, Role, Value) — Level A.
@eschutho eschutho changed the title fix(a11y): add aria-label to EmbedCodeContent height/width inputs fix(a11y): add accessible labels to EmbedCodeContent height/width inputs Jul 13, 2026
@netlify

netlify Bot commented Jul 13, 2026

Copy link
Copy Markdown

✅ Deploy Preview for superset-docs-preview ready!

Name Link
🔨 Latest commit b3bf38f
🔍 Latest deploy log https://app.netlify.com/projects/superset-docs-preview/deploys/6a54be7b6ef6a40008497068
😎 Deploy Preview https://deploy-preview-41995--superset-docs-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@codecov

codecov Bot commented Jul 13, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 65.04%. Comparing base (d380663) to head (b3bf38f).
⚠️ Report is 9 commits behind head on master.

Additional details and impacted files 
@@           Coverage Diff           @@
##           master   #41995   +/-   ##
=======================================
  Coverage   65.03%   65.04%           
=======================================
  Files        2742     2742           
  Lines      153426   153426           
  Branches    35206    35206           
=======================================
+ Hits        99787    99792    +5     
+ Misses      51732    51727    -5     
  Partials     1907     1907
Flag Coverage Δ
javascript 70.33% <ø> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@bito-code-review

bito-code-review Bot commented Jul 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Code Review Agent Run #bf6987

Actionable Suggestions - 0
Review Details
  • Files reviewed - 1 · Commit Range: 5d3d893..b3bf38f
    • superset-frontend/src/explore/components/EmbedCodeContent.tsx
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful
Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by Bito Logo

msyavuz
msyavuz approved these changes Jul 13, 2026
View reviewed changes

@msyavuz msyavuz left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Ant design way of doing this was to use Form.Item as https://ant.design/components/form#examples. But this should work as well

@eschutho eschutho merged commit ce82196 into master Jul 13, 2026
70 of 71 checks passed
@eschutho eschutho deleted the fix/a11y-embedcode-input-labels branch July 13, 2026 22:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@msyavuz msyavuz msyavuz approved these changes
@richardfogaca richardfogaca Awaiting requested review from richardfogaca

Assignees

No one assigned

Labels

change:frontend Requires changing the frontend design:accessibility Related to accessibility standards preset-io size/S

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@eschutho @msyavuz