This is not good for accessibility.
The similar OOUI search widget just keeps the text widget outline:
which also works in monobook/apex
Description
Description
Details
Details
Related Objects
Related Objects
Event Timeline
Comment Actions
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).
Comment Actions
Change 381246 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Embed New translation search results
Comment Actions
Change 381246 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Embed New translation search results
Comment Actions
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.
Comment Actions
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
Comment Actions
Change 383540 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Move language filter and close buttons to input's 'label' area
