Mobile skin UI elements do not display the active border except Search dismiss, should be removed for consistency
Description
Details
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Remove outline on overlay buttons | mediawiki/extensions/MobileFrontend | master | +3 -0 |
Related Objects
Event Timeline
I'm seeing this on all overlay buttons - edit cancel button for example.
These are also important for accessibility.
Can you clarify?
I believe @Mattflaschen said you can style active and focus separately, so focus can be available for accessibility purposes but it won't show when tapped (or clicked)
I just tried using VoiceOver to interact with the mobile site, it is basically impossible. It looks like it navigates between divs and behaves unexpectedly when moving between controls, content, links, etc.
According to http://www.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an-accessible-manner/ you can tell the differnce between mouse and keyboard interactions, since VoiceOver doesn't rely on focus states (it draws its own) touch/mouse uses won't see the focus states with the linked code, and keyboard users will see it normally.
This should be beta in the alpha mode of the site.
I'm still not sure which elements are showing an active border that shouldn't - is it simply all overlay buttons?
Change 182382 had a related patch set uploaded (by Jdlrobson):
Remove outline on overlay buttons
I just did this for overlay header buttons. I suggest Jared opens specific bugs if he sees this as a problem in any other places now this is live on beta labs.
As always beta labs. Usually these show up shortly after a merge (I forget how long this takes though).
