Change 832995 had a related patch set uploaded (by Samtar; author: Samtar):

[mediawiki/extensions/Phonos@master] PhonosButton.less: Remove override for :focus

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

Just noting that this behaviour was overridden (I think by @Samwilson?) — I can certainly understand why, as it does now show the focus highlight "box" on click. I forget if focus-visible (or some other focus pseudo-class) would be more appropriate and only show this on tab selection of the element?

Yes, the OOUI blue outline was intentionally removed. I do wonder if it's a bit odd to have the focus outline on click, because there's also the colour and icon change to indicate click activity. That doesn't help for focus of course, as you point out. I wonder if we should get some design input here?

RE: your comment on the patch @Samwilson, I agree this looks a little nicer :)

Change 832995 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] PhonosButton.less: Remove border-color override for :focus

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

@TheresNoTime Should Phonos templates with errors be keyboard focusable? I notice they have tabindex=-1. I guess you might want use the keyboard to see what the error is.

@JFernandez-WMF The focus highlighting for Phonos templates is consistent across browsers. However, it is not necessarily consistent with how focus highlighting appears on the same browser for other links on the wiki.

For example, the blue border is thinner when compared to Firefox 102 and Chrome.

See below comparing how focus highlighting appears on different browsers for the Phonos template vs. a regular link on the wiki.

Browser	Phonos	Link
Firefox 91
Firefox 102
Chromium 87

Just wondering if this was OK or if we should make the blue border thicker?

(Note: I tested this on Debian Bullseye running the Awesome window manager. It is possible that it might appear differently on different operating systems, desktop environments, etc. I haven't been able to test this on Edge, IE, etc.)

In T317036#8282966, @dom_walden wrote:

@TheresNoTime Should Phonos templates with errors be keyboard focusable? I notice they have tabindex=-1. I guess you might want use the keyboard to see what the error is.

I'd say so — I'll do a patch as part of this task to resolve that

Currently, the phonos button is not activating with the enter key when the button is in focus...

• https://www.w3.org/TR/DOM-Level-3-Events/#event-flow-activation

Hi @dom_walden! I don't think this would matter from a user's point of view—however, and aiming for design consistency, I'd say that it would be great to keep the same pattern with how focus highlighting displays on the wiki for other items. I'd suggest making the blue border thicker if that's okay!

Change 839036 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/Phonos@master] Use outline instead of border for focus highlighting

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

I think we can steal the same focus style as links: https://stackoverflow.com/questions/50621472/how-is-the-default-focus-outline-implemented-in-browsers

I've made a patch; see what you think. (Sorry to jump in here! I know this is assigned to you @TheresNoTime. But by the time I'd looked into it I had a functioning patch.)

In T317036#8289312, @Samwilson wrote:

I think we can steal the same focus style as links: https://stackoverflow.com/questions/50621472/how-is-the-default-focus-outline-implemented-in-browsers

I've made a patch; see what you think. (Sorry to jump in here! I know this is assigned to you @TheresNoTime. But by the time I'd looked into it I had a functioning patch.)

No worries! +2'd, looks good to me :)

Change 839036 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] Use outline instead of border for focus highlighting

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

@Samwilson @TheresNoTime For some reason, the border appears as black on Chrome and Edge (tested Chrome 106, Edge 105 and Chromium 87):

I also notice on Safari that the keyboard focus was visible before the change in T317036#8279549. After the change in T317036#8289812, it has a sort of double-border. This is similar to what happens for regular links, except for regular links the fainter border is on the outside.

Browser	Before (2bb84a9)	After (a768954)	Regular link
Safari 15

In T317036#8285525, @TheresNoTime wrote:

In T317036#8282966, @dom_walden wrote:

@TheresNoTime Should Phonos templates with errors be keyboard focusable? I notice they have tabindex=-1. I guess you might want use the keyboard to see what the error is.

I'd say so — I'll do a patch as part of this task to resolve that

Interestingly, error templates were actually focusable on Safari before:

Thanks @dom_walden, the joys of different web rendering engines...

In T317036#8303934, @dom_walden wrote:

@Samwilson @TheresNoTime For some reason, the border appears as black on Chrome and Edge (tested Chrome 106, Edge 105 and Chromium 87):

Further to Sam's suggestion in the RTL, I tested Chrome on Vector (2010 and 2022), Minerva, Monobook and Timeless:

• On Vector, almost all the links I tried had a blue border on focus (some links on Vector 2022 had a black border, including the ULS and user menu link)
• On Minerva, most of the links have a black border (some links like the "Watch", "History", "More" links have a blue border)
• On Monobook and Timeless, all the links I tried had a black border.

On Firefox, all the links on all the skins had a blue border on focus.

So this is a skin "problem"..?

A question for @NRodriguez and/or @JSengupta-WMF — a visual indicator does appear for Firefox/Chrome/Safari/Edge, however on some browsers the colour is different (see above screenshots). The primary difference is a blue outline for most, and a black outline for Chrome.

Is this okay?

Had a chat with Nico on this and he thinks that it will be best if the color is consistent across the browsers. Here are the designs for reference again:

Is it a significant effort to investigate this before we settle for black outline on Chrome?

@JSengupta-WMF Thanks. And just to confirm: we are aiming to match the skins' default link focus styles, and not the OOUI button focus style?

Also, it looks like we need to revisit the loading and active styles — at the moment it's striped animation followed by blue text on white, but it should be white for loading and then grey for active.

We are actually aiming to match the OOUI button styles. The phono icons are all buttons. Here is the library for reference
https://www.figma.com/file/2Jb1lVkhEMDFxO20I5xwyA/%E2%9D%96-OOUI-components?node-id=1891%3A4593&t=tpDHQvj643WYDWyl-1

Change 901177 had a related patch set uploaded (by Samtar; author: Samtar):

[mediawiki/extensions/Phonos@master] PhonosButton.less: Override focus colour with `wmui-color-accent50`

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

FYI, the bug reported in T332076 also affects this on Vector, but only on Chrome/Edge:

We are actually aiming to match the OOUI button styles. The phono icons are all buttons.

This makes sense. We were at some point trying to emulate the existing template look (dotted underline etc.) and that's why we added the custom focus styles. It's much simpler to keep the OOUI ones.

Change 901177 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] PhonosButton.less: Remove focus rule

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

The focus indicator looks more-or-less identical on all browsers I tested.

Vector 2010	Vector 2022	Minerva	MonoBook	Timeless

(Screenshots taken on Firefox 102)

I tested these two URLs on every combination of skins and an LTR (English) and RTL (Arabic) language:

• https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_Outline
• https://en-rtl.wikipedia.beta.wmflabs.org/wiki/Phonos_Outline

Test browsers:

• Firefox 102 (Debian Bullseye)
• Chromium 111 (Debian Bullseye)
• Chrome 111 (Mac Monterey; emulated on Browserstack)
• Safari 16 (Mac Ventura; emulated on Browserstack)
• Safari 14 (Mac Big Sur; emulated on Browserstack)

Test environments:

• https://en.wikipedia.beta.wmflabs.org Phonos 0.1.0 (446365a) 00:31, 22 March 2023.
• https://en-rtl.wikipedia.beta.wmflabs.org Phonos 0.1.0 (446365a) 00:31, 22 March 2023.