Page MenuHomePhabricator

Clarify and align TabSelectWidget focus
Closed, ResolvedPublic

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.

Let's put the focus on the TabOptionWidget instead:

themebeforeafter (proposed)
WikimediaUI
Apex

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 16 2018, 10:57 PM

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

Volker_E moved this task from Backlog to Reviewing on the OOUI board.May 16 2018, 10:59 PM

Moar options:

focus on top
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 moved this task from Reviewing to OOUI-0.27.0 on the OOUI board.May 23 2018, 8:00 PM
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).
Volker_E closed this task as Resolved.May 23 2018, 9:26 PM

Nope! :)

Final implementation:

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.