netcracker/ai-for-dummies
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(guide): match 15c event name and the legacy focus ring

Browse Source 
The island listened for `ai-for-dummies:language-change` on `document`, but
task 15c dispatches `ai-for-dummies:languagechange` on `window`. Window events
do not reach a document listener, so that path was dead; only the `<html lang>`
MutationObserver was firing.

The focus ring was `3px solid var(--red)` at `outline-offset: 2px`, applied
globally to every button on the page. `responsive.css` uses gold at offset -3px
for exactly these nine groups. Restored, and scoped to them.
This commit is contained in:
Marcos Paulo
2026-09-05 17:50:48 +00:00
parent 6ec1e31ec5
commit 7a1211ac5f
1 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/islands/GuideSelector.astro
+15 -4
View File
@@ -260,7 +260,7 @@ const { rootSelector, data } = Astro.props;
new MutationObserver((changes) => { new MutationObserver((changes) => {
if (changes.some((change) => change.attributeName === 'lang')) renderAll(); if (changes.some((change) => change.attributeName === 'lang')) renderAll();
}).observe(document.documentElement, { attributes: true, attributeFilter: ['lang'] }); }).observe(document.documentElement, { attributes: true, attributeFilter: ['lang'] });
document.addEventListener('ai-for-dummies:language-change', renderAll); window.addEventListener('ai-for-dummies:languagechange', renderAll);
renderAll(); renderAll();
} }
if ('IntersectionObserver' in window) { if ('IntersectionObserver' in window) {
@@ -276,8 +276,19 @@ const { rootSelector, data } = Astro.props;
</script> </script>
<style> <style>
:global(button:focus-visible) { /* Verbatim from `responsive.css`, where every selector button in these nine
outline: 3px solid var(--red); groups shares one focus ring. Scoped to the groups this island drives so it
outline-offset: 2px; does not restyle buttons the island has nothing to do with. */
:global([data-worker]:focus-visible),
:global([data-tree]:focus-visible),
:global([data-route]:focus-visible),
:global([data-model-provider]:focus-visible),
:global([data-effort]:focus-visible),
:global([data-skill-file]:focus-visible),
:global([data-skill-step]:focus-visible),
:global([data-common-skill]:focus-visible),
:global([data-phase]:focus-visible) {
outline: 3px solid var(--gold);
outline-offset: -3px;
} }
</style> </style>