Skip to content

fix(a11y): WCAG 1.4.4 — replace hardcoded px with theme tokens for text resize #39235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Aitema-gmbh wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fix(a11y): WCAG 1.4.4 — replace hardcoded px with theme tokens for text resize #39235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d4baf19
fix(a11y): WCAG 1.4.4 — replace hardcoded px with theme tokens for te…
Mar 2, 2026
f19c1a6
fix(a11y): remove accidentally included 3.3.1 error validation code a…
Apr 9, 2026
f84904c
fix(a11y): WCAG 1.4.4 — drop remaining hardcoded px font sizes
May 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ const onClick = (

const StyledButton = styled.span`
button {
line-height: 13px;
line-height: 1;
min-width: auto !important;
padding: 0 ${({ theme }) => theme.sizeUnit * 3}px 0
${({ theme }) => theme.sizeUnit * 2}px;
Expand Down
1 change: 0 additions & 1 deletion superset-frontend/src/SqlLab/components/ScheduleQueryButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,6 @@ export const StyledButtonComponent = styled(Button)`
background: none;
text-transform: none;
padding: 0px;
font-size: 14px;
font-weight: ${theme.fontWeightNormal};
margin-left: 0;
&:disabled {
Expand Down
2 changes: 1 addition & 1 deletion superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const StyledEditableTabs = styled(EditableTabs)`
`;

const StyledTab = styled.span`
line-height: 24px;
line-height: 1.5;
`;

const TabTitle = styled.span`
Expand Down
2 changes: 1 addition & 1 deletion superset-frontend/src/dashboard/components/CustomizationsBadge/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const StyledTag = styled(Tag)`
vertical-align: middle;
color: ${theme.colorTextSecondary};
margin-right: ${theme.sizeUnit * 0.5}px;
font-size: 12px;
font-size: ${theme.fontSizeSM}px;
Copy link
Copy Markdown
Contributor

@codeant-ai-for-open-source codeant-ai-for-open-source Bot Apr 9, 2026

Choose a reason for hiding this comment

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

Suggestion: The newly added icon font size is fixed in px, so it will not scale with user text-size preferences and undermines the WCAG text-resize behavior this PR is intended to enforce. Use a relative/inherited size so the icon grows with surrounding text. [logic error]

Severity Level: Major ⚠️ 
- ⚠️ Customizations badge icon ignores surrounding text scaling.
- ⚠️ Slight deviation from WCAG 1.4.4 text resize intent.
Suggested change
font-size: ${theme.fontSizeSM}px;
font-size: inherit;
Steps of Reproduction ✅ 
1. In a running Superset instance with this PR applied, open any dashboard so that chart
headers are rendered by `SliceHeader`
(`superset-frontend/src/dashboard/components/SliceHeader/index.tsx:137–255`), which in its
JSX at lines 48–73 (second snippet) includes `<CustomizationsBadge
chartId={slice.slice_id} />` inside the `.header-controls` container.

2. Configure a chart so it has at least one applicable "Display controls" customization
(backed by data mask state). As shown in `CustomizationsBadge`
(`superset-frontend/src/dashboard/components/CustomizationsBadge/index.tsx:55–75`),
`customizationsCount = effectiveCustomizations.length` and the component returns `null`
when this count is `0` (lines 71–75) but returns a tooltip with a `StyledTag` and icon
when the count is greater than zero (lines 76–139).

3. When `customizationsCount > 0`, observe the rendered badge in the chart header:
`CustomizationsBadge` returns a `StyledTag` containing `<Icons.GroupOutlined iconSize="m"
/>` (`index.tsx:126–133`). The `StyledTag` definition earlier in the same file
(`index.tsx:68–87`) applies CSS to `.anticon` children, including `font-size:
${theme.fontSizeSM}px;` at line 86 from the PR hunk.

4. Increase text size for the header area (for example, via browser settings that increase
default text size, or temporarily in devtools by applying `font-size: 200%` to the
`.header-controls` container rendered by `ChartHeaderStyles` in `SliceHeader` at
`index.tsx:76–105`). The surrounding header text grows with the applied font-size, but the
`.anticon` inside `StyledTag` remains at the fixed `theme.fontSizeSM` pixel size due to
the explicit `font-size` rule at `CustomizationsBadge/index.tsx:86`, demonstrating that
the icon does not inherit the resized text and thus does not fully participate in the
text-resize behavior this PR aims to enforce.
Prompt for AI Agent 🤖 
This is a comment left during a code review.

**Path:** superset-frontend/src/dashboard/components/CustomizationsBadge/index.tsx
**Line:** 86:86
**Comment:**
	*Logic Error: The newly added icon font size is fixed in `px`, so it will not scale with user text-size preferences and undermines the WCAG text-resize behavior this PR is intended to enforce. Use a relative/inherited size so the icon grows with surrounding text.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
👍 | 👎

&:hover {
color: ${theme.colorText};
}
Expand Down
2 changes: 1 addition & 1 deletion superset-frontend/src/dashboard/components/SliceHeader/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ const ChartHeaderStyles = styled.div`
& > .header-controls {
display: flex;
align-items: center;
height: 24px;
min-height: 24px;
}

.dropdown.btn-group {
Expand Down
5 changes: 3 additions & 2 deletions superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const RefreshTooltip = styled.div`
height: auto;
margin: ${theme.sizeUnit}px 0;
color: ${theme.colorTextLabel};
line-height: 21px;
line-height: 1.5;
display: flex;
flex-direction: column;
align-items: flex-start;
Expand Down Expand Up @@ -558,7 +558,8 @@ const SliceHeaderControls = (
<>
{isFullSize && (
<Icons.FullscreenExitOutlined
style={{ fontSize: 22 }}
style={{ fontSize: theme.fontSizeXL }}
aria-label={t('Exit fullscreen')}
onClick={() => {
props.handleToggleFullSize();
}}
Expand Down
6 changes: 3 additions & 3 deletions superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,15 +79,15 @@ const ContentStyleWrapper = styled.div`

.control-label {
font-size: ${theme.fontSizeSM}px;
line-height: 16px;
line-height: 1.2;
margin: 8px 0;
}

.section-title {
font-style: normal;
font-weight: ${theme.fontWeightStrong};
font-size: 15px;
line-height: 24px;
font-size: ${theme.fontSize}px;
line-height: 1.5;
margin-bottom: 8px;
}

Expand Down
4 changes: 2 additions & 2 deletions superset-frontend/src/features/home/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const StyledBrandText = styled.div`
justify-content: center;

span {
max-width: ${theme.sizeUnit * 58}px;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Expand Down Expand Up @@ -175,8 +175,8 @@ const StyledRow = styled(Row)`
const StyledCol = styled(Col)`
${({ theme }) => css`
display: flex;
gap: ${theme.sizeUnit * 4}px;
flex-wrap: wrap;
gap: ${theme.sizeUnit * 4}px;
`}
`;

Expand Down
4 changes: 2 additions & 2 deletions superset-frontend/src/features/home/SubMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const StyledHeader = styled.div<{ backgroundColor?: string }>`
text-align: left;
font-size: 18px;
display: inline-block;
line-height: ${({ theme }) => theme.sizeUnit * 9}px;
line-height: 1.5;
}
.nav-right {
display: flex;
Expand Down Expand Up @@ -91,7 +91,7 @@ const StyledHeader = styled.div<{ backgroundColor?: string }>`

.menu > .ant-menu {
padding-left: ${({ theme }) => theme.sizeUnit * 5}px;
line-height: ${({ theme }) => theme.sizeUnit * 5}px;
line-height: 1.5;

.ant-menu-item {
border-radius: ${({ theme }) => theme.borderRadius}px;
Expand Down
5 changes: 4 additions & 1 deletion superset-frontend/src/visualizations/TimeTable/components/SparklineCell/SparklineCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,10 @@ const SparklineCell = ({
<div
css={() => ({
color: theme.colorTextSecondary,
fontSize: '12px',
// Use em so secondary timestamp scales with the
// surrounding cell font-size when users adjust
// browser default text size (WCAG 1.4.4).
fontSize: '0.85em',
})}
Comment on lines 233 to 238
Copy link

Copilot AI Apr 20, 2026

Choose a reason for hiding this comment

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

This change still produces a pixel-based font size (e.g., "${theme.fontSizeSM}px"). The PR description mentions converting hardcoded px font sizes to rem / respecting browser text-size settings; px values won’t scale with user default font size the way rem/em do. Either switch these to rem (possibly via a shared px→rem helper) or update the PR description/testing expectations to match the implemented approach.

Copilot uses AI. Check for mistakes.
>
{formatTime(
Expand Down
Loading