Pull Request resolves #48424.

• I read the Generative AI policy and my contribution is either not created with the help of AI or is compatible with the policy and GNU/GPL 2 or later.

Summary of Changes

Keyboard focus was undefined or hard to see on many controls in Atum and Cassiopeia (no indicator, a faint low-contrast halo, or an indicator clipped by its container). This adds one shared, consistent focus indicator. It is SCSS only: no PHP, JS or XML changes.

• New shared partial media_source/system/scss/_focus-indicator.scss with focus tokens (colour, contrast colour, width, offset) and a focus-ring mixin. The indicator is a coloured 2px outline separated from the control by a contrasting 2px ring, so it stays visible on light and dark backgrounds.
• Atum and Cassiopeia each define the token values (Atum #6fbfdb on dark, Cassiopeia #0b5ed7 on white).
• A global :focus-visible rule replaces the old .js-focus-visible polyfill rule in Atum and adds a forced-colors (Highlight) fallback.
• Bootstrap's input and button focus variables now use the shared ring, so inputs, selects and every .btn variant get it (Atum, Cassiopeia and the installer template).
• Where a container clips overflow or controls sit edge to edge, the ring is drawn inside the control: Atum sidebar links, Toggle Menu / burger, header logo, quick icons, joomla-tab tabs, and the Media Manager toolbar, browser tiles, tree items and preview close button
• Smaller fixes so the ring is not hidden: switcher, Choices.js, Cassiopeia main menu items, list-group items, the finder search input group and Cassiopeia list links.

Compiled assets are not part of this PR; run npm ci && npm run build to test.

Testing Instructions

1. Check out this branch and run npm ci && npm run build.
2. Use the Atum administrator template and the Cassiopeia frontend template. Test in Chrome and Firefox if you can; also try Atum's dark and light colour schemes.
3. Move the mouse away and use only the keyboard (Tab / Shift+Tab) so hover does not hide the result. Check these controls:
   • Administrator: sidebar "Toggle Menu" (also at a narrow width, where it becomes a burger button), sidebar links such as "System", header "Post Installation Messages".
   • Content > Media: toolbar buttons.
   • Content > Articles > New: the Title field, and the tabs.
   • Articles list: the search box.
   • Articles > Options > Permissions: the selects.
   • System > Install > Extensions: "Or browse for file".
   • System > Joomla Update: "Check for Updates" (focus only, do not click).
   • Users > Multi-factor Authentication: "Add a new Passkey" (focus only).
   • Log out and check the backend login Username field and Log in button.
   • Frontend: the main menu, the header search field, "Read more", and the login Username field, Log in button and "Forgot your password?" link.

Actual result BEFORE applying this Pull Request

On 6.2-dev (Chrome 156 and Firefox, dark Atum, 1366x768):

• The Atum mobile burger button shows no focus indicator at all. The desktop "Toggle Menu" and sidebar links show only a thin line along the top and bottom edges, because the sidebar clips the rest.
• In Firefox the Article Title field, backend login Username, articles search box, Permissions select and the Cassiopeia login Username, search field, "Read more" and Log in button show no focus indicator. In Chrome these show a thin border or a faint halo.
• Atum buttons ("Check for Updates", "Or browse for file", "Add a new Passkey", backend Log in) only get Bootstrap's 50%-opacity halo, which is very low contrast.
• Cassiopeia main menu items get only a thin dotted outline.
  In Atum's light scheme on 6.2-dev: the burger button still shows no indicator, the Toggle Menu and sidebar links show only a pale-blue line along their edges, and the Media Manager "Change Ordering" button in Chrome has only a pale-blue ring on a white toolbar (low contrast).

Before/after screenshots
Scene 1: Atum mobile burger button (375px), Firefox.
Before:

After

Scene 2: Atum sidebar "Toggle Menu", Firefox.
Before

After

**Scene 3: **
Before

After

Scene 4: Media Manager "Change Ordering" button, Chrome, light mode.
Before

After

Expected result AFTER applying this Pull Request

Every control above shows the same clear keyboard focus indicator in Chrome and Firefox, in Atum dark and light and in Cassiopeia: a 2px coloured outline with a contrasting ring, drawn inside the control where its container would clip it.
Not changed or not tested:

• The issue's "Post Installation Messages" example already shows a visible ring on 6.2-dev in Chrome and Firefox, in both Atum colour schemes, so I am not claiming a fix there. The Media Manager toolbar example shows a clear ring in dark mode and in Firefox light mode, but in Chrome light mode it is only a pale-blue ring on white, which this PR fixes. I did not test Safari, which the issue names, so I am not claiming the original report is wrong.
• The "Keyboard Navigation" skip button is a bundled third-party widget with its own pop-up styling and is not changed.
• The MFA captive screen and the later steps of the Install Joomla wizard were not tested.

Link to documentations

Please select:

• Documentation link for guide.joomla.org:

• No documentation changes for guide.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed