Steps to replicate the issue (include links if applicable):
- Visit https://test.wikipedia.org/wiki/Special:ProtectedPages
- Check color contrast on page
What happens?:
The element .mw-protectedpages-unknown has a custom style that is not using a design token and is thus not accessible.
What should have happened instead?:
The color here is equvialent to @color-placeholder or @color-disabled but the text is neither a placeholder or disabled text. Depending on what information it is trying to convey it should use a different token / color.
Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):
Other information (browser name/version, screenshots, etc.):
Requirement
Ensure that the .mw-protectedpages-unknown element on the Special:ProtectedPages page has accessible color contrast, using appropriate design tokens based on the text’s intent (e.g., placeholder or disabled).
BDD
Feature: Ensure accessible color contrast for `.mw-protectedpages-unknown` on Special:ProtectedPages
Scenario: Verify accessible color contrast for `.mw-protectedpages-unknown`
Given a user visits the Special:ProtectedPages page
When they check the color contrast of the `.mw-protectedpages-unknown` element
Then the text should have sufficient contrast as per accessibility standards
And it should use appropriate design tokens for its intentTest Steps
Test Case 1: Verify Accessible Color Contrast for .mw-protectedpages-unknown
- Visit https://test.wikipedia.org/wiki/Special:ProtectedPages.
- Locate the .mw-protectedpages-unknown element on the page.
- Check the color contrast of the element against accessibility standards.
- Verify that the element uses the appropriate design token based on its purpose (e.g., placeholder or disabled).
- AC1: Confirm that the color contrast meets accessibility standards.
- AC2: Confirm that the correct design token is applied to the .mw-protectedpages-unknown element.
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T367826#10345037 |
| 2 | ✅ | T367826#10345037 |
