diff options
| author |  Matthew Phillips <matthew@skypack.dev>
| 2023-10-31 15:46:44 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-10-31 15:46:44 -0400 |
| commit | 430c470ace5cfae5f53b530df54c0dc7e2046aaa (patch) | |
| tree | d86b78a97160215193a7b30647e2645434bc49c6 | |
| parent | ef8964c04d27688f14382363e01e19e85c3fec7f (diff) | |
| download | astro-430c470ace5cfae5f53b530df54c0dc7e2046aaa.tar.gz astro-430c470ace5cfae5f53b530df54c0dc7e2046aaa.tar.zst astro-430c470ace5cfae5f53b530df54c0dc7e2046aaa.zip | |
Move VT route announcer styles to a class (#8965)
Diffstat (limited to '')
| -rw-r--r-- | .changeset/sweet-nails-dream.md | 7 | ||||
| -rw-r--r-- | packages/astro/components/viewtransitions.css | 13 | ||||
| -rw-r--r-- | packages/astro/src/transitions/router.ts | 5 |
3 files changed, 21 insertions, 4 deletions
diff --git a/.changeset/sweet-nails-dream.md b/.changeset/sweet-nails-dream.md new file mode 100644 index 000000000..c4f83837c --- /dev/null +++ b/.changeset/sweet-nails-dream.md @@ -0,0 +1,7 @@ +--- +'astro': patch +--- + +Move VT route announcer styles to a class + +Doing so allows stricter CSP policies. diff --git a/packages/astro/components/viewtransitions.css b/packages/astro/components/viewtransitions.css index 953f462e9..25efea660 100644 --- a/packages/astro/components/viewtransitions.css +++ b/packages/astro/components/viewtransitions.css @@ -54,3 +54,16 @@ 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/src/transitions/router.ts b/packages/astro/src/transitions/router.ts index b740326dd..e0e93c845 100644 --- a/packages/astro/src/transitions/router.ts +++ b/packages/astro/src/transitions/router.ts @@ -30,10 +30,7 @@ const announce = () => { let div = document.createElement('div'); div.setAttribute('aria-live', 'assertive'); div.setAttribute('aria-atomic', 'true'); - div.setAttribute( - 'style', - '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' - ); + div.className = 'astro-route-announcer'; document.body.append(div); setTimeout( () => { |