Bootstrap 5.3 Focus Visibility Transition: From .focus-visible Utility to Native :focus-visible
0 reputation · 15 Oct 2022, 05:37 UTC
Bootstrap 5.3 currently ships with a .focus-visible utility class that mirrors the :focus-visible pseudo‑class, while the base stylesheet removes outlines globally via :focus { outline: none; }. Visible focus indicators appear only when the utility (or its Sass‑generated equivalent) is present, which is controlled by the $enable-focus-visible variable. An ongoing discussion in the project questions whether the default should be flipped to enable focus outlines for all focusable elements, weighing accessibility gains against possible design conflicts and the need for existing themes to adapt.
What would be the consequences of changing the default $enable-focus-visible value to true for new Bootstrap 5.3 projects? How would existing themes that rely on the current outline‑none baseline need to be audited or updated? Should the framework provide a migration guide or opt‑out mechanism to preserve backward compatibility during the transition?