# STR: 1. Activate High Contrast Theme (i.e. `Night Sky` on Windows OS or `Increase Contrast` on macOS) 2. Open `Manage Colors` dialog under `about:preferences` > `General` > `Colors` 3. Hover over the primary `OK` button, compare its appearance with the adjacent secondary `Cancel` button 4. Hover over the secondary `Cancel` button, compare its appearance with the adjacent primary `OK` button. # Expected: When either button is hovered, its hovered state is differentiable from the default appearance and it looks different than the adjacent non-hovered button: - For example, on Windows OS with "Night Sky" HCM theme enabled, when a primary button is hovered it has purple foreground and gray background while a secondary button retains yellow foreground and black background. # Actual: When either button is hovered, its hovered state looks exactly as unhovered state of the adjacent button which makes it is hard to discern which button is, in fact, is hovered and will be activated on click, or if any button is hovered (especially for users with low vision and/or with cognitive difficulties): - On Windows OS with "Night Sky" HCM theme enabled, when a primary button is hovered both buttons have yellow foreground and black background - and vice versa - On macOS with Increased contrast with Dark theme, when a primary button is hovered both buttons have white foreground and dark gray background - and vice versa It can be resolved by converting our primary and secondary button hover styles to use selected item colors: - `SelectedItem` for Selected Background - `SelectedItemText` for Selected Text / foreground
Bug 1787930 Comment 0 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
# STR: 1. Activate High Contrast Theme (i.e. `Night Sky` on Windows OS or `Increase Contrast` on macOS) 2. Open `Manage Colors` dialog under `about:preferences` > `General` > `Colors` 3. Hover over the primary `OK` button, compare its appearance with the adjacent secondary `Cancel` button 4. Hover over the secondary `Cancel` button, compare its appearance with the adjacent primary `OK` button. # Expected: When either button is hovered, its hovered state is differentiable from the default appearance and it looks different than the adjacent non-hovered button: - For example, on Windows OS with "Night Sky" HCM theme enabled, when a primary button is hovered it has gray foreground and purple background while a secondary button retains yellow foreground and black background. # Actual: When either button is hovered, its hovered state looks exactly as unhovered state of the adjacent button which makes it is hard to discern which button is, in fact, is hovered and will be activated on click, or if any button is hovered (especially for users with low vision and/or with cognitive difficulties): - On Windows OS with "Night Sky" HCM theme enabled, when a primary button is hovered both buttons have yellow foreground and black background - and vice versa - On macOS with Increased contrast with Dark theme, when a primary button is hovered both buttons have white foreground and dark gray background - and vice versa It can be resolved by converting our primary and secondary button hover styles to use selected item colors: - `SelectedItem` for Selected Background - `SelectedItemText` for Selected Text / foreground