Finish styling on technologies and skills component

Author: webstackdev

_TODO.md

@@ -269,3 +269,8 @@ This article has different approaches to [print pagination](https://www.customjs
 - cover.jpg for reliability-and-testing needs touch up in GIMP
 - We need to check for short form and deep article articles where the deep-dive index.pdf has a non-featured tag lik "argo-cd" only in the pdf.mdx. In those cases, we should make sure the callout for the deep dive includes the name of that non-featured (technology) tag and add the name to the tags: frontmatter key in the index.mdx
 - Need an article on OpenStack
+
+## focus-visible
+
+- yellow outline on "Let's talk ->" in backstage component is rounded like the button
+- yellow outlines on icon cards in skills + technologies are clipped at the top, and rounded on the play/pause button

src/components/Breadcrumbs/index.astro

@@ -38,7 +38,7 @@ const breadcrumbSchema =
   breadcrumbs.length > 1 && (
     <div id="breadcrumbs" class="mt-4">
       <nav aria-label="Breadcrumbs" class="breadcrumbs sm:pl-4">
-        <ol class="flex items-center space-x-2 text-sm sm:text-md text-primary-offset">
+        <ol class="flex items-center space-x-2 text-sm sm:text-base text-primary-offset">
           {breadcrumbs.map((item, index) => (
             <li class="flex items-center">
               {index > 0 && (

src/components/Home/Backstage/index.astro

@@ -37,7 +37,7 @@ const visibleFeatures = features.slice(0, 4)
   <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
     <!-- Left column: headline + image -->
     <div class="lg:col-span-2 space-y-4">
-      <p class="text-md font-bold text-primary uppercase tracking-widest">{pretitle}</p>
+      <p class="font-bold text-primary uppercase tracking-widest">{pretitle}</p>
       <h2 id="backstage-title" class="text-3xl md:text-4xl font-black text-content leading-tight">
         Give your developers <span class="text-primary">superpowers</span>
       </h2>
@@ -95,7 +95,10 @@ const visibleFeatures = features.slice(0, 4)
       <!-- CTA -->
       <div class="bg-primary/5 border border-primary/20 rounded-xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
         <p class="text-content font-medium">Ready to see what Backstage can do for your team?</p>
-        <a href="/contact" class="inline-flex items-center gap-2 bg-primary hover:bg-primary-offset text-page-base font-bold px-6 py-3 rounded-full transition-colors whitespace-nowrap">
+        <a
+          href="/contact"
+          class="relative inline-flex items-center gap-2 bg-primary hover:bg-primary-offset text-page-base font-bold px-6 py-3 rounded-full transition-colors whitespace-nowrap focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-1 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
+        >
           Let's talk
           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
         </a>

src/components/Home/Skills/client/__fixtures__/skillsCarousel.fixture.astro

@@ -0,0 +1,30 @@
+---
+import Skills from '@components/Home/Skills/index.astro'
+import type { CollectionEntry } from 'astro:content'
+
+const skills = [
+  {
+    data: {
+      slug: 'aws',
+      displayName: 'AWS',
+      logo: undefined,
+    },
+  },
+  {
+    data: {
+      slug: 'kubernetes',
+      displayName: 'Kubernetes',
+      logo: undefined,
+    },
+  },
+  {
+    data: {
+      slug: 'terraform',
+      displayName: 'Terraform',
+      logo: undefined,
+    },
+  },
+] as unknown as Array<CollectionEntry<'tags'>>
+---
+
+<Skills skills={skills} />

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

@@ -0,0 +1,166 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { experimental_AstroContainer as AstroContainer } from 'astro/container'
+import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
+import { executeRender } from '@test/unit/helpers/litRuntime'
+import SkillsFixture from '@components/Home/Skills/client/__fixtures__/skillsCarousel.fixture.astro'
+import type { SkillsCarouselElement } from '@components/Home/Skills/client'
+
+type SkillsModule = WebComponentModule<SkillsCarouselElement>
+
+const addButtonEventListenersMock = vi.hoisted(() => vi.fn())
+const createAnimationControllerMock = vi.hoisted(() => vi.fn())
+
+type AutoplayPluginInstance = {
+  play: ReturnType<typeof vi.fn>
+  stop: ReturnType<typeof vi.fn>
+}
+
+const autoplayPluginInstances: AutoplayPluginInstance[] = []
+
+const createAutoplayPluginMock = vi.fn(() => {
+  const instance: AutoplayPluginInstance = {
+    play: vi.fn(),
+    stop: vi.fn(),
+  }
+  autoplayPluginInstances.push(instance)
+  return instance
+})
+
+vi.mock('@components/scripts/store', () => ({
+  createAnimationController: createAnimationControllerMock,
+}))
+
+vi.mock('@components/scripts/elementListeners', () => ({
+  addButtonEventListeners: addButtonEventListenersMock,
+}))
+
+vi.mock('embla-carousel', () => {
+  const createEmbla = vi.fn(() => {
+    const handlers = new Map<string, Array<() => void>>()
+    let selectedIndex = 0
+
+    const api = {
+      canScrollPrev: vi.fn(() => false),
+      canScrollNext: vi.fn(() => false),
+      scrollPrev: vi.fn(),
+      scrollNext: vi.fn(),
+      on: vi.fn((event: string, handler: () => void) => {
+        const existing = handlers.get(event) ?? []
+        handlers.set(event, [...existing, handler])
+        return api
+      }),
+      off: vi.fn((event: string, handler: () => void) => {
+        const existing = handlers.get(event) ?? []
+        handlers.set(
+          event,
+          existing.filter(entry => entry !== handler)
+        )
+        return api
+      }),
+      destroy: vi.fn(),
+      scrollSnapList: vi.fn(() => [0, 1, 2]),
+      selectedScrollSnap: vi.fn(() => selectedIndex),
+      scrollTo: vi.fn((index: number) => {
+        selectedIndex = index
+      }),
+    }
+
+    return api
+  })
+
+  return {
+    default: createEmbla,
+  }
+})
+
+vi.mock('embla-carousel-autoplay', () => ({
+  __esModule: true,
+  default: createAutoplayPluginMock,
+}))
+
+describe('Skills carousel component', () => {
+  let container: AstroContainer
+
+  beforeEach(async () => {
+    container = await AstroContainer.create()
+    vi.clearAllMocks()
+    autoplayPluginInstances.length = 0
+    createAutoplayPluginMock.mockClear()
+    createAnimationControllerMock.mockReturnValue({
+      requestPlay: vi.fn(),
+      requestPause: vi.fn(),
+      setInstancePauseState: vi.fn(),
+      clearUserPreference: vi.fn(),
+      destroy: vi.fn(),
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    vi.useRealTimers()
+  })
+
+  const renderSkills = async (
+    assertion: (_context: { element: SkillsCarouselElement }) => Promise<void> | void
+  ): Promise<void> => {
+    await executeRender<SkillsModule>({
+      container,
+      component: SkillsFixture,
+      moduleSpecifier: '@components/Home/Skills/client/index',
+      selector: 'skills-carousel',
+      waitForReady: async (element: SkillsCarouselElement) => {
+        await element.updateComplete
+      },
+      assert: async ({ element, module, renderResult }) => {
+        expect(renderResult).toContain(`<${module.registeredName}`)
+        await assertion({ element })
+      },
+    })
+  }
+
+  it('renders centered labels with nav controls and no dots', async () => {
+    await renderSkills(async ({ element }) => {
+      const firstLink = element.querySelector('a')
+      expect(firstLink?.classList.contains('flex-col')).toBe(true)
+      expect(firstLink?.classList.contains('items-center')).toBe(true)
+      expect(firstLink?.classList.contains('text-center')).toBe(true)
+
+      expect(element.querySelector('[data-skills-prev]')).toBeTruthy()
+      expect(element.querySelector('[data-skills-next]')).toBeTruthy()
+      expect(element.querySelector('[data-skills-autoplay-toggle]')).toBeTruthy()
+      expect(element.querySelector('[data-skills-dots]')).toBeFalsy()
+    })
+  })
+
+  it('toggles autoplay state via the play/pause control', async () => {
+    vi.useFakeTimers()
+    const buttonHandlers = new Map<Element, () => void>()
+    addButtonEventListenersMock.mockImplementation((button, handler) => {
+      buttonHandlers.set(button as Element, handler as () => void)
+    })
+
+    await renderSkills(async ({ element }) => {
+      const toggle = element.querySelector('[data-skills-autoplay-toggle]') as HTMLButtonElement
+      expect(toggle).toBeTruthy()
+
+      const handler = buttonHandlers.get(toggle)
+      expect(handler).toBeTruthy()
+
+      const autoplayInstance = autoplayPluginInstances[0]
+      expect(autoplayInstance).toBeTruthy()
+
+      vi.runAllTimers()
+      expect(autoplayInstance?.play).toHaveBeenCalled()
+      expect(toggle.getAttribute('aria-label')).toBe('Pause skills')
+
+      handler?.()
+      expect(autoplayInstance?.stop).toHaveBeenCalled()
+      expect(toggle.getAttribute('aria-label')).toBe('Play skills')
+
+      handler?.()
+      vi.runAllTimers()
+      expect(autoplayInstance?.play).toHaveBeenCalled()
+      expect(toggle.getAttribute('aria-label')).toBe('Pause skills')
+    })
+  })
+})

src/components/Home/Skills/client/index.ts

@@ -0,0 +1,133 @@
+import { addButtonEventListeners } from '@components/scripts/elementListeners'
+import { isType1Element } from '@components/scripts/assertions/elements'
+import { defineCustomElement } from '@components/scripts/utils'
+import { createE2ELogger, EmblaCarouselBase } from '@components/scripts/embla'
+import type { EmblaCarouselConfig, EmblaElementHandles } from '@components/scripts/embla'
+import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
+import {
+  getSkillsEmblaRoot,
+  getSkillsViewport,
+  querySkillsAutoplayPauseIcon,
+  querySkillsAutoplayPlayIcon,
+  querySkillsAutoplayToggle,
+  querySkillsNextBtn,
+  querySkillsPrevBtn,
+  querySkillsSlides,
+} from './selectors'
+
+const SCRIPT_NAME = 'SkillsCarouselElement'
+const logForE2E = createE2ELogger('skills')
+
+export class SkillsCarouselElement extends EmblaCarouselBase {
+  private autoplayToggleBtn: HTMLButtonElement | null = null
+
+  protected getConfig(): EmblaCarouselConfig {
+    return {
+      emblaOptions: {
+        loop: true,
+        align: 'start',
+        skipSnaps: false,
+        dragFree: false,
+      },
+      autoplayOptions: {
+        delay: 5000,
+        stopOnInteraction: true,
+        stopOnMouseEnter: true,
+        playOnInit: false,
+      },
+      animationId: 'skills-carousel',
+      scriptName: SCRIPT_NAME,
+      logPrefix: 'skills',
+    }
+  }
+
+  protected queryElements(): EmblaElementHandles {
+    return {
+      emblaRoot: getSkillsEmblaRoot(this),
+      viewport: getSkillsViewport(this),
+      slideCount: querySkillsSlides(this).length,
+      prevBtn: querySkillsPrevBtn(this),
+      nextBtn: querySkillsNextBtn(this),
+    }
+  }
+
+  protected override onInitialized(): void {
+    this.autoplayToggleBtn = querySkillsAutoplayToggle(this)
+    this.setupAutoplayToggle()
+    if (this.hasAutoplaySupport) {
+      this.resume()
+    }
+  }
+
+  protected override onTeardown(): void {
+    this.autoplayToggleBtn = null
+  }
+
+  protected override onAutoplayStateChange(state: 'playing' | 'paused'): void {
+    this.syncAutoplayToggleButton(state)
+  }
+
+  private setupAutoplayToggle(): void {
+    if (!this.autoplayToggleBtn) return
+
+    const viewportId = this.viewport?.getAttribute('id')
+    if (viewportId) {
+      this.autoplayToggleBtn.setAttribute('aria-controls', viewportId)
+    }
+
+    addButtonEventListeners(
+      this.autoplayToggleBtn,
+      () => {
+        const state = this.getAttribute('data-carousel-autoplay')
+        if (state === 'playing') {
+          this.pause()
+          return
+        }
+        this.resume()
+      },
+      this
+    )
+
+    const initialState =
+      (this.getAttribute('data-carousel-autoplay') as 'playing' | 'paused' | null) ?? 'paused'
+    this.syncAutoplayToggleButton(initialState)
+  }
+
+  private syncAutoplayToggleButton(state: 'playing' | 'paused'): void {
+    if (!this.autoplayToggleBtn) return
+
+    const pauseIcon = querySkillsAutoplayPauseIcon(this.autoplayToggleBtn)
+    const playIcon = querySkillsAutoplayPlayIcon(this.autoplayToggleBtn)
+
+    if (state === 'playing') {
+      this.autoplayToggleBtn.setAttribute('aria-label', 'Pause skills')
+      this.autoplayToggleBtn.setAttribute('aria-pressed', 'false')
+      if (isType1Element(pauseIcon)) pauseIcon.classList.remove('hidden')
+      if (isType1Element(playIcon)) playIcon.classList.add('hidden')
+      return
+    }
+
+    this.autoplayToggleBtn.setAttribute('aria-label', 'Play skills')
+    this.autoplayToggleBtn.setAttribute('aria-pressed', 'true')
+    if (isType1Element(pauseIcon)) pauseIcon.classList.add('hidden')
+    if (isType1Element(playIcon)) playIcon.classList.remove('hidden')
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'skills-carousel': SkillsCarouselElement
+  }
+}
+
+export const registerSkillsCarouselWebComponent = (tagName = 'skills-carousel') => {
+  if (typeof window === 'undefined') return
+  logForE2E('info', 'register:invoke', { tagName })
+  defineCustomElement(tagName, SkillsCarouselElement)
+}
+
+export const webComponentModule: WebComponentModule<SkillsCarouselElement> = {
+  registeredName: 'skills-carousel',
+  componentCtor: SkillsCarouselElement,
+  registerWebComponent: registerSkillsCarouselWebComponent,
+}