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 } = {}) {
126 // If something like :focus-within or a more specific selector like `.blah:has(:focus-visible)` for elements inside,126 // If something like :focus-within or a more specific selector like `.blah:has(:focus-visible)` for elements inside,
127 // it should be manually defined in CSS.127 // it should be manually defined in CSS.
128 const focusSelector = rule.selectorText.replace(/:hover/g, ':focus-visible');128 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 }
129 let focusRule = `${focusSelector} { ${rule.style.cssText} }`;135 let focusRule = `${focusSelector} { ${rule.style.cssText} }`;
130136
131 // Wrap the generated rule into the same @media/@supports/@container chain (if any)137 // Wrap the generated rule into the same @media/@supports/@container chain (if any)