Background

User story

As a dark mode user, I want the Vector interface to be accessible and have sufficient contrast

Acceptance criteria

• All dropdown arrows in Vector are made to have the correct color contrast in dark mode

Communication criteria - does this need an announcement or discussion?

none

Developer notes

Consider using codex here for the dropdown arrow icon

Requirement

Ensure that the user dropdown menu arrow in the Vector interface has the correct color contrast in dark mode, making it accessible. The user must be logged in.

BDD

Feature: Dropdown Arrows Color Contrast in Dark Mode

  Scenario: Ensure correct color contrast for user dropdown menu arrow in dark mode
    Given the user is logged in
    And the user has enabled dark mode
    When the user views the user dropdown menu arrow in the Vector interface
    Then the dropdown arrow should have the correct color contrast
    And the arrow should be accessible

Test Steps

Test Case 1: Ensure Correct Color Contrast for User Dropdown Menu Arrow in Dark Mode

1. Log in to Wikipedia.
2. Enable dark mode in the Vector interface.
3. Navigate to a page with the user dropdown menu arrow.
4. AC1: Confirm that the user dropdown menu arrow has the correct color contrast and is accessible.

QA Results - Beta

QA Results - PROD