Page MenuHomePhabricator

CX source selector has no focus state
Closed, ResolvedPublic

Description

This is not good for accessibility.

The similar OOUI search widget just keeps the text widget outline:

which also works in monobook/apex

Event Timeline

Esanders created this task.Oct 4 2017, 2:29 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 4 2017, 2:29 PM

It does however have an error state:

and a border-less pending state:

Restricted Application added a project: UI-Standardization. · View Herald TranscriptOct 5 2017, 1:45 AM

The search bar is presented as a compound input element with some controls inside (in addition to the icon it has a language selector). In this case I think it makse sense to have the blue outline around the whole border as it happens in wikipedia.org or with the Flow input area:

So in the case of Content Translation it should look closer to this:

Regarding the red error outine I think it should not be shown, I created a separate ticket about it (T177470).

Change 381246 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Embed New translation search results

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

Change 381246 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Embed New translation search results

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

Arrbee moved this task from Backlog to QA on the Language-2017-Oct-Dec board.Oct 9 2017, 9:46 AM

Since the above patch there is now a 1px inset, although that should be 2px (and transitioned). Also if I tab out of the input I still see the inner outline of the input widget.

From a technical perspective, I think it will be much easier to increase the padding on the TextInputWidget, and absolutely position the language selector over it, as currently we are trying to override then recreate a lot of upstream styles. This is basically how the www.wikipedia.org portal version works. All the border states will then work automatically, as will the apex/monobook version.

Change 383540 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/ContentTranslation@master] Use input padding and absolute positioning on page selector

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

Checked in wmf.5 - the focus is present. But there is a weird state in monobook

Etonkovidova closed this task as Resolved.Oct 27 2017, 11:53 AM
Volker_E reopened this task as Open.Nov 2 2017, 9:50 PM

As 383540 is still open, this is not fully resolved.

Change 383540 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Move language filter and close buttons to input's 'label' area

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

@Etonkovidova One more time, please :)

Re-checked (cx-testing and betalabs) - the fix works fine.

In monobook:

Etonkovidova closed this task as Resolved.Dec 20 2017, 9:13 PM