fix(ListView): add tooltip for layout toggle buttons #37581

ionik0 · 2026-01-30T17:57:44Z

Summary

Adds tooltips to the ListView layout toggle buttons to improve discoverability and accessibility.
This PR supersedes #37304
Note: Frontend type-check passes locally via pre-commit on the modified file.
The pre-commit meta-check in CI reports a skipped hook due to environment setup.

before adding the tooltip. (when i hover over it)

after adding the tooltips.(when i hover over it)

TESTING INSTRUCTIONS

Run Superset locally using Docker
Navigate to Dashboards
Locate the layout toggle buttons (card / table view)
Hover over each toggle button
Verify that the correct tooltip text is displayed

ADDITIONAL INFORMATION

Has associated issue: Fixes Tooltips missing for dashboard view mode toggle icons (Grid/List) on Dashboard List page #37303
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
Introduces new feature or API
Removes existing feature or API

bito-code-review · 2026-01-30T17:57:55Z

Code Review Agent Run #e23152

Actionable Suggestions - 0

Additional Suggestions - 1

superset-frontend/src/components/ListView/ListView.tsx - 1
- Import Standardization · Line 34-34
  
  Direct import of Pagination from 'antd' violates the rule to use @superset-ui/core wrappers for Ant Design components. Since @superset-ui/core re-exports antd's Pagination without modification, switch back to the standardized import path.

Review Details

Files reviewed - 1 · Commit Range: f4ed29d..f4ed29d
- superset-frontend/src/components/ListView/ListView.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

codeant-ai-for-open-source · 2026-01-30T18:00:24Z

superset-frontend/src/components/ListView/ListView.tsx

+        onClick={e => {
+          e.currentTarget.blur();
+          setMode('card');
+        }}
+        className={cx('toggle-button', { active: mode === 'card' })}
+      >
+        <Icons.AppstoreOutlined iconSize="xl" />
+      </div>
+    </Tooltip>
+    <Tooltip title={t('List view')}>
+      <div
+        role="button"
+        tabIndex={0}


Suggestion: Toggle buttons do not expose their pressed state to assistive technologies: the divs use role="button" and visually indicate active state via className, but they lack an aria-pressed attribute. Add aria-pressed tied to the active condition so screen readers can expose the toggle state. [possible bug]

Severity Level: Major ⚠️

- ❌ Screen readers don't announce toggle state. - ⚠️ Affects ListView view-mode toggles accessibility.

Suggested change

onClick={e => {

e.currentTarget.blur();

setMode('card');

}}

className={cx('toggle-button', { active: mode === 'card' })}

>

<Icons.AppstoreOutlined iconSize="xl" />

</div>

</Tooltip>

<Tooltip title={t('List view')}>

<div

role="button"

tabIndex={0}

aria-pressed={mode === 'card'}

onClick={e => {

e.currentTarget.blur();

setMode('card');

}}

className={cx('toggle-button', { active: mode === 'card' })}

>

<Icons.AppstoreOutlined iconSize="xl" />

</div>

</Tooltip>

<Tooltip title={t('List view')}>

<div

role="button"

tabIndex={0}

aria-pressed={mode === 'table'}

Steps of Reproduction ✅

1. Run the app and load a page that shows the ListView view-mode toggle (ListView component). 2. Open an accessibility inspector or screen reader (e.g., VoiceOver/NVDA) and navigate to the toggle. 3. Inspect the toggle element at ListView.tsx:205-230: it has role="button" and visual active class, but no aria-pressed attribute is present to convey state to assistive tech. 4. Observe assistive tech does not announce the pressed/toggled state; adding aria-pressed (aria-pressed={mode === 'card' / mode === 'table'}) exposes state to screen readers.

Prompt for AI Agent 🤖

This is a comment left during a code review. **Path:** superset-frontend/src/components/ListView/ListView.tsx **Line:** 209:221 **Comment:** *Possible Bug: Toggle buttons do not expose their pressed state to assistive technologies: the divs use role="button" and visually indicate active state via className, but they lack an `aria-pressed` attribute. Add `aria-pressed` tied to the active condition so screen readers can expose the toggle state. 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.

SBIN2010 · 2026-01-30T22:31:06Z

Superset uses Git pre-commit hooks courtesy of pre-commit. To install run the following:

pip3 install -r requirements/development.txt
pre-commit install
A series of checks will now run when you make a git commit.

Alternatively it is possible to run pre-commit by running pre-commit manually:

pre-commit run --all-files

ionik0 · 2026-01-31T09:19:21Z

Superset uses Git pre-commit hooks courtesy of pre-commit. To install run the following:

pip3 install -r requirements/development.txt pre-commit install A series of checks will now run when you make a git commit.

Alternatively it is possible to run pre-commit by running pre-commit manually:

pre-commit run --all-files

Thanks for pointing that out!

I have pre-commit installed locally and ran it manually.
For this PR, I ran targeted checks on the modified file:

pre-commit run --files superset-frontend/src/components/ListView/ListView.tsx
All relevant frontend hooks (prettier, oxlint, custom rules, and type-checking-frontend) pass locally.

Please let me know if you’d prefer that I run the full pre-commit run --all-files checks as well.

ionik0 · 2026-01-31T10:37:00Z

@sfirke thanks for the guidance earlier!

I’ve opened a new PR rebased on the latest master, with only the intended change in
superset-frontend/src/components/ListView/ListView.tsx.

I verified locally that:

frontend type-checking passes for the modified file
oxlint / prettier / eslint pass for the PR diff
no unrelated files are included in the commit

Running pre-commit run --all-files locally touches many existing files outside the scope of this change, so I’ve intentionally limited the PR to the ListView update only.

Please let me know if you’d like me to adjust anything further.

sfirke · 2026-01-31T12:36:33Z

I see that pre-commit is failing with this:

❌ Pre-commit check failed (exit code: 1).
🔍 Modified files:
superset-frontend/src/components/ListView/ListView.tsx

I hear you that it is modifying files it shouldn't. So instead of running it with a flag to touch all files, can you modify the command to touch only that file? Or run it on all files and only keep the changes to this one, reverting the other changes?

Because it seems like there is some white space or formatting issue with this one file you modified. And we can't merge it until it passes GitHub's CI checks.

ionik0 · 2026-01-31T14:52:09Z

@sfirke thanks for the clarification!

I ran pre-commit scoped only to the modified file as suggested:

pre-commit run --files superset-frontend/src/components/ListView/ListView.tsx

All hooks pass locally, and there are no remaining diffs:

git status → clean

git diff → empty

This suggests the formatting/whitespace issues in ListView.tsx should be resolved, and no other files are being modified anymore.

I’ve attached a screenshot showing the command + results.
Please let me know if there’s a specific CI job or formatter config I should mirror locally to match GitHub checks exactly.

ionik0 · 2026-01-31T15:25:51Z

@sfirke I ran pre-commit run --files superset-frontend/src/components/ListView/ListView.tsx locally and all hooks pass, and I currently have a clean working tree with no diff.

It looks like CI still believes this file would be modified. I suspect a line-ending or environment mismatch and am re-running with a clean checkout to align with CI. I’ll push an update shortly.

sfirke · 2026-01-31T15:50:29Z

Yep this is a tricky situation. My best bet is that the rules on your local pre-commit check don't match what is running on the GitHub CI?

ionik0 · 2026-01-31T16:02:06Z

@sfirke
That makes sense. Locally, running
pre-commit run --files superset-frontend/src/components/ListView/ListView.tsx
from the repo root passes cleanly with no diff afterward.

I also verified git diff is empty after running it, so the file itself appears formatted correctly on my side.

I pushed an empty commit to retrigger CI in case it was stale. If CI still fails, would you prefer I align my environment (e.g. specific Node / Python / pre-commit versions), or is there a recommended way to reproduce the exact CI hook locally?

netlify · 2026-01-31T16:12:36Z

✅ Deploy Preview for superset-docs-preview ready!

Name	Link
🔨 Latest commit	`c9d01c7`
🔍 Latest deploy log	https://app.netlify.com/projects/superset-docs-preview/deploys/697e27f9b755280008444db7
😎 Deploy Preview	https://deploy-preview-37581--superset-docs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

sfirke · 2026-01-31T16:39:49Z

I'm re-running the check now. But if you didn't change anything it will fail again.

Maybe re-clone the repo fresh and apply your change and try it there? I don't know how else to resolve it. Keep trying things with AI until your local pre-commit modifies that file? Until that happens the GitHub check will fail. We're reaching the limits of my assistance.

SBIN2010 · 2026-01-31T16:56:05Z

Hi @ionik0 @sfirke !
I'll speed up your search a little. After checking locally, this is what was fixed

ionik0 · 2026-01-31T17:16:34Z

@sfirke @SBIN2010
sir,
Thanks for checking into this. I verified locally that:

• pre-commit run --files superset-frontend/src/components/ListView/ListView.tsx passes
• no diff is produced afterward (git diff is empty)
• the only file touched in this PR is ListView.tsx

The CI diff appears to be a formatter-only change (likely line endings / whitespace / tool version mismatch), but I’m unable to reproduce it locally even after rerunning the exact hooks.

If you’re okay with it, I’m happy to:
• apply the CI formatter change manually once identified, or
• re-clone fresh and re-apply the change, or
• let a maintainer apply the formatter fix directly

Just let me know what you’d prefer — happy to follow your guidance.

sfirke · 2026-01-31T17:18:28Z

@ionik0 I believe the screenshot from @SBIN2010 shows the fix you must apply manually. Try that. Thank you @SBIN2010 🙏

ionik0 · 2026-01-31T17:54:42Z

@sfirke sir now, is it mergeable now?

sfirke · 2026-01-31T18:11:29Z

It's passing CI! I don't know JavaScript/ TypeScript so another committer should review and merge. But your work is set here for now.

ionik0 · 2026-01-31T18:26:57Z

Thanks a lot sir @sfirke for your help and patience throughout this 🙏and also @SBIN2010 for sharing the screenshot,
and also I am happy to make any follow-up changes if a JS/TS reviewer requests them.

bito-code-review · 2026-01-31T18:35:30Z

Code Review Agent Run #db4a25

Actionable Suggestions - 0

Review Details

Files reviewed - 1 · Commit Range: f4ed29d..adca840
- superset-frontend/src/components/ListView/ListView.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

fix(ListView): add tooltip for layout toggle buttons

f4ed29d

pull-request-size bot added the size/M label Jan 30, 2026

dosubot bot added change:frontend Requires changing the frontend listview Namespace | Anything related to lists, such as Dashboards, Charts, Datasets, etc. labels Jan 30, 2026

codeant-ai-for-open-source bot reviewed Jan 30, 2026

View reviewed changes

ionik0 mentioned this pull request Jan 31, 2026

feat(list-view): Add tooltip for view mode toggle buttons #37304

Closed

6 tasks

chore: retrigger CI

c9d01c7

Update ListView.tsx

adca840

fix(ListView): add tooltip for layout toggle buttons #37581

Are you sure you want to change the base?

fix(ListView): add tooltip for layout toggle buttons #37581

Conversation

ionik0 commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Uh oh!

bito-code-review bot commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #e23152

Uh oh!

codeant-ai-for-open-source bot Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

SBIN2010 commented Jan 30, 2026

Uh oh!

ionik0 commented Jan 31, 2026

Uh oh!

ionik0 commented Jan 31, 2026

Uh oh!

sfirke commented Jan 31, 2026

Uh oh!

ionik0 commented Jan 31, 2026

Uh oh!

ionik0 commented Jan 31, 2026

Uh oh!

sfirke commented Jan 31, 2026

Uh oh!

ionik0 commented Jan 31, 2026

Uh oh!

netlify bot commented Jan 31, 2026

✅ Deploy Preview for superset-docs-preview ready!

Uh oh!

sfirke commented Jan 31, 2026

Uh oh!

SBIN2010 commented Jan 31, 2026

Uh oh!

ionik0 commented Jan 31, 2026

Uh oh!

sfirke commented Jan 31, 2026

Uh oh!

ionik0 commented Jan 31, 2026

Uh oh!

sfirke commented Jan 31, 2026

Uh oh!

ionik0 commented Jan 31, 2026

Uh oh!

bito-code-review bot commented Jan 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #db4a25

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ionik0 commented Jan 30, 2026 •

edited

Loading

bito-code-review bot commented Jan 30, 2026 •

edited

Loading

bito-code-review bot commented Jan 31, 2026 •

edited

Loading