Add focus effects to the admin-html OpenMage design

[B3Hana]

Description (*)

Currently the admin-html theme and the admin-html pages in general are not accessibility compliant.
This PR takes a step to gain more coverage in this regards.

The first step taken here, is adding proper keyboard navigation hints by adding consistent focus effects to buttons, links and input elements. #5615 already added a more consistent button-hover effect.
It is now possible to control the main/user navigation's with keyboard only.

The downside to this change is the now existing effect, as elements gain focus input elements, even then using them with a mouse. This might bother some end-users.

This PR also includes an override of the boxes.css to remove undesired base definitions. In the long run this file could be stripped in a major way to remove unneeded overrides.

Related Pull Requests

• requires (and partially contains) Unify Colors in adminhtml openmage design #5615

Fixed Issues (if relevant)

Manual testing scenarios (*)

• Navigate the admin-html with keyboard only

Questions or comments

This is only one step as I don't want the PR to be to many changes at once. As the tab order in many cases is not correct, because of the float layout. (maybe someone willing to review PR's like this would be fine with bigger PR's, please comment below)

Menu:

Inputs:

Buttons:

Accordion:

Tabs:

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All automated tests passed successfully (all builds are green, SonarCloud checks are not required to merge)

[addison74]

Gemini's opinion:
"While improving the visibility of the focus state is important for accessibility, using dotted borders or permanent outlines for buttons is generally considered an outdated UI pattern that negatively affects the modern look and feel of the admin panel.

Modern web standards typically lean towards using the :focus-visible pseudo-class. This ensures that a clean, solid, high-contrast focus indicator (often leveraging box-shadow or a subtle solid outline) is displayed only when a user navigates via keyboard, preventing intrusive styles for mouse users.

Since OpenMage has been actively working on unifying and modernizing the adminhtml UI, it might be better to implement a modern :focus-visible approach instead of traditional dotted borders to keep the design clean and consistent with contemporary dashboards.

Personal perspective: As a general rule, the core/default theme should only be modified when strictly necessary (e.g., fixing bugs or addressing objective WCAG accessibility compliance issues). Subjective design preferences or aesthetic choices are best left to custom themes or separate styling modules, keeping the default OpenMage core UI as clean and neutral as possible."

ChatGTP's opinion:
"I agree with the accessibility goal of this PR. The admin theme needs visible keyboard focus indicators.

However, I do not think the current dashed/dotted outline is the right visual direction for the OpenMage admin UI. It looks dated, visually noisy, and it also appears for mouse users because it relies mostly on :focus, which the PR itself identifies as a downside.

A more modern and accessible approach would be to use :focus-visible for buttons and links, with a clean high-contrast solid focus ring or box-shadow based ring. Inputs/selects/textareas may keep a visible focus state on normal :focus, because they are editing controls and the active field should remain visible.

So I support the accessibility objective, but I would recommend replacing the dashed inner outline with a cleaner :focus-visible focus ring before merging.

As a general rule, I think the current admin theme should only be changed where there is a clear functional, accessibility, compatibility, or maintainability reason.

Changes that are mainly based on subjective visual preferences should probably not be introduced into the default theme directly. They are better suited for separate themes, optional styling layers, or local customizations.

In this specific case, I agree with improving keyboard accessibility and visible focus states. However, the visual treatment should remain minimal, modern, and non-invasive. The goal should be to fix an accessibility issue, not to visually redesign the admin interface based on personal taste."

[B3Hana]

@addison74 please don't dump some LLM "Opinion" as a response and give your own opinion. If I want to talk to an LLM I can do this myself.

I will look into the :focus-visible selector. What would be your preferred outline?

edit: replaced the :focus with the :focus-visible pseudo class, so the mentioned problem only remains with input elements.

[sonarqubecloud]

Quality Gate failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE