massucattoj opened a new pull request, #37805: URL: https://github.com/apache/superset/pull/37805
<!--- Please write the PR title following the conventions at https://www.conventionalcommits.org/en/v1.0.0/ Example: fix(dashboard): load charts correctly --> ### SUMMARY This PR introduces a comprehensive theme accessibility system for Apache Superset, enabling theme designers and admins to evaluate and improve WCAG compliance of custom themes. Key additions: 3 built-in accessibility system themes: IBM Carbon (WCAG AAA), Okabe-Ito (optimized for red/green color blindness), and Paul Tol Bright (scientifically validated for color vision deficiency). These are seeded on startup and shown as read-only in the theme editor. Color blindness simulation: Users can simulate how themes appear under protanopia, deuteranopia, tritanopia, and achromatopsia via a new "Color Vision" submenu in the theme dropdown. Uses the Machado et al. (2009) algorithm (same as Chrome DevTools). Preference is persisted in localStorage. WCAG contrast analysis: An "Analyze Contrast" button in the theme modal scores themes 0-100 based on 13 foreground/background color pairs, reporting WCAG compliance level (AAA/AA/A/Fail) with specific failing contrast ratios. Theme token validation with grouped toast notifications: On startup, invalid theme tokens are validated and admins see a single grouped toast listing all failures (e.g., "Theme tokens colorPrimary, colorText in Dark Mode was unable to be loaded"). Validation hooks and monitor component: useThemeValidation and useThemeTokenValidation hooks plus a ThemeValidationMonitor component that validates the active theme on app initialization. ### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF <!--- Skip this if not applicable --> - The 3 new accessibility themes applied to a dashboard <img width="1881" height="658" alt="Screenshot 2026-02-09 at 11 33 44" src="https://github.com/user-attachments/assets/444d010c-807d-4940-888b-724bf5595b16"; /> - The new "Color Vision" submenu in the theme menu <img width="1884" height="648" alt="Screenshot 2026-02-09 at 11 34 25" src="https://github.com/user-attachments/assets/6bea7615-4f44-4f49-ace7-1ef74e30863a"; /> - A grouped toast notification for invalid theme tokens <img width="1886" height="1252" alt="Screenshot 2026-02-09 at 11 34 59" src="https://github.com/user-attachments/assets/0e3bf153-51b1-4dc6-a2ca-172fe2a6b1db"; /> - The accessibility score results panel in the theme modal <img width="1128" height="715" alt="Screenshot 2026-02-09 at 11 35 24" src="https://github.com/user-attachments/assets/53d1aea3-fd7a-4cd7-9196-919c3cb3963b"; /> <img width="1114" height="850" alt="Screenshot 2026-02-09 at 11 35 37" src="https://github.com/user-attachments/assets/a48f3737-8d83-4f23-9c04-04395ef704fd"; /> <img width="1086" height="1048" alt="Screenshot 2026-02-09 at 11 35 46" src="https://github.com/user-attachments/assets/571aebd1-04e1-4f80-80ba-88898a01b375"; /> ### TESTING INSTRUCTIONS System themes seeding: Start the application and navigate to the Themes page. Verify that 3 new accessibility themes appear (IBM Carbon, Okabe-Ito, Paul Tol Bright) and are marked as system/read-only. Color blindness simulation: Click the theme menu in the top-right navigation bar. Open the "Color Vision" submenu and select each mode (Protanopia, Deuteranopia, Tritanopia, Achromatopsia). Verify the UI colors transform accordingly. Refresh the page and confirm the selection persists. Accessibility analysis: Open the theme modal for any theme, click "Analyze Contrast", and verify the score, WCAG level badge, and any contrast issues are displayed with actual vs. required ratios. Theme validation toast: As an admin, configure a theme with invalid token values. Reload the app and verify a single grouped toast appears listing all failing tokens. Verify non-admin users do not see the toast. Accessibility themes contrast: Apply each of the 3 accessibility themes and run the contrast analysis — they should score highly (AA or AAA level). ### ADDITIONAL INFORMATION <!--- Check any relevant boxes with "x" --> <!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue --> - [ ] Has associated issue: - [ ] Required feature flags: - [x] Changes UI - [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351)) - [ ] Migration is atomic, supports rollback & is backwards-compatible - [ ] Confirm DB migration upgrade and downgrade tested - [ ] Runtime estimates and downtime expectations provided - [x] Introduces new feature or API - [ ] Removes existing feature or API -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
