There is also no focus outline on the cog icon here

There are also inputs that have custom focus outline and other inputs that have default focus outline

we need to

1. revert the focus-visible code and polyfill - 1 year after that code was committed there is still no browser that supports focus-visible
2. revert all the element specific outlines
3. remove the outline: none
4. make sure that the default outline: is styled how we want.

Right now its a mess of inconsistencies and accessibility failures

@dgrammatiko - you mentioned about focus polyfill on our skype call. Can you just drop your comments in here on it

@wilsonge sure. First of all, we need to understand what this :focus-visible is. For this, I've created a pen: https://codepen.io/dgrammatiko/pen/rNBjLLd

So if you tab to the first button (default browser CSS) and press enter you'll see that the focus ring is still there

If you repeat the process and tab to the green (bootstrap CSS) button you won't get a ring on the button:

So bootstrap is breaking an accessibility rule here and buttons are not the only elements that BS is breaking that rule.

So focus-visible is a pseudo-class that allows better control of the ring, eg we don't need a ring for the mouse but we need one on the keyboard. Obviously patching Bootstrap all over the place to get it right might be something that the project won't like to do. So, I guess, a small hiccup in the accessibility by removing this polyfill and using the code (as is) form Bootstrap is also ok.

revert the focus-visible code and polyfill - 1 year after that code was committed there is still no browser that supports focus-visible

Well that's not accurate: https://caniuse.com/#search=focus-visible

One browser supporting it with a vendor prefix is hardly support

This is nothng to do with bootstrap but sadfly once again you let your prejudice get the better.

Clearly you have no wish to do anything constructive.

This is nothng to do with bootstrap but sadfly once again you let your prejudice get the better.

Sure, that's because I'm an idiot and I can't understand when a rule is broken...

Show me an example on https://getbootstrap.com where there are buttons with no outlines on keyboard focus - I checked every page of the site and every example

@brianteeman dude can you please take it easy?
I already stated that this polyfill can be removed but I went ahead and created a pen to demonstrate one of the cases this polyfill was covering (try it with safari for better understanding)...

I am referring to your comments about bs

I am happy for the polyfill to stay but it has "broken" so many things it is easier to remove it and the associated css changes.

@ciar4n could you take a look at this please. The closer I look at the problem with the missing outline on the cog the more it looks like a css specificity issue. But I suck at css

I guess the issue here is the focusable elements of the switcher (inputs) are always hidden. Basically, the default browser/bootstrap method of focus will not work here. Focus CSS specific to the switcher can be added to get around this.

Is there any other fields missing a focus?

Also, what is the preferred focus styling for J4. There appear to be some variations.

I never said anything about the switcher

@brianteeman

But the focus style is not being set for everything - eg switcher

#26377 .. PR adding focus styling for the switcher which is mentioned in the description of this issue.

fixed the issue with the cog

closing for now