Steps to replicate the issue (include links if applicable):
- Go to https://en.wikipedia.org/wiki/Main_Page with Vector 2022
- Under "Appearance > Color", Click "Dark"
- Hold the down arrow
What happens?:
Rapidly flashing colours, not ideal for those with epilepsy.
This should be fixed quickly, since it is common for people to scroll down pages with the down arrow
What should have happened instead?:
Some kind of prevention from scrolling down the radio buttons, or at least a delay. Noting this task is based on VRT ticket 2025081910001287.
A workaround is to put the following in common.js by the way:
var disableArrowKeys = function(e){
if($("input[name='skin-client-pref-skin-theme-group']").is(':focus')){
if(e.keyCode==37){
e.preventDefault();
window.scrollBy(-100, 0);
}
else if(e.keyCode==38){
e.preventDefault();
window.scrollBy(0, -100);
}
else if(e.keyCode==39){
e.preventDefault();
window.scrollBy(100, 0);
}
else if(e.keyCode==40){
e.preventDefault();
window.scrollBy(0, 100);
}
}
}
$(document).keydown(disableArrowKeys);Requirement
Scope: Desktop web (Vector 2022).
- When a user selects a dark mode radio button under “Appearance > Color,” holding or pressing the arrow keys must not trigger rapid flashing or color changes.
- The interface must prevent repeated toggling or re-rendering of color modes while scrolling or navigating with arrow keys.
- Implement a delay or disable input repetition to ensure stable transition between modes.
- The fix must eliminate flashing effects that may cause accessibility issues (e.g., for users with photosensitivity or epilepsy).
BDD
Feature: Prevent flashing when scrolling after dark mode selection
Scenario: User selects dark mode and scrolls with arrow keys
Given I am using Vector 2022 on desktop
And I open “Appearance > Color” settings
When I click the “Dark” radio button
And hold the down arrow key to scroll
Then the page does not flash or rapidly change colors
And the dark mode remains stable until I release the key or select another optionTest Steps
Test Case 1: Prevent flashing when scrolling after selecting dark mode
- Open https://en.wikipedia.org/wiki/Main_Page using Vector 2022.
- Go to “Appearance > Color” in the settings menu.
- Click the “Dark” radio button.
- Hold the down arrow key to scroll.
- AC1: No rapid flashing or flickering occurs while scrolling.
- AC2: The dark mode remains applied consistently.
- AC3: The UI remains responsive and accessible (no frozen or jittery transitions).
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T402285#11283835 |
| 2 | ✅ | T402285#11283835 |
| 3 | ✅ | T402285#11283835 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T402285#11283842 |
| 2 | ✅ | T402285#11283842 |
| 3 | ✅ | T402285#11283842 |
