Page MenuHomePhabricator

Use a new focus indicator on text fields
Closed, ResolvedPublic

Description

  • MediaWiki UI
  • OOjs UI

Details

Reference
bz71150

Event Timeline

bzimport raised the priority of this task from to Normal.Nov 22 2014, 3:47 AM
bzimport set Reference to bz71150.
bzimport added a subscriber: Unknown Object (MLST).

gerritadmin wrote:

Change 162153 had a related patch set uploaded by Prtksxna:
inputs.less: Change focus state

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

Disabled, Normal, and Focus states

attachment Screenshot 2014-09-17 17.11.17.png ignored as obsolete

There is a spec at https://trello.com/c/MC8ovuyw/2-advanced-input-fields . I guess the issue is that this may need to be updated because it's out of sync with what's implemented.

Note that Prateek narrowed this to only cover text fields.

Disabled, Normal, and Focus states

Attached:

There was a few issues with the previous focus state on text field.

When the text field becomes activated, the blue bar hides the blinking cursor.

Shahyar, can you please take a look at the patchset?

(In reply to May from comment #5)

When the text field becomes activated, the blue bar hides the blinking
cursor.

What browser does this happen in? I can see both in Firefox and Chromium.

It's true the caret (blinking cursor) may not be quite as noticeable as it would be without the blue bar, but I'm not sure if this a problem.

I confirmed with Prateek this is an enhancement bug to change the focus indicator, not a doc bug.

Created attachment 16541
Current focus indicator in Firefox with caret showing

Attached:

Created attachment 16758
new password field

Ehh, sorry, but i don't like the new indicator :/ I like the decent progressive bar at the left side, which identifies the focus to an text field. With this patch we become a border around the whole text field? I missed the patch for the buttons, and saw the new focus around the buttons on my dev-wiki and wasn't really enthusiastic. The main reason is, that it is too much of indication (look the screenshots). Just my opinion :)

(P.S.: And i see no value of the new indicator?)

Attached:

Created attachment 16759
old password field (looks much better in my opinion)

Attached:

(In reply to Florian in comment #9)

The main reason is, that it is too much of indication (look the screenshots)

Having a border all around the element is also the default way some browsers show focus on buttons, inputs and links. There is no consistent API to style the outline they already provide which is why we have to implement it ourselves. Copying some points from the commit message of the patch -

  • Make focus state consistent across UI controls (analogous update for buttons is already merged and checkboxes coming soon).
  • Support for browsers that don't support box-shadow by making the border the same color.

(In reply to Prateek Saxena from comment #11)

There is no consistent API to
style the outline they already provide which is why we have to implement it
ourselves.

That can be right, but doesn't change my opnion, that i more like the actual indicator (that's why i posted it here and not in gerrit, the change itself looks (technically) ok for me).

Maybe there is a way to implement the actual indicator so, that it works in all browsers? :) (to be clear: i just want to say, that i like the actual (old) indicator much more, and this is, of couse, a personal opinion).

Change 162153 had a related patch set uploaded (by Paladox):
inputs.less: Change focus state

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

Patch-For-Review

Prtksxna updated the task description. (Show Details)Dec 9 2014, 10:04 AM
Prtksxna set Security to None.
Prtksxna added a subscriber: violetto.
Prtksxna claimed this task.Jan 8 2015, 11:22 PM

@Prtksxna This patch fixes this issue, correct?

violetto updated the task description. (Show Details)Mar 6 2015, 8:40 AM
violetto added projects: Design, OOUI.

Change 162153 merged by jenkins-bot:
inputs.less: Change focus state

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

That's how it looks like on a scrollable textarea:

And this if you use WikiEditor:

That the right blue indicator is missing doesn't look really good, hm?

I must say that I find the new style much more distracting than the previous one.
Note how the Twitter Bootstrap (and Phabricator, by the way) uses light blue shadows instead of thick borders.

This change came about because of the feedback we received about the right blue indicator. Some problems raised were:

  • The indicator was too close to the cursor, which made it hard to see where the cursor was.
  • "In an RTL language like Hebrew, the blue bar overlaps entirely with the cursor."
  • When tabbing on keyboard through the interface, the focus states on the controls did not have enough consistency for the user to follow where the focus area is currently at.

Perhaps in this setting like @Florian showed, we don't need a blue border to show where the focus state is due to the nature of the editing interface. After all, the point of the focus state is to help users understand where the currently active area is. If within an interface is a large text box, I wonder if users get lost in knowing what is currently active?

I'd prefer to follow this question up with more feedback. Thanks for bringing this up guys.

Prtksxna renamed this task from Use a new focus indicator on MediaWiki UI text fields to Use a new focus indicator on text fields.Mar 12 2015, 1:24 PM
Prtksxna updated the task description. (Show Details)

Change 196213 had a related patch set uploaded (by Prtksxna):
MediaWiki Theme: textInputWidget: Update focus state

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

I think the new border introduced in https://gerrit.wikimedia.org/r/#/c/162153/ is a bit too thick. to the point of being slightly jarring.

Change 196213 merged by jenkins-bot:
MediaWiki Theme: textInputWidget: Update focus state

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

Jdforrester-WMF closed this task as Resolved.Mar 12 2015, 6:46 PM
Jdforrester-WMF moved this task from Backlog to Doing on the OOUI board.
Jdforrester-WMF edited projects, added OOjs-UI-next-release; removed Patch-For-Review.

Change 197895 had a related patch set uploaded (by Esanders):
Follow up I2087030a8. Fix mangled code.

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

Change 197895 merged by jenkins-bot:
Follow-up I2087030a8: Fix mangled MediaWiki theme input transition

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

APerson added a subscriber: APerson.

I really liked the old focus indicator and think that the new one looks pretty bad. We abandoned a great design feature and, in its place, reimplemented the same old focus indicator that half the Internet uses. Not only that, but like @Ricordisamoa, I think that we even screwed that up - I can't find such jarringly thick borders anywhere else.

Change 199891 had a related patch set uploaded (by Esanders):
Balance padding now that focus highlight is balanced

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

@APerson thank you for the feedback, it is appreciated, there are two reasons that we changed the focus state for the input fields,

the first was that we'd gotten feedback from users, especially those with vision accessibility issues that the previous highlight was insufficient to guide them to the active field. I'm a firm believer that accessible design is good design for everyone, so we took this feedback to heart. While I personally think the earlier design is more aesthetically pleasing we're not going to go with something that is more aesthetically pleasing at the cost of creating a possibly serious accessibility issues.

The second important reason why we made a change here was the edge highlight wasn't something that could easily and consistently be extended to other control types like dropdowns, radio boxes, and buttons. We we shifted back to a pattern that would be easier to consistently apply to other control types.

The UI standardization project is still a work in progress. So we really appreciate this feedback to help us iterate.

Change 199891 merged by jenkins-bot:
Balance padding now that focus highlight is balanced

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

Jdforrester-WMF moved this task from Doing to Reviewing on the OOUI board.Mar 26 2015, 8:57 PM
Prtksxna updated the task description. (Show Details)Mar 27 2015, 1:05 AM

@Jaredzimmerman-WMF Thanks for clarifying! I agree that accessibility trumps aesthetics, and I'm happy to see that there was a great reason to make this change.

Jdforrester-WMF removed Prtksxna as the assignee of this task.Mar 28 2015, 1:21 AM
Jdforrester-WMF assigned this task to Prtksxna.
Jdforrester-WMF removed a project: Patch-For-Review.
Danny_B moved this task from Unsorted to OOUI on the UI-Standardization board.May 20 2016, 9:00 PM