1817836 - Focused and pressed state of buttons on quick filter bar almost undiscoverable, and should be flat & borderless when unpressed on Windows

Status: RESOLVED FIXED

(Thunderbird :: Theme, defect, P1)

Description

[Thomas D. (:thomas8)]

Attachment: Screenshot 1: Focused/pressed QFB buttons not discoverable on Supernova

Seen on 112.0a1 (2023-02-20) (64-bit)

Expanded from Elizabeth's accessibility analysis

New 3-pane makes all the buttons on quick filter bar focusable - that's great. However, their focused or pressed state is almost undiscoverable and needs some love. Also, all of these buttons should be flat & borderless on Windows when not pressed (as on TB 102).

Richard?

Actual (see screenshot):

• Focused button not discoverable (Starred button has focus with very faint grey border)
• Pressed button not discoverable (Tags button is pressed, but hardly distinct from others)
• Unpressed buttons stand out from the entire flat UI with needless border
• Any of/All of selector looks alien

Expected

• Clear and consistent app-wide focus distinction (thick blue border)
• Clear contrast between unpressed (flat, borderless) vs. pressed (can then keep the inside shadow) as in TB 102.
• Unpressed buttons should be flat and borderless (as seen on TB 102) for
  • less saliency when unpressed (calm UI)
  • better distinction against pressed state
  • ux-consistency with our overall flat design (e.g. buttons on Places toolbar)
  • ux-consistency with Windows OS
• Make Any of/All of selector blend in better (font-size, border, etc.)

Comment 1

[Richard Marti (:Paenglab)]

I'll redirect to Alex to say how the buttons should look and behave.

Comment 2

[Thomas D. (:thomas8)]

Attachment: Screenshot 2: Unpressed buttons in TB 102 are flat and borderless

Here's how it looks in TB 102, where unpressed buttons are still flat and borderless as expected, which makes the UI calm and pressed buttons stand out better.

Comment 3

[Thomas D. (:thomas8)]

Attachment: Screenshot 2: Unpressed buttons in TB 102 are flat and borderless

Here's how it looks in TB 102, where unpressed buttons are still flat and borderless as expected, which makes the UI calm and pressed buttons stand out better.

Comment 4

[Alessandro Castellani [:aleca]]

Micah created a widgets.css file that introduces reusable classes for common elements, like buttons.
We need to apply those classes tot he quick filter bar, in order to have all proper focus, hover, and active variations.

For those particular buttons, which are aria-chacked, we're exploring a different UI solution to ensure that the various states are clear and easy to see.

In general, we're trying to define some consistency in terms of how a button should look, and what kind of button types we want to support and where they should go.
We will share these rules in the upcoming week so we can all discuss them and find a consistent path forward.

Comment 5

[Alessandro Castellani [:aleca]]

Assigning this to Micah just to keep track of it. No action plan has been defined yet so no need to act on this bug.

Comment 6

[Thomas D. (:thomas8)]

Attachment: Screenshot 3: Checked vs. unchecked and hover states in 102 vs. 112, dark and light theme (112 lacking distinctive contrast)

Thanks to :NicolasWeb for providing this comparative screenshot (102 vs. 112) in his bug 1818001, which we should also cover here (new aspects: hover state, other themes). Lack of distinctive contrast across all themes in 112.

• Checked vs. unchecked buttons
• Hover state
• Default, dark and light theme

Comment 12

[Alessandro Castellani [:aleca]]

We're actively working on this and should have a patch ready for this week.

Comment 13

[[e-mail]]

Attachment: Bug 1817836 - Add checked button styles to widgets.css and Quick Filter Bar. r=#thunderbird-front-end-reviewers

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/2c53242cc642
Add checked button styles to widgets.css and Quick Filter Bar. r=aleca

Comment 15

[Sören Hentzschel]

While the new indicator makes it much more clear that a quick filter button is pressed, at a first glance unpressed buttons still look like pressed buttons. Could at least the background of these buttons a bit lighter in the unpressed state, for example as in the message header buttons?

Comment 16

[Nicolas Mandil (:NicolasWeb)]

Soren, do you consider Light or Dark theme please ?

I made this bug Depends on bug 1820794 (that is about dark theme at first), as the background color of the whole quick filter toolbar will change. Waiting for that change to decide if that bug should be Reopen (or a followup should be reported, as this one has already checked-in)

Comment 17

[Wayne Mery (:wsmwk)]

Individual tag buttons under show only mssages with tags on them suffers the same problem

Comment 18

[Nicolas Mandil (:NicolasWeb)]

(In reply to Wayne Mery (:wsmwk) from comment #17)

Individual tag buttons under show only mssages with tags on them suffers the same problem

I do confirm. Cannot see the difference with pressed state