fix: skip pseudo-elements when generating focus-visible styles (#5430) Prevents invalid CSS by skipping rules containing `::` (pseudo-elements like `::before`, `::after`, `::-webkit-scrollbar`) when converting `:hover` to `:focus-visible`, as pseudo-elements cannot receive focus.

81c85f804944c74c2c8156a2cf58e176ed15df63

Wolfsblvt <wolfsblvt@gmail.com>

Signed
Parents: 67eba1b4727bfcb2bffb37c66d1933979ef51699
1 files changed, +6 -0Showing whitespace changes
public/scripts/dynamic-styles.js+6 -0
@@ -126,6 +126,12 @@ function applyDynamicFocusStyles(styleSheet, { fromExtension = false } = {}) {
126126 // If something like :focus-within or a more specific selector like `.blah:has(:focus-visible)` for elements inside,
127127 // it should be manually defined in CSS.
128128 const focusSelector = rule.selectorText.replace(/:hover/g, ':focus-visible');
129+
130+ // Skip pseudo-elements (::before, ::after, ::-webkit-scrollbar, etc.)
131+ // as they cannot have :focus-visible appended (invalid CSS syntax)
132+ if (focusSelector.includes('::')) {
133+ return;
134+ }
129135 let focusRule = `${focusSelector} { ${rule.style.cssText} }`;
130136
131137 // Wrap the generated rule into the same @media/@supports/@container chain (if any)