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

Status: NEW

(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.