Closed Bug 1817836 Opened 1 year ago Closed 1 year ago

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

Categories

(Thunderbird :: Theme, defect, P1)

Thunderbird 112

Tracking

(Not tracked)

RESOLVED FIXED
112 Branch

People

(Reporter: thomas8, Assigned: micah)

References

(Blocks 1 open bug)

Details

(Keywords: polish, ux-consistency, Whiteboard: [Supernova3p])

Attachments

(4 files, 1 obsolete file)

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.)
Flags: needinfo?(richard.marti)

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

Flags: needinfo?(richard.marti) → needinfo?(alessandro)
Summary: Focus and pressed state of buttons on quick filter bar almost undiscoverable, and should be flat & borderless on Windows → Focused and pressed state of buttons on quick filter bar almost undiscoverable, and should be flat & borderless when unpressed on Windows

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.

Attachment #9318776 - Attachment is obsolete: true
Attachment #9318774 - Attachment description: Screenshot 1: Focused/pressed QFB buttons not discoverable → Screenshot 1: Focused/pressed QFB buttons not discoverable on Supernova

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.

Flags: needinfo?(alessandro)

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.

Assignee: nobody → micah

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
Duplicate of this bug: 1818001
Component: Mail Window Front End → Theme
Duplicate of this bug: 1819548
Duplicate of this bug: 1820329
Duplicate of this bug: 1820486
Duplicate of this bug: 1820500

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

Priority: -- → P1
Status: NEW → ASSIGNED
Target Milestone: --- → 112 Branch

Pushed by elizabeth@thunderbird.net:
https://hg.mozilla.org/comm-central/rev/2c53242cc642
Add checked button styles to widgets.css and Quick Filter Bar. r=aleca

Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED

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?

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)

Depends on: 1820794

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

(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

Whiteboard: [supernova] → [Supernova3p]
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: