fix(a11y): replace role=button anti-pattern with Button components by kasiazjc · Pull Request #40062 · apache/superset

kasiazjc · 2026-05-12T12:06:13Z

SUMMARY

Replaces <span role="button"> and <div role="button"> patterns with proper <Button> or native <button> components across 13 files. Non-button elements with role="button" lack automatic keyboard activation (Enter/Space), built-in focus rings, and correct ARIA semantics.

Files changed:

explore/components/DataTableControl/index.tsx
explore/components/ExploreChartPanel/index.tsx
explore/components/ExploreViewContainer/index.tsx
explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
explore/components/controls/MetricControl/AdhocMetricEditPopover/index.tsx
features/dashboards/DashboardCard.tsx
features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
features/datasets/AddDataset/DatasetPanel/MessageContent.tsx
features/queries/QueryPreviewModal.tsx
features/queries/SyntaxHighlighterCopy.tsx
features/tags/TagCard.tsx

Notable approaches:

<Button buttonStyle="link"> for inline text/icon actions
styled.button for QueryPreviewModal's tab toggles (already styled, just wrong element type)
Removed redundant onKeyDown handlers that Button handles natively
Added aria-label to icon-only buttons

TESTING INSTRUCTIONS

Verify all affected components are keyboard-navigable (Tab to focus, Enter/Space to activate)
Check that focus rings appear correctly on all converted elements
Specifically test: Copy button in DataTableControl, "Create a dataset" links in Explore, sidebar toggle in ExploreViewContainer, column config show-more button, dashboard/tag card action menus

ADDITIONAL INFORMATION

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

codeant-ai-for-open-source · 2026-05-12T12:12:44Z

 `;

-const TabButton = styled.div`
+const TabButton = styled.button`


Suggestion: TabButton was switched to a native button element but its styles do not reset the browser's default button chrome (border, default background/appearance). This will cause visible style regressions (unexpected borders/background and spacing) compared with the previous inline tab toggle appearance. Add explicit button resets (for example transparent background, no border, inherited font/color, and consistent cursor) so the toggle keeps the intended layout. [css layout issue]

Severity Level: Major ⚠️

- ❌ Query preview tab buttons show unexpected borders/background. - ⚠️ Query History preview modal appears visually inconsistent.

Steps of Reproduction ✅

1. Open the Query History list page, which renders the `QueryList` component in `superset-frontend/src/pages/QueryHistoryList/index.tsx:480-519`; note that `queryCurrentlyPreviewing` controls rendering of `<QueryPreviewModal>` at `index.tsx:491-498`. 2. In the Query History table, click the SQL snippet cell for any row, rendered by the `Cell` component at `superset-frontend/src/pages/QueryHistoryList/index.tsx:360-389`, where the `<div data-test="open-sql-preview-\${id}">` calls `setQueryCurrentlyPreviewing(original)` on click, causing `QueryPreviewModal` to open. 3. In the modal, inspect the "User query" and "Executed query" tab toggles rendered via `<TabButton>` in `superset-frontend/src/features/queries/QueryPreviewModal.tsx:146-165`; `TabButton` is defined as `styled.button` at lines `47-63` without `border: none`, `background: transparent`, or a reset like `all: unset`, so the browser's default button border/background are applied, producing visible chrome and spacing different from the previous `div`-based tabs. 4. Compare with other styled buttons intended to be visually unstyled, e.g. `SelectorLabel = styled.button` in `superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx:155-184`, which uses `all: unset` and explicit layout styles; the absence of similar resets on `TabButton` confirms a UI regression and inconsistent tab appearance in the Query Preview modal.

Fix in Cursor | Fix in VSCode Claude

(Use Cmd/Ctrl + Click for best experience)

Prompt for AI Agent 🤖

This is a comment left during a code review. **Path:** superset-frontend/src/features/queries/QueryPreviewModal.tsx **Line:** 47:63 **Comment:** *Css Layout Issue: `TabButton` was switched to a native `button` element but its styles do not reset the browser's default button chrome (`border`, default background/appearance). This will cause visible style regressions (unexpected borders/background and spacing) compared with the previous inline tab toggle appearance. Add explicit button resets (for example transparent background, no border, inherited font/color, and consistent cursor) so the toggle keeps the intended layout. 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. Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix

👍 | 👎

bito-code-review · 2026-05-12T12:15:15Z

Yes, the suggestion is valid — switching TabButton from a styled div to a native button element without resetting browser default styles (like border and background) will cause visible style regressions, such as unexpected borders and spacing in the Query Preview modal tabs.

superset-frontend/src/features/queries/QueryPreviewModal.tsx

const TabButton = styled.button`
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  font-size: ${({ theme }) => theme.fontSizeSM}px;
  padding: ${({ theme }) => theme.sizeUnit * 2}px
    ${({ theme }) => theme.sizeUnit * 4}px;
  // ... rest of existing styles
`;

bito-code-review

Code Review Agent Run #7af5e7

Actionable Suggestions - 1

superset-frontend/src/features/datasets/AddDataset/DatasetPanel/MessageContent.tsx - 1
- Test assertion mismatch · Line 55-57

Review Details

Files reviewed - 13 · Commit Range: 894ba5e..894ba5e
- superset-frontend/src/explore/components/DataTableControl/index.tsx
- superset-frontend/src/explore/components/ExploreChartPanel/index.tsx
- superset-frontend/src/explore/components/ExploreViewContainer/index.tsx
- superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
- superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.tsx
- superset-frontend/src/features/alerts/components/NotificationMethod.tsx
- superset-frontend/src/features/charts/ChartCard.tsx
- superset-frontend/src/features/dashboards/DashboardCard.tsx
- superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
- superset-frontend/src/features/datasets/AddDataset/DatasetPanel/MessageContent.tsx
- superset-frontend/src/features/queries/QueryPreviewModal.tsx
- superset-frontend/src/features/queries/SyntaxHighlighterCopy.tsx
- superset-frontend/src/features/tags/TagCard.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-code-review · 2026-05-12T12:25:45Z

+      {CREATE_MESSAGE}
    </Link>
    {VIEW_DATASET_MESSAGE}


Test assertion mismatch

The removal of the wrapper improves semantic correctness, as the element is a navigation link, not a button. However, this breaks the test assertion in DatasetPanel.test.tsx that expects getByRole('button'). Update the test to use getByRole('link', { name: CREATE_MESSAGE }) to match the correct semantics.

Code Review Run #7af5e7

Should Bito avoid suggestions like this for future reviews? (Manage Rules)

Yes, avoid them

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- ExploreViewContainer: keep div.sidebar as layout container, put Button inside for the clickable icon (not the whole strip) - QueryPreviewModal: add browser resets to styled.button TabButton - ColumnConfigControl: wrap Button in div to preserve block/centered layout Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

bito-code-review

Code Review Agent Run #d45150

Actionable Suggestions - 1

superset-frontend/src/explore/components/ExploreViewContainer/index.tsx - 1
- Duplicate onClick Handlers · Line 1024-1029

Review Details

Files reviewed - 3 · Commit Range: 894ba5e..7f753cc
- superset-frontend/src/explore/components/ExploreViewContainer/index.tsx
- superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
- superset-frontend/src/features/queries/QueryPreviewModal.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-code-review · 2026-05-12T22:50:23Z

+            <Button
+              buttonStyle="link"
+              className="action-button"
+              aria-label={t('Open Datasource tab')}
+              onClick={toggleCollapse}
+            >


Duplicate onClick Handlers

The div wrapper and the Button both have onClick={toggleCollapse}, which will cause the toggle function to execute twice on button click, preventing the collapse functionality from working. Remove the onClick from the Button element.

Code suggestion

Check the AI-generated fix before applying

Suggested change

<Button

buttonStyle="link"

className="action-button"

aria-label={t('Open Datasource tab')}

onClick={toggleCollapse}

>

<Button

buttonStyle="link"

className="action-button"

aria-label={t('Open Datasource tab')}

>

Code Review Run #d45150

Should Bito avoid suggestions like this for future reviews? (Manage Rules)

Yes, avoid them

fix(a11y): replace role=button spans with Button components

894ba5e

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

pull-request-size Bot added the size/L label May 12, 2026

dosubot Bot added change:frontend Requires changing the frontend design:accessibility Related to accessibility standards labels May 12, 2026

codeant-ai-for-open-source Bot reviewed May 12, 2026

View reviewed changes

kgabryje added the 🎪 ⚡ showtime-trigger Trigger showtime deployment label May 12, 2026

kasiazjc requested a review from kgabryje May 12, 2026 12:22

bito-code-review Bot reviewed May 12, 2026

View reviewed changes

kgabryje added testenv-up and removed 🎪 ⚡ showtime-trigger Trigger showtime deployment labels May 12, 2026

kasiazjc and others added 2 commits May 12, 2026 12:52

chore: add playwright screenshots for PR review

b1fb25c

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

bito-code-review Bot reviewed May 12, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(a11y): replace role=button anti-pattern with Button components#40062

fix(a11y): replace role=button anti-pattern with Button components#40062
kasiazjc wants to merge 3 commits into
apache:masterfrom
kasiazjc:polish-ux-03-role-button

kasiazjc commented May 12, 2026

Uh oh!

codeant-ai-for-open-source Bot May 12, 2026

Uh oh!

bito-code-review Bot commented May 12, 2026

Uh oh!

bito-code-review Bot left a comment •

edited

Loading

Uh oh!

bito-code-review Bot May 12, 2026

Uh oh!

bito-code-review Bot left a comment •

edited

Loading

Uh oh!

bito-code-review Bot May 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

kasiazjc commented May 12, 2026

SUMMARY

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Uh oh!

codeant-ai-for-open-source Bot May 12, 2026

Choose a reason for hiding this comment

Uh oh!

bito-code-review Bot commented May 12, 2026

Uh oh!

bito-code-review Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Code Review Agent Run #7af5e7

Uh oh!

bito-code-review Bot May 12, 2026

Choose a reason for hiding this comment

Uh oh!

bito-code-review Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Code Review Agent Run #d45150

Uh oh!

bito-code-review Bot May 12, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

bito-code-review Bot left a comment •

edited

Loading

bito-code-review Bot left a comment •

edited

Loading