Sidebar logo link sometimes lacks focus indicator

Problem/Motivation

In some circumstances, the logo link in the sidebar lacks a visible focus indicator.

It appears to be overridden by Claro's elements.pcss.css.

Here's a screenshot showing the CSS override with the :focus state forced in the styles pane in Edge dev tools.

And with offending CSS outline property disabled, allowing the focus indicator to display.

WCAG success criteria

SC 2.4.7 Focus Visible (Level AA)

Related technique

Steps to reproduce

The bug is intermittent or page-specific. This currently reproduces it for me:

1. Enable the Navigation module.
2. Log in as user 1.
3. Go to /user/1/edit
4. Press the TAB key until the focus reaches the first focusable menu item in the sidebar after the logo. Currently, that is the "Shortcuts" button.

Expected behavior

A focus indicator is displayed for the logo at the top of the sidebar.

Actual behavior

A focus indicator is not displayed for the logo at the top of the sidebar.

Code snippet

Proposed resolution

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet