Focus ring helper and utilities

[mdo]

• Adds new global Sass variables for :focus styling
• Reassigns $input-btn-focus-* variables to new global variables (come v6, we'll simplify these variables)
• Adds focus styles to all navigation styles (including base .nav, .nav-pills, and .nav-tabs)

Closes #32357.

Live previews

• https://deploy-preview-33125--twbs-bootstrap.netlify.app/docs/5.2/helpers/focus-ring/
• https://deploy-preview-33125--twbs-bootstrap.netlify.app/docs/5.2/components/navs-tabs/

[ffoodd]

Loving the way you did this.

Couldn't we jump on the opportunity to improve our overall focus styles, regarding non-text contrasts? @MartijnCuppens's suggestion in #29422 (comment) using two solid shadows (also pretty much what's done in Boosted, however using outline) — and followed by some references in my own next comment in that thread — would be quite easy to implement and apply everywhere with this new focus variables superset, wouldn't it?

Might also wait for another PR, but IMHO it'd make a lot of sense.

[XhmikosR]

I'm all for having a consistent focus style, but wouldn't this be considered a breaking change for some people?

I mean, we've seen numerous times people asking how to drop focus styles because they probably don't know that they shouldn't, unless they provide some kind of replacement.

[ffoodd]

Well, this is another consideration that's unrelated to the kind of focus styles we set.

Dropping the focus styles while ensuring accessibility requires :focus-visible, and even if we don't implement it as of now my latest PR using the polyfill might be given as an example for such questions.

However depending on how we'd like to implement a new focus style, we need caution to prevent BC. That might not be possible, didn't try that much.

[mdo]

Taking off Beta 3—let's discuss further and figure out a plan :).

[ffoodd]

Coming back to this, it's really helpful and should be shipped, so

We'll try to improve our focus styles later 👍

[ffoodd]

Looks good!

Could be a great opportunity to handle double shadows to improve focus indicator contrasts too, and maybe use :focus-visible as a progressive enhancement?

I keep this in mind for later 👌

[ffoodd]

Oh and we already had this discussion, obviously 😅

[mdo]

Thanks @ffoodd! Going to wait for v5.3.0 for this—want to see where I can build this into our other components with additional CSS variables.

[mdo]

@julien-deramond Tried resurrecting this one—still needs a bit of work to apply the updated focus shadow to other components. Maybe that could wait until later though, like in v6, and we just have an extra helper/utilities for now?

[julien-deramond]

I haven't looked at all the source code yet but do we plan to have also a focus-visible-ring utility?

[julien-deramond]

Maybe we can tell that users can also simply click on the link to see the custom focus ring. IDK if it can be helpful but we could also remind folks that :focus is for keyboard and mouse in the description.