diff --git a/apps/docs/src/components/page-actions.browser.test.tsx b/apps/docs/src/components/page-actions.browser.test.tsx index 6a9f3743..8b7d7029 100644 --- a/apps/docs/src/components/page-actions.browser.test.tsx +++ b/apps/docs/src/components/page-actions.browser.test.tsx @@ -122,6 +122,18 @@ test('does not claim success when the markdown fetch 404s', async () => { } }); +test('does not announce the brand marks as separate content', () => { + renderActions({ githubUrl, markdownUrl, reactAriaUrl, sourceUrl, storybookUrl }); + + // These SVGs have no accessible name, so a named `img` query would still + // pass if `aria-hidden` were removed. The owned contract is the attribute. + for (const name of ['Storybook', 'React Aria', 'Source', 'Edit on GitHub']) { + const mark = page.getByRole('link', { name }).element().querySelector('svg'); + if (mark == null) throw new Error(`Expected a brand mark inside the ${name} link.`); + expect(mark.getAttribute('aria-hidden')).toBe('true'); + } +}); + function renderActions(props: { githubUrl: string; markdownUrl: string; diff --git a/packages/@luke-ui/react/src/heading/heading.browser.test.tsx b/packages/@luke-ui/react/src/heading/heading.browser.test.tsx index 324cd2e6..43d27226 100644 --- a/packages/@luke-ui/react/src/heading/heading.browser.test.tsx +++ b/packages/@luke-ui/react/src/heading/heading.browser.test.tsx @@ -1,4 +1,4 @@ -import { test } from 'vite-plus/test'; +import { expect, test } from 'vite-plus/test'; import { testConformance } from '../conformance/helpers.js'; import { render } from '../test-utils/render.js'; import { Heading, HeadingLevels, useHeadingLevel } from './index.js'; @@ -13,21 +13,19 @@ testConformance({ render: (props = {}) => render(Section title), }); -// `getByRole` throws when the heading is missing; `.element()` forces the query to run. -// oxlint-disable-next-line vitest/expect-expect -test('keeps semantic heading level independent of visual type style', () => { +test('keeps semantic heading level independent of visual type style', async () => { const { locator } = render( Styled as heading3 , ); - locator.getByRole('heading', { level: 2, name: 'Styled as heading3' }).element(); + await expect + .element(locator.getByRole('heading', { level: 2, name: 'Styled as heading3' })) + .toBeVisible(); }); -// Nested `HeadingLevels` must advance; `useHeadingLevel` must not. -// oxlint-disable-next-line vitest/expect-expect -test('useHeadingLevel reads the current level without advancing it', () => { +test('useHeadingLevel reads the current level without advancing it', async () => { function CurrentLevel({ label }: { label: string }) { const { element: Element, level } = useHeadingLevel(); return {`${label} h${level}`}; @@ -42,6 +40,8 @@ test('useHeadingLevel reads the current level without advancing it', () => { , ); - locator.getByRole('heading', { level: 2, name: 'current h2' }).element(); - locator.getByRole('heading', { level: 3, name: 'nested h3' }).element(); + await expect + .element(locator.getByRole('heading', { level: 2, name: 'current h2' })) + .toBeVisible(); + await expect.element(locator.getByRole('heading', { level: 3, name: 'nested h3' })).toBeVisible(); });