Focus UX in Firefox

[joe-replin]

Subject of the issue/enhancement/features

Within Firefox, if I shift+tab back up the page, then the focused element doesn't entirely display inview. The focused element appears to be underneath the navbar. It's not clear where on the screen the focus is at that moment. Firefox' default focus state is a barely visible dotted outline.

When testing in Chrome, a shift+tab up the page will center the focused element on the page. Also, Chrome provided it's own style-sheet for focused outlines. (e.g.: outline: -webkit-focus-ring-color auto 1px;)

Your environment

• FW v5.31.11
• Firefox v114.0.1
• Windows 11

Steps to reproduce

With a fresh install of Adapt and Firefox, navigate to the Presentation Components page, and Tab down the page. Now shift+tab back up the page and take note of the positioning of the focused elements.

Expected behaviour

Keyboard focused elements in Firefox should be centered in view with a clear outline.

Actual behaviour

Keyboard focused elements in Firefox are tucked underneath the navbar and the focused state is barely visible.

Screenshots (if you can)

[joe-replin]

I also should note that the accessibility & scrollingContainer options present in config.json didn't have an affect on this behavior. And even if they did, the default behavior shouldn't be to display focused elements underneath the navbar.