feat(accessibility): add tabbing to chart menu in dashboard #26138

eschutho · 2023-11-29T20:01:32Z

SUMMARY

This change adds the ability to tab through elements on a dashboard, the title, charts, and into the chart controls, and execute each of them with a keyboard.

Screen.Recording.2024-02-06.at.5.56.19.PM.mov

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

codecov · 2023-12-02T02:13:18Z

Codecov Report

Attention: Patch coverage is 65.16854% with 31 lines in your changes are missing coverage. Please review.

Project coverage is 69.68%. Comparing base (1d571ec) to head (81efffb).
Report is 3 commits behind head on master.

Files	Patch %	Lines
...dashboard/components/SliceHeaderControls/index.tsx	68.96%	17 Missing and 1 partial ⚠️
...rontend/src/components/ErrorMessage/ErrorAlert.tsx	28.57%	10 Missing ⚠️
...components/DashboardBuilder/DashboardContainer.tsx	25.00%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #26138      +/-   ##
==========================================
- Coverage   69.69%   69.68%   -0.01%     
==========================================
  Files        1908     1908              
  Lines       74530    74612      +82     
  Branches     8309     8333      +24     
==========================================
+ Hits        51942    51993      +51     
- Misses      20535    20565      +30     
- Partials     2053     2054       +1

Flag	Coverage Δ
javascript	`57.19% <65.16%> (+0.01%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

eschutho · 2023-12-08T19:25:38Z

/testenv up

github-actions · 2023-12-08T19:27:33Z

@eschutho Ephemeral environment spinning up at http://54.213.200.158:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

yousoph · 2023-12-12T00:42:38Z

When using keyboard navigation to tab through on a dashboard, the highlight on the chart title in dashboards doesn't seem to be appearing for me

eschutho · 2023-12-15T01:18:39Z

/testenv up

github-actions · 2023-12-15T01:22:31Z

@eschutho Ephemeral environment spinning up at http://54.202.14.64:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

eschutho · 2023-12-21T19:20:30Z

/testenv up

github-actions · 2023-12-21T19:24:22Z

@eschutho Ephemeral environment spinning up at http://52.35.108.27:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

eschutho · 2024-01-19T19:01:07Z

/testenv up

github-actions · 2024-01-19T19:05:06Z

@eschutho Ephemeral environment spinning up at http://35.87.72.46:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

kasiazjc · 2024-01-22T12:14:22Z

@eschutho Ephemeral environment spinning up at http://35.87.72.46:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

I think this looks good! Thanks @eschutho 🙏

kgabryje · 2024-02-27T16:43:28Z

superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx

@@ -170,25 +182,91 @@ const dropdownIconsStyles = css`
  }
 `;

+export const handleDropdownNavigation = (


I know that this PR is focused on dashboard interactions, but maybe (in future iterations if it's too complex?) we should add this functionality to the main Dropdown component, so that the keyboard navigation works in all dropdowns?

Yeah, good idea!

kgabryje · 2024-02-27T16:51:04Z

When I'm navigating the dropdown with arrows, the whole page scrolls with every click 🙁 And it looks like I can't navigate to Submenus

Screen.Recording.2024-02-27.at.17.49.28.mov

eschutho · 2024-02-27T23:47:38Z

When I'm navigating the dropdown with arrows, the whole page scrolls with every click 🙁 And it looks like I can't navigate to Submenus

Yeah, I didn't add the submenus yet. That's for a separate PR.

eschutho · 2024-03-26T18:42:47Z

superset-frontend/src/dashboard/types.ts

+  ToggleFullscreen = 'toggle_fullscreen',
+  ManageEmbedded = 'manage_embedded',
+  ManageEmailReports = 'manage_email_reports',
+}


Is this file just for typescript types or .. more?

What do you mean for "more"?

I thought maybe this file was only to be used for typescript types rather than runtime enums.

github-actions · 2024-04-08T16:41:27Z

Ephemeral environment shutdown and build artifacts deleted.

…6138) Co-authored-by: geido <[email protected]> Co-authored-by: Diego Pucci <[email protected]>

rusackas · 2024-04-16T16:36:00Z

superset-frontend/cypress-base/cypress/e2e/dashboard/editmode.test.ts

@@ -771,7 +771,7 @@ describe('Dashboard edit', () => {
      visitEdit();
    });

-    it('should save', () => {
+    it.skip('should save', () => {


@eschutho I'm not sure the fate of these tests... should we scrap them, or try to rekindle them?

Co-authored-by: geido <[email protected]> Co-authored-by: Diego Pucci <[email protected]> (cherry picked from commit 34b1db2)

…6138) Co-authored-by: geido <[email protected]> Co-authored-by: Diego Pucci <[email protected]>

Co-authored-by: geido <[email protected]> Co-authored-by: Diego Pucci <[email protected]> (cherry picked from commit 34b1db2)

…6138) Co-authored-by: geido <[email protected]> Co-authored-by: Diego Pucci <[email protected]>

trepmag · 2025-03-24T08:45:42Z

Hello, I'm unsure why the following change was made which introduce shouldFocus in the filter input of the Data table section but it might break UX in chart explore; see #32813:
https://github.com/apache/superset/blame/f4a05a5ffdbafe879d4f917f52493563355a75df/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx#L72

superset/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx

Line 71 in 34b1db2

pull-request-size bot added the size/L label Nov 29, 2023

eschutho force-pushed the elizabeth/accessibility-tabs branch from 65ad28e to 729d07c Compare December 2, 2023 01:46

eschutho force-pushed the elizabeth/accessibility-tabs branch 2 times, most recently from 85ca7b6 to dfde2cf Compare December 14, 2023 21:42

eschutho force-pushed the elizabeth/accessibility-tabs branch 2 times, most recently from 7b1f0dd to 3da50cc Compare December 21, 2023 01:45

eschutho force-pushed the elizabeth/accessibility-tabs branch from 3da50cc to dbb08a7 Compare January 8, 2024 18:00

eschutho force-pushed the elizabeth/accessibility-tabs branch 3 times, most recently from 8d1a78b to 98b9161 Compare January 19, 2024 01:15

eschutho force-pushed the elizabeth/accessibility-tabs branch 9 times, most recently from c1543e7 to 167dda6 Compare February 2, 2024 00:45

eschutho force-pushed the elizabeth/accessibility-tabs branch from c225633 to a073e57 Compare February 26, 2024 19:40

lint

81efffb

eschutho force-pushed the elizabeth/accessibility-tabs branch from a073e57 to 81efffb Compare February 27, 2024 00:07

skip some tests

96a583b

kgabryje reviewed Feb 27, 2024

View reviewed changes

Implement submenus navigation

1c8462a

pull-request-size bot added size/XXL and removed size/XL labels Mar 26, 2024

eschutho commented Mar 26, 2024

View reviewed changes

Diego Pucci and others added 2 commits April 8, 2024 17:09

Merge

59bf495

Lint

fe8e25c

geido approved these changes Apr 8, 2024

View reviewed changes

geido merged commit 34b1db2 into apache:master Apr 8, 2024
33 checks passed

geido deleted the elizabeth/accessibility-tabs branch April 8, 2024 16:40

EnxDev pushed a commit to EnxDev/superset that referenced this pull request Apr 15, 2024

feat(accessibility): add tabbing to chart menu in dashboard (apache#2…

e861cf1

…6138) Co-authored-by: geido <[email protected]> Co-authored-by: Diego Pucci <[email protected]>

geido mentioned this pull request Apr 16, 2024

fix(Dashboard): Support "Edit chart" click on a new window #28054

Merged

9 tasks

rusackas reviewed Apr 16, 2024

View reviewed changes

betodealmeida pushed a commit that referenced this pull request Apr 25, 2024

feat(accessibility): add tabbing to chart menu in dashboard (#26138)

872642e

Co-authored-by: geido <[email protected]> Co-authored-by: Diego Pucci <[email protected]> (cherry picked from commit 34b1db2)

qleroy pushed a commit to qleroy/superset that referenced this pull request Apr 28, 2024

feat(accessibility): add tabbing to chart menu in dashboard (apache#2…

0543536

…6138) Co-authored-by: geido <[email protected]> Co-authored-by: Diego Pucci <[email protected]>

jingyi-zhao-01 pushed a commit to jingyi-zhao-01/superset that referenced this pull request May 16, 2024

feat(accessibility): add tabbing to chart menu in dashboard (apache#2…

654ea0d

…6138) Co-authored-by: geido <[email protected]> Co-authored-by: Diego Pucci <[email protected]>

eschutho added a commit that referenced this pull request Jun 5, 2024

feat(accessibility): add tabbing to chart menu in dashboard (#26138)

0a45892

Co-authored-by: geido <[email protected]> Co-authored-by: Diego Pucci <[email protected]> (cherry picked from commit 34b1db2)

sadpandajoe mentioned this pull request Nov 5, 2024

fix(dashboard): Add Conditional Scroll prevention. #30837

Open

9 tasks

vinothkumar66 pushed a commit to vinothkumar66/superset that referenced this pull request Nov 11, 2024

feat(accessibility): add tabbing to chart menu in dashboard (apache#2…

7aecbe4

…6138) Co-authored-by: geido <[email protected]> Co-authored-by: Diego Pucci <[email protected]>

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 4.1.0 labels Nov 27, 2024

yousoph mentioned this pull request Dec 11, 2024

Accessibility: Unable to access "Apply Filters" and "Clear All" buttons on dashboard filters using keyboard navigation #25860

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(accessibility): add tabbing to chart menu in dashboard #26138

feat(accessibility): add tabbing to chart menu in dashboard #26138

eschutho commented Nov 29, 2023 •

edited

Loading

codecov bot commented Dec 2, 2023 •

edited

Loading

eschutho commented Dec 8, 2023

github-actions bot commented Dec 8, 2023

yousoph commented Dec 12, 2023

eschutho commented Dec 15, 2023

github-actions bot commented Dec 15, 2023

eschutho commented Dec 21, 2023

github-actions bot commented Dec 21, 2023

eschutho commented Jan 19, 2024

github-actions bot commented Jan 19, 2024

kasiazjc commented Jan 22, 2024

kgabryje Feb 27, 2024 •

edited

Loading

eschutho Feb 27, 2024

kgabryje commented Feb 27, 2024

eschutho commented Feb 27, 2024

eschutho Mar 26, 2024

geido Apr 8, 2024

eschutho Apr 12, 2024

github-actions bot commented Apr 8, 2024

rusackas Apr 16, 2024

trepmag commented Mar 24, 2025 •

edited

Loading

feat(accessibility): add tabbing to chart menu in dashboard #26138

feat(accessibility): add tabbing to chart menu in dashboard #26138

Conversation

eschutho commented Nov 29, 2023 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

codecov bot commented Dec 2, 2023 • edited Loading

Codecov Report

eschutho commented Dec 8, 2023

github-actions bot commented Dec 8, 2023

yousoph commented Dec 12, 2023

eschutho commented Dec 15, 2023

github-actions bot commented Dec 15, 2023

eschutho commented Dec 21, 2023

github-actions bot commented Dec 21, 2023

eschutho commented Jan 19, 2024

github-actions bot commented Jan 19, 2024

kasiazjc commented Jan 22, 2024

kgabryje Feb 27, 2024 • edited Loading

Choose a reason for hiding this comment

eschutho Feb 27, 2024

Choose a reason for hiding this comment

kgabryje commented Feb 27, 2024

eschutho commented Feb 27, 2024

eschutho Mar 26, 2024

Choose a reason for hiding this comment

geido Apr 8, 2024

Choose a reason for hiding this comment

eschutho Apr 12, 2024

Choose a reason for hiding this comment

github-actions bot commented Apr 8, 2024

rusackas Apr 16, 2024

Choose a reason for hiding this comment

trepmag commented Mar 24, 2025 • edited Loading

eschutho commented Nov 29, 2023 •

edited

Loading

codecov bot commented Dec 2, 2023 •

edited

Loading

kgabryje Feb 27, 2024 •

edited

Loading

trepmag commented Mar 24, 2025 •

edited

Loading