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) => {
if (changes.some((change) => change.attributeName === 'lang')) renderAll();
}).observe(document.documentElement, { attributes: true, attributeFilter: ['lang'] });
document.addEventListener('ai-for-dummies:language-change', renderAll);
window.addEventListener('ai-for-dummies:languagechange', renderAll);
renderAll();
}
if ('IntersectionObserver' in window) {
@@ -276,8 +276,19 @@ const { rootSelector, data } = Astro.props;
</script>
<style>
:global(button:focus-visible) {
outline: 3px solid var(--red);
outline-offset: 2px;
/* Verbatim from `responsive.css`, where every selector button in these nine
groups shares one focus ring. Scoped to the groups this island drives so it
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>