diff options
| author |  Matthew Phillips <matthew@skypack.dev>
| 2023-11-01 13:11:45 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-11-01 13:11:45 -0400 |
| commit | 40a06167976a29798a0b9e7eab64dd39f4ab6521 (patch) | |
| tree | fe4dd05f82141c0ab597ec668e6ffc29b31effd8 | |
| parent | d0dc18cd1cb71708c9319cfd13e9e14bf8f9a229 (diff) | |
| download | astro-40a06167976a29798a0b9e7eab64dd39f4ab6521.tar.gz astro-40a06167976a29798a0b9e7eab64dd39f4ab6521.tar.zst astro-40a06167976a29798a0b9e7eab64dd39f4ab6521.zip | |
Prevent the route announcer from being visible (#8977)
* Prevent the route announcer from being visible
* Update the number of expected styles in the tests
6 files changed, 64 insertions, 18 deletions
diff --git a/.changeset/five-ads-look.md b/.changeset/five-ads-look.md new file mode 100644 index 000000000..9c198a50c --- /dev/null +++ b/.changeset/five-ads-look.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Prevent route announcer from being visible diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro index e1df9efa7..b8ac44100 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ViewTransitions.astro @@ -5,9 +5,22 @@ export interface Props { fallback?: Fallback; } -const { fallback = 'animate' } = Astro.props as Props; +const { fallback = 'animate' } = Astro.props; --- - +<style is:global> +/* Route announcer */ +.astro-route-announcer { + position: absolute; + left: 0; + top: 0; + clip: rect(0 0 0 0); + clip-path: inset(50%); + overflow: hidden; + white-space: nowrap; + width: 1px; + height: 1px; +} +</style> <meta name="astro-view-transitions-enabled" content="true" /> <meta name="astro-view-transitions-fallback" content={fallback} /> <script> diff --git a/packages/astro/components/viewtransitions.css b/packages/astro/components/viewtransitions.css index bb7b2003f..953f462e9 100644 --- a/packages/astro/components/viewtransitions.css +++ b/packages/astro/components/viewtransitions.css @@ -54,16 +54,3 @@ animation: none !important; } } - -/* Route announcer */ -.astro-route-announcer { - position: absolute; - left: 0; - top: 0; - clip: rect(0 0 0 0); - clip-path: inset(50%); - overflow: hidden; - white-space: nowrap; - width: 1px; - height: 1px; -} diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-one.astro new file mode 100644 index 000000000..d95e3a11b --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-one.astro @@ -0,0 +1,14 @@ +--- +import { ViewTransitions } from 'astro:transitions'; + +--- +<html> + <head> + <title>Testing</title> + <ViewTransitions /> + </head> + <body> + <p id="one">One</p> + <a href="/no-directive-two">Go to 2</a> + </body> +</html> diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro new file mode 100644 index 000000000..e0afede95 --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro @@ -0,0 +1,13 @@ +--- +import { ViewTransitions } from 'astro:transitions'; + +--- +<html> + <head> + <title>Testing</title> + <ViewTransitions /> + </head> + <body> + <p id="two">Two</p> + </body> +</html> diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index 37929073a..83830ac73 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -684,7 +684,7 @@ test.describe('View Transitions', () => { }); test('client:only styles are retained on transition (1/2)', async ({ page, astro }) => { - const totalExpectedStyles = 8; + const totalExpectedStyles = 9; await page.goto(astro.resolveUrl('/client-only-one')); let msg = page.locator('.counter-message'); @@ -703,8 +703,8 @@ test.describe('View Transitions', () => { }); test('client:only styles are retained on transition (2/2)', async ({ page, astro }) => { - const totalExpectedStyles_page_three = 10; - const totalExpectedStyles_page_four = 8; + const totalExpectedStyles_page_three = 11; + const totalExpectedStyles_page_four = 9; await page.goto(astro.resolveUrl('/client-only-three')); let msg = page.locator('#name'); @@ -887,4 +887,18 @@ test.describe('View Transitions', () => { await locator.type(' World'); await expect(locator).toHaveValue('Hello World'); }); + + test('Route announcer is invisible on page transition', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/no-directive-one')); + + let locator = page.locator('#one'); + await expect(locator, 'should have content').toHaveText('One'); + + await page.click('a'); + locator = page.locator('#two'); + await expect(locator, 'should have content').toHaveText('Two'); + + let announcer = page.locator('.astro-route-announcer'); + await expect(announcer, 'should have content').toHaveCSS('width', '1px'); + }); }); |