- MediaWiki UI
- OOjs UI
|Declined||None||T71724 Input blue indicators look strange when rounded corners are applied to mediawiki ui inputs|
|Resolved||Prtksxna||T73150 Use a new focus indicator on text fields|
- Mentioned In
- rGOJU1b6e4ece2fec: Balance padding now that focus highlight is balanced
rGOJU9adcfb4f9f16: Follow-up I2087030a8: Fix mangled MediaWiki theme input transition
T92516: Super thick blue border for fields on login page
rGOJU579dccc4d720: MediaWiki Theme: textInputWidget: Update focus state
rMW8b73bc2df9b9: inputs.less: Change focus state
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.
(In reply to May from comment #5)
When the text field becomes activated, the blue bar hides the blinking
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 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?)
(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
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).
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.
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.
@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.