9b40be8e44
This PR implements the route announcer for app directory. It almost uses the same logic as the route announcer inside pages, with one notable difference that the inner content node is now inside a shadow root. This makes sure that it does as little impact as possible, to the application. This is important as we no longer have the `__next` wrapper. Another thing worth mentioning is that the announced title is a global singleton of the website. It shouldn't be affected by the concept of layouts, but should be triggered when the router state (not just URL) changes. Closes NEXT-208. --------- Co-authored-by: JJ Kasper <jj@jjsweb.site>
44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
import { createNextDescribe } from 'e2e-utils'
|
|
import { check } from 'next-test-utils'
|
|
import type { BrowserInterface } from 'test/lib/browsers/base'
|
|
|
|
createNextDescribe(
|
|
'app a11y features',
|
|
{
|
|
files: __dirname,
|
|
packageJson: {},
|
|
skipDeployment: true,
|
|
},
|
|
({ next }) => {
|
|
describe('route announcer', () => {
|
|
async function getAnnouncerContent(browser: BrowserInterface) {
|
|
return browser.eval(
|
|
`document.getElementsByTagName('next-route-announcer')[0]?.shadowRoot.childNodes[0]?.innerHTML`
|
|
)
|
|
}
|
|
|
|
it('should not announce the initital title', async () => {
|
|
const browser = await next.browser('/page-with-h1')
|
|
await check(() => getAnnouncerContent(browser), '')
|
|
})
|
|
|
|
it('should announce document.title changes', async () => {
|
|
const browser = await next.browser('/page-with-h1')
|
|
await browser.elementById('page-with-title').click()
|
|
await check(() => getAnnouncerContent(browser), 'page-with-title')
|
|
})
|
|
|
|
it('should announce h1 changes', async () => {
|
|
const browser = await next.browser('/page-with-h1')
|
|
await browser.elementById('noop-layout-page-1').click()
|
|
await check(() => getAnnouncerContent(browser), 'noop-layout/page-1')
|
|
})
|
|
|
|
it('should announce route changes when h1 changes inside an inner layout', async () => {
|
|
const browser = await next.browser('/noop-layout/page-1')
|
|
await browser.elementById('noop-layout-page-2').click()
|
|
await check(() => getAnnouncerContent(browser), 'noop-layout/page-2')
|
|
})
|
|
})
|
|
}
|
|
)
|