fix(a11y): use aria-label instead of non-functional alt prop on filter icons#41742
Merged
Conversation
…r icons WCAG 2.1 SC 4.1.2 — Level A.
Self-review found: (1) Icons.Drag renders through BaseIcon's customIcons branch, which spreads caller props onto the inner SVG, not the outer span that carries role/aria-label — so overriding its aria-label has no effect on the announced name. That's a separate, pre-existing BaseIcon.tsx bug, out of scope here, so the DraggableFilter.tsx change is reverted. (2) FilterConfigPane.test.tsx queried the DOM by the old `alt` attribute; updated to query by `aria-label` to match the DeleteOutlined fixes, which do work (antdEnhancedIcons branch spreads rest onto the labeled element).
dosubot
Bot
added
change:frontend
Contributor
Code Review Agent Run #1e1da8Actionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
richardfogaca
approved these changes
Jul 3, 2026
rusackas
pushed a commit
that referenced
this pull request
Jul 3, 2026
The a11y rename of the filter delete icon updated FilterConfigPane.test.tsx but not these two queries, which look the icon up by its accessible name. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
9 tasks
rusackas
pushed a commit
to fnardin-maystreet/superset
that referenced
this pull request
Jul 5, 2026
The a11y rename of the filter delete icon updated FilterConfigPane.test.tsx but not these two queries, which look the icon up by its accessible name. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This was referenced Jul 6, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
WCAG rule
WCAG 2.1 SC 4.1.2 — Level A (Name, Role, Value).
What changed
Two icon-only controls in the native filters config modal (
FilterTitleContainer.tsx's "remove filter" icon andItemTitleContainer.tsx's "remove item" icon, bothIcons.DeleteOutlined) were passing analtprop to try to give them a contextual accessible name.altisn't a recognized prop on theseIcons.*components (built on the sharedBaseIcon) — it's just spread onto the DOM as an inert attribute — so screen readers fell back toBaseIcon's generic auto-generated label ("delete") instead of the intended "Remove filter" / "Remove item" text. Swappedalt=foraria-label=at both call sites, which does take effect (confirmed viaBaseIcon.tsx's prop-spread order for this icon type).A third call site (
DraggableFilter.tsx,Icons.Drag) had the samealtbug, but that icon renders throughBaseIcon'scustomIconsbranch, which has a different, pre-existing issue: caller props are spread onto the inner SVG rather than the outerrole-bearing<span>, so anaria-labeloverride there doesn't reach the accessible element either way. Left that one alone rather than papering over it — it needs a fix inBaseIcon.tsxitself, which affects many more call sites and is out of scope for this small fix.Also updated
FilterConfigPane.test.tsx's "remove filter" test, which queried the DOM by the old[alt=...]attribute selector, to query by[aria-label=...]instead.Behavior
No visual or functional change — same click handlers, same icons, same test coverage. Only the accessible name computation changes.
Test plan
npx jest src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigPane.test.tsx— 5/5 passing