Focus indicators removed by outline:none across SCSS files, breaking keyboard navigation

[jjroelofs]

Summary

Multiple SCSS files use outline: none or outline: 0 on interactive elements, removing visible focus indicators for keyboard users. This is a WCAG 2.1 AA compliance failure (Success Criterion 2.4.7: Focus Visible). At least 19 instances exist across the codebase, including on frontend-facing elements.

Steps to reproduce

1. Open any page using DXPR Theme
2. Use the Tab key to navigate through the header navigation links
3. Observe that no visible focus indicator appears on header links
4. Continue tabbing through pager controls and other interactive elements

What is the current bug behavior?

Interactive elements such as header navigation links, pager controls, and various Bootstrap-overridden components have no visible focus indicator when navigated via keyboard. The outline: none rules in the following files suppress native browser focus rings:

• scss/components/dxpr-theme-header.scss:35 — header navigation links (frontend)
• scss/vendor-extensions/drupal-pager.scss — pager controls (frontend)
• scss/vendor-extensions/bootstrap-5.scss — various Bootstrap overrides (frontend)
• scss/vendor-extensions/bootstrap-theme.scss — Bootstrap theme overrides (frontend)
• scss/base/layout.scss — overflow-x: hidden !important on html/body can clip focus rings at viewport edges

Additionally, dxpr-theme.admin.themesettings.scss has multiple outline: none instances, though these are lower priority as they only affect the admin UI.

What is the expected correct behavior?

All interactive elements should have a visible focus indicator when navigated via keyboard. Modern best practice is to use :focus-visible to show focus rings only for keyboard users while hiding them for mouse clicks:

:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--dxt-color-primary);
  outline-offset: 2px;
}

Possible fixes

1. Remove all outline: none / outline: 0 declarations from frontend-facing SCSS files
2. Replace with :focus-visible styles that provide a clear, branded focus indicator
3. Audit overflow-x: hidden !important usage to ensure it doesn't clip focus rings
4. Consider adding a focus-visible polyfill or rely on native browser support (now universal)

This fix expands the addressable market for DXPR Theme to government, education, and healthcare sites that require WCAG 2.1 AA compliance.