Page MenuHomePhabricator

DateInputWidget: popup CalendarWidget shouldn't have a blue border
Closed, ResolvedPublic

Assigned To
Authored By
Esanders
Sep 25 2015, 2:56 PM
Referenced Files
F15864025: image.png
Mar 19 2018, 5:00 AM
F15864023: image.png
Mar 19 2018, 5:00 AM
F2644101: wDAZY9W.png
Sep 29 2015, 1:49 AM
F2644099: A99nppw.png
Sep 29 2015, 1:49 AM
F2634610: pasted_file
Sep 25 2015, 2:56 PM
F2634613: pasted_file
Sep 25 2015, 2:56 PM

Description

Compare:

pasted_file (277×307 px, 19 KB)

and
pasted_file (229×371 px, 12 KB)

There are other cases where we use dropdowns attached to focused inputs, and we never outline them.

Some pages currently using DateInputWidget:


Resolving patch output:

image.png (566×774 px, 69 KB)
(input focussed)
image.png (562×760 px, 68 KB)
(with calendar dropdown focussed, further navigation with arrow keys)

Event Timeline

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 subscribers: Aklapper, Esanders.

Change 241082 had a related patch set uploaded (by Esanders):
Remove blue border from DateInputWidget calendar

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

I don't think that is sufficient reason to remove focussing all together.

Jdforrester-WMF triaged this task as Medium priority.
Jdforrester-WMF edited projects, added UI-Standardization; removed OOUI.
Jdforrester-WMF set Security to None.

The text field itself continues to have the blue focus border, just not the calendar. (When a calendar is focussed by itself, it should also have the border, but not otherwise.)

We discussed this with @Esanders on IRC and we agreed on using the following for now (the patch is updated):

When focus is on the text field
A99nppw.png (276×307 px, 9 KB)
When focus is on the calendar
wDAZY9W.png (273×306 px, 9 KB)

Long-term, we'd like to have different calendar-specific focus styles (right now we're just reusing the one used for textual inputs, which is confusing), and we'd like the text input field to keep looking focussed while the focus is on the calendar (we need to think up a non-hacky implementation).

Change 241082 merged by jenkins-bot:
Remove blue border from DateInputWidget calendar

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

matmarex lowered the priority of this task from Medium to Low.Sep 29 2015, 2:00 PM
matmarex removed a project: Patch-For-Review.

Yes, the blue border is used to indicate a focused text input only, so while Bartosz's patch is an improvement it does not close this bug.

matmarex renamed this task from DateInputWidget: popup shouldn't have a blue border to DateInputWidget: popup CalendarWidget shouldn't have a blue border.Oct 16 2015, 6:44 PM

Hmm. Can anyone remind me why this is not closed yet?

Volker_E reassigned this task from Esanders to matmarex.
Volker_E subscribed.

@matmarex No idea. :)
Looks good and is coherent for an interactive element. We could further discuss if the calendar needs focus outline, but when we were to decide it does not, we would need to have tab functionality with better user feedback clarified. I prefer living with this (good) compromise before spending extra time here.