Add a focus outline to interactive elements

[FlorianBoe]

Q	A
Bug fix?	no
New feature?	yes
BC breaks?	no
Deprecations?
Fixed tickets
Related issues/PRs	#6444
License	MIT
Documentation PR

What's in this PR?

I added a focus outline to interactive elements. The focus outline is still reset globally, but then re-enabled with focus-visible for keyboard use. Focusable elements get a focus outline only if they are focused while tabbing.

Text inputs and textareas are an exception to this logic, since they always match the pseudo-class :focus pseudo-class because they expect keyboard inputs.

I can remove the focus outline for text inputs, but it would be useful to think about whether the input fields should also have a custom focus state. For example, by making the border of the element darker.

A modern progressive enhancement would be a solution with :has:

.input:has(input:focus, textarea:focus) {
    border-color: $black;
}

I tried not to make any major design decisions, the outline is based on the default outline of the UA stylesheet. Custom focus states would of course improve the experience.

Why?

An important element for keyboard usability is the focus outline. Generally, overriding the browser's default outline is a bad idea.

Visual representation in Chromium browsers

I am aware that this change has an influence on the design of the admin interface and probably has to be discussed internally. If design adjustments are necessary, I can implement them with pleasure.

[alexander-schranz]

@FlorianBoe Thank you for the input here. We need to check this with the UI/UX team what focus state they want to provide for the elements. If you stumble over other elements, feel free to add them here to the pull request description.

[alexander-schranz]

@FlorianBoe Sorry for the late response here. Want to give an update that we did have today a meeting with the UI/UX Team and put this ticket as one of the prioritzed ticket to it and so we hopefully will get feedback here soonish how this Focus Visible states should be displayed.