If this is to replace the package I forked, then you can remove the old one.

Can you really have flying-focus and focus-ring together? Seems counter intuitive to have both and if we were to have just one then I would go for flying focus as it offers much more

They do different things,
flying focus is just some effect for the transition
focus ring is a polyfill for css4 :focus-ring (basically gives designer a better way to handle focus ring depending if the user is using keyboard or mouse)

This doesnt inspire much confidence

The tiny focus-ring.js provides a prototype intended to achieve the goals we are proposing with technology that exists today in order for developers to be able to try it out, understand it and provide feedback. It simply sets a .focus-ring class on the active element if the script determines that the keyboard is being used. This attribute is removed on any blur event. This allows authors to write rules which show a focus style only when it would be relevant to the user. Note that the prototype does not match the proposed API - it is intended to give developers a feel for the model rather than to provide a high-fidelity polyfill.

CSS level 4 you mean? https://drafts.csswg.org/selectors-4/#the-focusring-pseudo

1. flying-focus does the transition and the highlight doesnt it

2. the quote is related to the js file itself. it doesnt match the proposed api so it is not forward compatible and they state it is only for prototype and feedback purposes. I wouldnt want to include something with that statement in joomla - sounds like its opening a future can of worms

it doesnt match the proposed api so it is not forward compatible

Let me translate what that message means.

• it doesnt match the proposed api: Of course this is a cut down version for 2 reasons size and speed. Don't forget the native API is browser code executed probably in C, not some js...
• it is not forward compatible: means that once browsers ship this feature then the class focus-ring needs to be renamed to :focus-ring which is the native one.

For me both these are acceptable, if not for Joomla, I'm fine I'll close this

Not my decision i was just expressing my opinion

Not offended and not really trying to push for this either

Flying focus also adds the focus-ring too, in addition to animating it so I would strongly suggest removing flying-focus ;)

Thats a shame as I really like the animation. It really helps on some of our views especially when we have two columns or buttons located a long way apart

@brianteeman - we may still be able to animate it with the Dimitris's new package. Going to have to look further into it though.

Flying focus also adds the focus-ring too,

Why add this then if flying focus offers the same and even more? I think I miss something here.

https://www.swiss.com/ch/de is using flying focus (according to https://github.com/NV/flying-focus/wiki/In-the-Wild) and it looks like they have a focus ring as well.

Ah I think I see. The flying focus one seems to be unmaintained and we have an "own" version by @C-Lodder (https://github.com/C-Lodder/flying-focus/). That's correct?

@Bakual the flying-focus script is fine but is sugaring an already broken (most of the times) visual aid. The other script is meant to give designers the ability to distinguish keyboard/mouse and target them appropriately. Pretty sure Bootstrap is crap in that area (not that excels in any other...)

It was Swiss that attracted me to it and webaim.org that confirmed it as good. We have forked it so that we can use npm(?)

@brianteeman exactly!

@dgt41 That Swiss site apparently does distinguish between keyboard and mouse. But I can only talk from looking at that page ?

This needs a review from the A11y team.

FWIW Bootstrap is totally wrong in their css for buttons, as it is removing the ring for all users (keyboard or mouse): https://github.com/twbs/bootstrap/blob/v4-dev/scss/_buttons.scss#L24

FWIW Bootstrap is totally wrong in their css for buttons, as it is removing the ring for all users (keyboard or mouse

Open an issue on their GitHub repo, or even propose a PR to improve it. It's not even in beta yet ?

reasoning behind that is here: twbs/bootstrap#21439 (comment)

If it's not catered for in BS by default, then we can do it ourselves.

@C-Lodder can you take from here?

Thank you to @dgrammatiko for this PR. That is a good thing. It should be included in Joomla 4.

@zwiastunsw this pr is closed and will not be in j4

See #20570