Page MenuHomePhabricator

Apex theme: various widgets have no focus state, including ButtonWidget
Closed, ResolvedPublic

Description

Try tabbing through the widgets demo.

Taken from merged-in duplicate T162891 as of v0.20.x:
In the MediaWiki theme, it's very obvious: there's a thick blue border when the widget is focused:

But in the Apex theme, used by MediaWiki's Monobook skin, it's so subtle as to be almost unnoticeable unless two identical buttons are right next to each other:

The difference is apparently only #eee to #aaa on a 1-pixel-thick border that's adjacent to other shades of grey.

Event Timeline

Esanders created this task.Mar 28 2015, 2:13 PM
Esanders assigned this task to matmarex.
Esanders raised the priority of this task from to Needs Triage.
Esanders updated the task description. (Show Details)
Esanders added a project: OOUI.
Esanders added a subscriber: Esanders.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 28 2015, 2:13 PM

Fairly sure they never had, and no hover state either. I don't think I can do much here unless Trevor has an idea of how this should look. (Unless we want to just restore the default styles – light blue outline.)

matmarex removed matmarex as the assignee of this task.Mar 31 2015, 11:27 AM
matmarex triaged this task as Low priority.
matmarex added a project: Accessibility.
matmarex set Security to None.
matmarex added a subscriber: matmarex.
Volker_E updated the task description. (Show Details)Apr 14 2017, 4:28 PM

@Koavf you wrote in the duplicate that "it used to be clear which button had the focus and now it's not." - and - "Firefox 55, Windows 10 (Sorry, it's my work computer)" -
Question: are you using the same browser on your non-work computer?

I tested at a wiki running mw1.27.3 (wikiconference.org (login-required))
with Firefox 54, Mint Linux - monobook doesn't seem to have any highlight for the focus (just a dotted line is shown around the "minor edit" checkbox, and no change at all around the buttons) - confirmable by toggling the pseudo-class in inspector.


However with Chromium 59 - monobook has a green outline

I always use Monobook and Firefox. The OS ends up being Windows, since I can't control that.

Change 367437 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Apex theme: Introduce framed button focus indication

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

Change 367438 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Apex theme: Align ButtonGroup-/ButtonSelectWidget focus logic to WikimediaUI

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

Patch sets above are implementing focus state in this way:

Following considerations were taken into result:

  • Clearly indicating focus in a harmonious way with 3D appearance of Apex buttons
  • Darker indicator color than current text input fields
  • Simple color code harmonious with other colors – #ace
  • Reuse as much code from WikimediaUI theme as possible for lowest possible maintenance

@Volker_E These changes are a definite improvement. Will you be adding a patch for the focus state of frameless buttons too?

Volker_E moved this task from Backlog to Doing on the OOUI board.Jul 25 2017, 2:29 PM

Change 367437 merged by jenkins-bot:
[oojs/ui@master] Apex theme: Introduce framed button focus indication

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

Change 367438 merged by jenkins-bot:
[oojs/ui@master] Apex theme: Align ButtonGroup-/ButtonSelectWidget focus logic to WikimediaUI

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

matmarex added a comment.EditedJul 25 2017, 10:32 PM

I went through the demo, and the following widgets still don't have any focus styling:

  • Frameless buttons
  • TagMultiselectWidget
  • CapsuleMultiselectWidget

Change 368417 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Apex theme: Add focus styles to frameless buttons

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

Change 368446 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Apex theme: Add focus styles to Tag-/CapsuleMultiselectWidget

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

Change 368448 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Apex theme: Align TextInputWidget focus to variablized way

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

Change 368586 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Apex theme: Align ToggleSwitchWidget focus style to other widgets

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

Change 368417 merged by jenkins-bot:
[oojs/ui@master] Apex theme: Add focus styles to frameless buttons

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

Volker_E moved this task from Doing to Reviewing on the OOUI board.Jul 31 2017, 6:21 PM

Change 368586 merged by jenkins-bot:
[oojs/ui@master] Apex theme: Align ToggleSwitchWidget focus style to other widgets

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

Change 368448 merged by jenkins-bot:
[oojs/ui@master] Apex theme: Align TextInputWidget focus to variablized way

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

Change 368446 merged by jenkins-bot:
[oojs/ui@master] Apex theme: Add focus styles to Tag-/CapsuleMultiselectWidget

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

Change 369401 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Apex theme: Align Dropdown*Widget's focus state with other widgets

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

Volker_E moved this task from Reviewing to OOjs-UI-0.22.4 on the OOUI board.Aug 1 2017, 3:48 PM
Volker_E edited projects, added OOUI (OOjs-UI-0.22.4); removed OOUI.

Change 369401 merged by jenkins-bot:
[oojs/ui@master] Apex theme: Align Dropdown*Widget's focus state with other widgets

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

Volker_E closed this task as Resolved.Aug 1 2017, 6:43 PM
Volker_E claimed this task.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.