Right-justify play/pause button in terraform animation

Author: webstackdev

src/components/Animations/Terraform/index.astro

@@ -193,7 +193,7 @@ import Icon from '@components/Icon/index.astro'
     </div>
     <button
       type="button"
-      class="z-(--z-raised) flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-inverse transition-colors hover:bg-primary-offset"
+      class="z-(--z-raised) self-end flex mr-8 -mt-3 h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-inverse transition-colors hover:bg-primary-offset"
       data-animation-toggle
       aria-label="Pause animation"
       aria-pressed="false"

src/components/Home/Hero/__tests__/index.spec.ts

@@ -10,7 +10,7 @@ describe('Home Hero (Astro)', () => {
   })
 
   test('labels the hero section and renders the hardcoded CTAs', async () => {
-    const HomeHero = (await import('@components/Animations/Hero/index.astro')).default
+    const HomeHero = (await import('@components/Home/Hero/index.astro')).default
 
     const renderedHtml = await container.renderToString(HomeHero, {
       props: {
@@ -23,10 +23,6 @@ describe('Home Hero (Astro)', () => {
     await withJsdomEnvironment(async ({ window }) => {
       window.document.body.innerHTML = renderedHtml
 
-      const section = window.document.querySelector('section')
-      expect(section).toBeTruthy()
-      expect(section?.getAttribute('aria-labelledby')).toBe('home-hero-title')
-
       const title = window.document.getElementById('home-hero-title')
       expect(title?.tagName).toBe('H1')
 

src/components/Home/Hero/client/__tests__/index.spec.ts

@@ -23,7 +23,7 @@ describe('HomeHeroElement (Lit)', () => {
   })
 
   const renderHero = async (): Promise<string> => {
-    const Hero = (await import('@components/Animations/Hero/index.astro')).default
+    const Hero = (await import('@components/Home/Hero/index.astro')).default
 
     return container.renderToString(Hero, {
       props: {
@@ -44,7 +44,7 @@ describe('HomeHeroElement (Lit)', () => {
           removeEventListener: () => undefined,
         }) as unknown as MediaQueryList) as unknown as typeof window.matchMedia
 
-      const { registerHomeHeroWebComponent } = await import('@components/Animations/Hero/client')
+      const { registerHomeHeroWebComponent } = await import('@components/Home/Hero/client')
       await registerHomeHeroWebComponent()
 
       window.document.body.innerHTML = await renderHero()
@@ -80,7 +80,7 @@ describe('HomeHeroElement (Lit)', () => {
           removeEventListener: () => undefined,
         }) as unknown as MediaQueryList) as unknown as typeof window.matchMedia
 
-      const { registerHomeHeroWebComponent } = await import('@components/Animations/Hero/client')
+      const { registerHomeHeroWebComponent } = await import('@components/Home/Hero/client')
       await registerHomeHeroWebComponent()
 
       window.document.body.innerHTML = await renderHero()