diff --git a/frontend/src/lib/components/HelpPopover.svelte b/frontend/src/lib/components/HelpPopover.svelte index f6ff984f..2b96fd97 100644 --- a/frontend/src/lib/components/HelpPopover.svelte +++ b/frontend/src/lib/components/HelpPopover.svelte @@ -77,10 +77,10 @@ const placementClass: Record = { aria-expanded={open} aria-controls={popoverId} onclick={toggle} - class="flex h-[44px] w-[44px] items-center justify-center" + class="group flex h-[44px] w-[44px] items-center justify-center rounded-full focus-visible:ring-2 focus-visible:ring-brand-navy" > ? diff --git a/frontend/src/lib/components/HelpPopover.svelte.spec.ts b/frontend/src/lib/components/HelpPopover.svelte.spec.ts index e2cccf52..fe6800fe 100644 --- a/frontend/src/lib/components/HelpPopover.svelte.spec.ts +++ b/frontend/src/lib/components/HelpPopover.svelte.spec.ts @@ -66,6 +66,28 @@ describe('HelpPopover — open / close interactions', () => { }); }); +describe('HelpPopover — hover-target', () => { + it('hover styles propagate from 44px button group to inner span, not from span itself', () => { + const { container } = renderPopover(); + const btn = container.querySelector('button[aria-expanded]')!; + const span = btn.querySelector('span')!; + const btnClasses = btn.className.split(/\s+/); + const spanClasses = span.className.split(/\s+/); + expect(btnClasses).toContain('group'); + expect(spanClasses).not.toContain('hover:border-brand-navy'); + expect(spanClasses).toContain('group-hover:border-brand-navy'); + expect(spanClasses).not.toContain('hover:text-brand-navy'); + expect(spanClasses).toContain('group-hover:text-brand-navy'); + }); + + it('outer button has focus-visible ring for keyboard users', () => { + const { container } = renderPopover(); + const btn = container.querySelector('button[aria-expanded]')!; + expect(btn.className).toContain('focus-visible:ring-2'); + expect(btn.className).toContain('focus-visible:ring-brand-navy'); + }); +}); + describe('HelpPopover — aria wiring', () => { it('trigger aria-controls matches popover element id', async () => { renderPopover();