1907827 - Opening Text and Layout drop-downs using keyboard navigation will show incorrect background color

Status: RESOLVED FIXED

(Toolkit :: Reader Mode, defect, P3)

Description

[Daniel Bodea [:danibodea]]

Attachment: drop-down color difference between mouse and keyboard navigation.png

Note

• When the user navigates to the Text and Layout panel and opens the drop-downs Font or Font Weight drop-downs using keyboard navigation, he will notice that a wrong background color is rendered for the drop-downs.
• A different background color is rendered when opening these drop-downs using cursor navigation. It appears as if the "hover-effect" color is shown when using the cursor and the "non-hover" color is shown when using keyboard navigation.

Found in

• Beta v129.0b2

Affected versions

• Nightly v 130.0a1
• Beta v129.0b3

Tested platforms

• Affected platforms: all
• Unaffected platforms: none

Steps to reproduce

1. Load an article that supports Reader View.
2. Enter Reader View mode.
3. Using the cursor, navigate to Text and Layout panel and open the Font or Font Wieght drop-down. Then close it.
4. Using keyboard navigation open any of the drop-downs.

Expected result

• An incorrect background color is displayed.

Actual result

• The same background color is displayed.

Regression range

• not a regression, since implementation.

Additional notes

• This issue occurs on all OSes, in all combinations of Browser Theme and Reader View Theme, but some are more obvious than others:
  Browser Dark Theme + Reader View Auto - obvious
  Browser Dark Theme + Reader View Light - obvious
  Browser Dark Theme + Reader View Dark - obvious
  Browser Dark Theme + Reader View Sepia - obvious
  Browser Dark Theme + Reader View Contrast - obvious
  Browser Dark Theme + Reader View Gray - obvious
  Browser Light Theme + Reader View Auto - yes, but small difference
  Browser Light Theme + Reader View Light - yes, but small difference
  Browser Light Theme + Reader View Dark - obvious
  Browser Light Theme + Reader View Sepia - yes, but small difference
  Browser Light Theme + Reader View Contrast - obvious
  Browser Light Theme + Reader View Gray - yes, but small difference

Comment 1

[Nathan LaPré]

Marking access-s3. It looks like the incorrect background colors in the given example leave us with text color #F7FBFE on background #55555F, which is still passing WCAG AAA (at a ratio of 7.08). The more concerning thing about this from an accessibility perspective is what we're communicating - it seems that we're losing the info we try to communicate with hover state.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The severity field for this bug is set to S4. However, the accessibility severity is higher, .
:Gijs, could you consider increasing the severity?

For more information, please visit BugBot documentation.

Comment 3

[:Gijs (he/him)]

Attachment: Bug 1907827 - select dropdowns in reader mode should use same background when focused or hovered, r?#reader-mode-reviewers

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/bda850ea0f4d
select dropdowns in reader mode should use same background when focused or hovered, r=desktop-theme-reviewers,emilio

Comment 5

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/bda850ea0f4d

Comment 6

[Daniel Bodea [:danibodea]]

I understand that the fix is supposed to make: "select dropdowns in reader mode use same background when focused or hovered".

The change seems somewhat unsatisfactory and I'll try to explain:

1. Affected Build Release v137.0.2 behavior:
   Case A. Using mouse, click any drop-down: causes it to open with the background color same as hover color, showing no hover effect over the drop-down options.
   Case B. Using mouse, open any drop-down, than the other one: causes the drop-down to open in a different color than the hover color, allowing the hover effect to work on the drop-down options.
   Case C. Using keyboard, open any drop-down: causes the drop-down to open in a different color than the hover color, allowing the select effect to work on the drop-down options, just like a hover effect.

2. Build containing the fix Beta v138.0 (RC) behavior:
   Case A. behavior does not change.
   Case B. behavior does not change
   Case C. Using keyboard, open any drop-down: causes the drop-down to open in the same color as the hover color, disabling the select effect to on the drop-down options, just like a hover effect.

Conclusion: The behavior with Case B is more aesthetic, proving that there is an improved UI version of these drop-downs' behavior, giving the impression that the UI is not working properly in Case A and C, where there is no hover effect or keyboard selection effect.

Is there a reason why the change was not made the other way around? I would suggest that the behavior of Case A and C is made to match Case B. Meaning, the drop-down background color should NOT match with the hover color. This would enable the hover effect and select effect with keyboard navigation inside the drop-down in all 3 cases. Does this make sense? Thanks!