Skip to content

fix(a11y): WCAG 2.4.7 — ensure visible keyboard focus on all interactive elements #39242

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 2 commits into
base: master
Choose a base branch
from
Open

fix(a11y): WCAG 2.4.7 — ensure visible keyboard focus on all interactive elements #39242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c897f3d
fix(a11y): WCAG 2.4.7 — ensure visible keyboard focus on all interact…
Mar 2, 2026
5edcd75
fix(a11y): add !important to global focus rule, use inset shadow, sco…
Apr 9, 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
8 changes: 8 additions & 0 deletions superset-frontend/packages/superset-core/src/theme/GlobalStyles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,14 @@ export const GlobalStyles = () => {
display: flex;
margin-top: ${theme.marginXS}px;
}

/* WCAG 2.4.7: Focus Visible — ensure all interactive elements have a visible
keyboard focus indicator. Uses :focus-visible to avoid showing on mouse clicks.
Individual components can override with their own focus styles. */
*:focus-visible {
outline: 2px solid ${theme.colorPrimary} !important;
outline-offset: 2px !important;
Comment on lines +117 to +118
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.

The global *:focus-visible rule uses !important for outline/outline-offset, but several components updated in this PR rely on setting outline: 2px solid transparent on :focus-visible to avoid a double focus ring while using box-shadow as the visible indicator. With !important here, those component-level outline declarations cannot override the global outline, so users will likely see both the global outline and the component box-shadow. Consider removing !important (or, if you truly need it, ensure component overrides also use !important where they intentionally make the outline transparent).

Suggested change
outline: 2px solid ${theme.colorPrimary} !important;
outline-offset: 2px !important;
outline: 2px solid ${theme.colorPrimary};
outline-offset: 2px;

Copilot uses AI. Check for mistakes.
}
`}
/>
);
Expand Down
7 changes: 6 additions & 1 deletion superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,10 +80,15 @@ export const FilterItem = styled.button`
padding: 0;
border: none;
background: none;
outline: none;
outline: 2px solid transparent; /* WCAG 2.4.7: transparent outline prevents double-ring with box-shadow */
width: 100%;
color: inherit;

&:focus-visible {
box-shadow: inset 0 0 0 2px ${theme.colorPrimary};
border-radius: ${theme.borderRadius}px;
}

&::-moz-focus-inner {
border: 0;
}
Expand Down
11 changes: 7 additions & 4 deletions superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,10 +210,13 @@ const ScopeSelector = styled.div`
&:hover {
text-decoration: underline;
}
}

&:focus {
outline: none;
}
/* WCAG 2.4.7: Focus on the clickable button that wraps the rct-icon spans */
.react-checkbox-tree button:focus-visible {
outline: 2px solid transparent;
box-shadow: 0 0 0 2px ${theme.colorPrimary};
border-radius: ${theme.borderRadius}px;
}

.filter-field-pane {
Expand Down Expand Up @@ -360,7 +363,7 @@ const ScopeSelector = styled.div`
border: 1px solid ${theme.colorBorder};
padding: ${theme.sizeUnit}px ${theme.sizeUnit * 2}px;
font-size: ${theme.fontSize}px;
outline: none;
outline: 2px solid transparent; /* WCAG 2.4.7: transparent outline prevents double-ring; border change on focus provides visible indicator */

&:focus {
border: 1px solid ${theme.colorPrimary};
Expand Down
4 changes: 3 additions & 1 deletion superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,9 @@ interface WithPopoverMenuState {
const WithPopoverMenuStyles = styled.div`
${({ theme }) => css`
position: relative;
outline: none;
&:focus-visible {
outline: 2px solid transparent; /* WCAG 2.4.7: HC Mode fallback only when focused */
}

&.with-popover-menu--focused:after {
content: '';
Expand Down
2 changes: 1 addition & 1 deletion superset-frontend/src/dashboard/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export const focusStyle = (theme: SupersetTheme) => css`
&:focus-visible {
box-shadow: 0 0 0 2px ${theme.colorPrimaryText};
border-radius: ${theme.borderRadius}px;
outline: none;
outline: 2px solid transparent; /* WCAG 2.4.7: transparent outline prevents double-ring; box-shadow provides visible focus */
text-decoration: none;
}
&:not(
Expand Down
6 changes: 5 additions & 1 deletion ...explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,13 @@ export const CloseButton = styled.button`
border: none;
border-right: solid 1px ${theme.colorBorder};
padding: 0;
outline: none;
outline: 2px solid transparent; /* WCAG 2.4.7: transparent outline prevents double-ring with global baseline */
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;

&:focus-visible {
box-shadow: 0 0 0 2px ${theme.colorPrimary};
}
`}
`;

Expand Down
12 changes: 9 additions & 3 deletions superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,8 +174,9 @@ const SelectorLabel = styled.button`
position: relative;
color: ${theme.colorText};

&:focus {
outline: initial;
&:focus-visible {
outline: 2px solid transparent; /* WCAG 2.4.7: transparent outline prevents double-ring with box-shadow */
box-shadow: 0 0 0 2px ${theme.colorPrimary};
}

&.selected {
Expand Down Expand Up @@ -270,7 +271,12 @@ const thumbnailContainerCss = (theme: SupersetTheme) => css`
cursor: pointer;
width: ${theme.sizeUnit * THUMBNAIL_GRID_UNITS}px;
position: relative;
outline: none; /* Remove focus outline to show only selected state */
outline: 2px solid transparent; /* WCAG 2.4.7: transparent outline prevents double-ring with box-shadow */

&:focus-visible {
box-shadow: 0 0 0 2px ${theme.colorPrimary};
border-radius: ${theme.borderRadius}px;
}

img {
min-width: ${theme.sizeUnit * THUMBNAIL_GRID_UNITS}px;
Expand Down
2 changes: 1 addition & 1 deletion superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ const FocusContainer = styled.div`
box-shadow: 0 0 0 2px ${theme.colorPrimary};
}
&:focus-visible {
outline: none;
outline: 2px solid transparent; /* WCAG 2.4.7: transparent outline prevents double-ring; box-shadow on :focus provides visible indicator */
}`}
`;

Expand Down
4 changes: 2 additions & 2 deletions superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@ const ControlContainer = styled.div<{

&:focus > div {
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 focus styling is attached to :focus rather than :focus-visible, which means the custom focus ring can still appear for mouse interactions (depending on how/when the container is programmatically focused). To align with the PR goal and testing instructions (“click elements → no focus ring”), consider moving the visual focus indicator (border/box-shadow) to :focus-visible (and/or :focus-within if the intent is to reflect focus on the inner date input).

Suggested change
&:focus > div {
&:focus-visible > div {

Copilot uses AI. Check for mistakes.
border-color: ${({ theme }) => theme.colorPrimary};
box-shadow: ${({ theme }) => `0 0 0 2px ${theme.controlOutline}`};
outline: 0;
box-shadow: ${({ theme }) => `0 0 0 2px ${theme.colorPrimary}`};
outline: 2px solid transparent; /* WCAG 2.4.7: transparent outline prevents double-ring; box-shadow provides visible focus */
}
`;

Expand Down
Loading