Page MenuHomePhabricator

Clarify and align TabSelectWidget focus
Closed, ResolvedPublic

Assigned To
Authored By
Volker_E
May 16 2018, 10:57 PM
Referenced Files
F18506968: image.png
May 24 2018, 12:19 PM
F18492826: image.png
May 23 2018, 4:43 PM
F18492837: image.png
May 23 2018, 4:43 PM
F18308345: image.png
May 16 2018, 10:57 PM
F18308341: image.png
May 16 2018, 10:57 PM
F18308348: image.png
May 16 2018, 10:57 PM
F18308335: image.png
May 16 2018, 10:57 PM
F18308343: image.png
May 16 2018, 10:57 PM

Description

As of v0.27.0 the (keyboard) focus appearance of TabSelectWidget is a bit disruptive and not overly clear, distinguishly visible on OOUI-fied Special:Preferences T117781.

image.png (454×2 px, 85 KB)

Let's put the focus on the TabOptionWidget instead:

themebeforeafter (proposed)
WikimediaUI
image.png (298×1 px, 28 KB)
image.png (302×1 px, 27 KB)
Apex
image.png (296×1 px, 26 KB)
image.png (306×1 px, 27 KB)

Event Timeline

Change 433494 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] themes: Clarify and align focus on TabselectWidget's selected tab

https://gerrit.wikimedia.org/r/433494

Moar options:

image.png (288×1 px, 26 KB)
focus on top
image.png (266×1 px, 25 KB)
focus on bottom slightly shortened

Change 433494 merged by jenkins-bot:
[oojs/ui@master] themes: Clarify and align focus on TabselectWidget's selected tab

https://gerrit.wikimedia.org/r/433494

Jdforrester-WMF edited projects, added OOUI (OOUI-0.27.0); removed OOUI.
Jdforrester-WMF moved this task from OOUI-0.27.0 to OOUI-0.27.1 on the OOUI board.
Jdforrester-WMF edited projects, added OOUI (OOUI-0.27.1); removed OOUI (OOUI-0.27.0).

Final implementation:

image.png (131×837 px, 6 KB)

It was not clear to me when I saw this that the item with the blue bar is focussed, rather than just selected. I would expect a "ring" or border around the entire item, like we do for everything else.

@matmarex That seemed to strong of a treatment in this case. Although I understand the sentiment when only looking at the static screenshot, I don't think it's a real issue when you look for the focus in movement (disconnected, but also in comparison to our inconsitencies on focus styles elsewhere, this seems like an improvement).

@matmarex I forget to mention an important differentiation in this widget regarding nteraction patterns: Users can't focus the other tabs without it being selected, so changing the focus and selection goes hand-in-hand and you've got the selected white background I'm WikimediaUI. If we offer in future for users to focus tabs and in a next step actively selecting them, we might need to reevaluate the focus appearance as well again.

Vvjjkkii renamed this task from Clarify and align TabSelectWidget focus to gucaaaaaaa.Jul 1 2018, 1:09 AM
Vvjjkkii reopened this task as Open.
Vvjjkkii removed Volker_E as the assignee of this task.
Vvjjkkii triaged this task as High priority.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed subscribers: gerritbot, Aklapper.
CommunityTechBot renamed this task from gucaaaaaaa to Clarify and align TabSelectWidget focus .Jul 2 2018, 4:06 PM
CommunityTechBot closed this task as Resolved.
CommunityTechBot assigned this task to Volker_E.
CommunityTechBot raised the priority of this task from High to Needs Triage.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added subscribers: gerritbot, Aklapper.