Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-10 23:01:26 -05:00
Code Issues Activity

Prevent the route announcer from being visible (#8977)

Browse source 
* Prevent the route announcer from being visible

* Update the number of expected styles in the tests
This commit is contained in:
Matthew Phillips 2023-11-01 13:11:45 -04:00 • committed by GitHub
parent d0dc18cd1c
commit 40a0616797
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 64 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/five-ads-look.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Prevent route announcer from being visible

17
packages/astro/components/ViewTransitions.astro
View file

@ -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>

13
packages/astro/components/viewtransitions.css
View file

@ -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;
}

14
packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-one.astro Normal file
View file

@ -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>

13
packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro Normal file
View file

@ -0,0 +1,13 @@
---
import { ViewTransitions } from 'astro:transitions';
---
<html>
<head>
<title>Testing</title>
<ViewTransitions />
</head>
<body>
<p id="two">Two</p>
</body>
</html>

20
packages/astro/e2e/view-transitions.test.js
View file

@ -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');
});
});