Background

In 358405 we took a short cut to make Special:Notifications look consistent with other pages. At the time we noted accessibility issues relating to color contrast in the light theme and decided to carry them over to the dark theme by applying the notheme and skin-invert classes to the content. Details on why this is occurring and how team's can fix this are provided on T356434

User story

As a reader I want an accessible experience when viewing Special:Notifications

Requirements

• the notheme and skin-invert classes have been removed from the page
• Hardcoded CSS property values are replaced with Codex design tokens. Update any hex codes e.g. color: #fff with the equivalent design token https://doc.wikimedia.org/codex/latest/design-tokens/overview.html
• Light theme should have no accessibility issues
• Dark theme should have no accessibility issues

BDD

• For QA engineer to fill out

Test Steps

• Enable https://chromewebstore.google.com/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf Chrome extension
• Visit https://en.wikipedia.beta.wmflabs.org/wiki/Special:Notifications?vectornightmode=1 making sure you have notifications

What happens?:
5 color contrast issues:

• (including on hover)

What should have happened instead?:
No color contrast issues (See T356434 for solutions)

Design

❓Please review the following below
"Unread" color black contrast issue

Example comment in the notifications, color contrast

Date and sub descriptions have color contrast

Acceptance criteria

• has color contrast issues in night mode

Communication criteria - does this need an announcement or discussion?

• Add communication criteria

Rollback plan

• What is the rollback plan in production for this task if something goes wrong?

This task was created by Version 1.0.0 of the Web team task template using phabulous