Background
QuickSurveys have a non-standard background color that clashes with dark mode (which can be activated by putting ?vectornightmode=1 at the end of any URL)
User story
As someone who wants to run a quick survey, I need to be able to target users using dark mode.
Requirement
- Surveys should be readable in dark mode.
- The background show use the design token @background-color-neutral
BDD
Feature: Readable QuickSurveys in Dark Mode Scenario: Ensure QuickSurveys are readable in dark mode Given the QuickSurveys feature is enabled When the user views a survey in dark mode Then the survey should use the `@background-color-neutral` design token for the background color And the survey should be readable and accessible
Test Steps
Test Case 1: Verify QuickSurveys in Dark Mode
- Enable dark mode.
- Navigate to this beta test page.
- In the Developer console, run:
mw.loader.using( 'ext.quicksurveys.init' ) .then( () => { mw.extQuickSurveys.showSurvey( 'AutoModerator Patroller Workstream Survey' ); } );
- AC1: Confirm that the survey uses the @background-color-neutral design token for the background color.
- AC2: Confirm that the survey is readable and accessible in dark mode.
QA Results - Beta
AC | Status | Details |
---|---|---|
1 | ✅ | T366626#9877404 |
2 | ✅ | T366626#9877404 |
QA Results - Prod
AC | Status | Details |
---|---|---|
1 | ⬜ | No prod testing needed. |
2 | ⬜ | No prod testing needed. |
Design
- Add mockups and design requirements
Communication criteria - does this need an announcement or discussion?
N/A
Rollback plan
N/A
This task was created by Version 1.0.0 of the Web team task template using phabulous