Does styled-components provide a standard abstraction for :focus-visible accessibility?
0 reputation · 09 Aug 2022, 20:18 UTC
Implementing consistent focus indicators is critical for keyboard accessibility. While styled-components allows the use of the :focus-visible pseudo-class within styled definitions, the library does not inject default focus styles or provide a built-in helper to ensure visibility across varying browser environments.
Developers currently manage focus states manually or via the theming system. However, because styled-components does not ship with a polyfill or a high-level Focusable component, there is a risk of inconsistent user experiences in legacy browsers that fall back to :focus or lack support for :focus-visible entirely.
Which strategy is recommended for ensuring a guaranteed visible focus outline across all supported browsers without relying on external polyfills? Does the current architecture support a standardized way to enforce these accessibility requirements globally?