slidev-theme-practicum 0.2.0 → 0.4.0

package/scripts/browser-smoke.mjs

@@ -10,9 +10,28 @@ import {
 
 const PROJECT_ROOT = resolve(import.meta.dirname, '..')
 const DIST_DIR = resolve(PROJECT_ROOT, 'dist')
+const EXPECTED_DOCUMENT_TITLE = 'Яндекс Практикум — справочная галерея - Slidev'
 const REPRESENTATIVE_SLIDES = [1, 9, 15, 20, 38, 46, 47]
 const VISUAL_ONLY_SLIDES = [17, 18]
 const P0_REGRESSION_SLIDES = [23, 24, 25, 26, 27, 28]
+const P0_FRONTMATTER_TEXT = {
+  23: {
+    selector: '.Slide_variant_comparison-before-after',
+    values: ['«Я просто запомнил формулу»', '«Я выбрал формулу по условию»'],
+  },
+  24: {
+    selector: '.Slide_variant_comparison-stable-variable',
+    values: ['Научиться проверять гипотезу', 'Данные и уровень подсказок'],
+  },
+  25: {
+    selector: '.Slide-StepsGrid_linear',
+    values: ['Назвать цель', 'Дать контекст', 'Показать пример', 'Оставить практику', 'Проверить критерий', 'Закрепить вывод'],
+  },
+  26: {
+    selector: '.Slide-StepsGrid_staggered',
+    values: ['Заметить сбой', 'Повторить шаг', 'Найти правило', 'Изменить подход', 'Записать вывод'],
+  },
+}
 const LIFECYCLE_EVENT = 'practicum:slide-lifecycle'
 const LIFECYCLE_STATE_KEY = '__practicumBrowserLifecycle'
 const THEME_MEDIA = [
@@ -40,6 +59,10 @@ function assertNoDiagnostics(label, diagnostics) {
   )
 }
 
+function normalizeVisibleText(value) {
+  return value.replace(/\s+/g, ' ').trim()
+}
+
 async function settleSlide(page) {
   await page.evaluate(async () => {
     await Promise.race([
@@ -123,7 +146,7 @@ async function assertStrongEmphasis(slide, slideNumber) {
   assert.equal(
     await strong.evaluate(element => getComputedStyle(element).fontWeight),
     '600',
-    `слайд ${slideNumber}: strong должен использовать YS Text Bold с весом 600`,
+    `слайд ${slideNumber}: strong должен использовать полужирное начертание с весом 600`,
   )
 }
 
@@ -174,47 +197,44 @@ async function assertStaggeredStepsLayout(slide, slideNumber) {
   const cards = grid.locator(':scope > .Slide-Step')
   const cardCount = await cards.count()
 
-  assert.equal(cardCount, 5, `слайд ${slideNumber}: staggered должен содержать ровно 5 карточек`)
+  assert.equal(cardCount, 5, `слайд ${slideNumber}: канонический пример staggered должен содержать 5 карточек`)
 
-  const [gridBox, cardBoxes, placements] = await Promise.all([
+  const [gridBox, cardBoxes] = await Promise.all([
     grid.boundingBox(),
     Promise.all(Array.from({ length: cardCount }, (_, index) => cards.nth(index).boundingBox())),
-    cards.evaluateAll(elements => elements.map((element) => {
-      const style = getComputedStyle(element)
-
-      return {
-        columnEnd: style.gridColumnEnd,
-        columnStart: style.gridColumnStart,
-        rowEnd: style.gridRowEnd,
-        rowStart: style.gridRowStart,
-      }
-    })),
   ])
 
   assert.ok(gridBox, `слайд ${slideNumber}: не найдена геометрия staggered grid`)
   assert.ok(cardBoxes.every(Boolean), `слайд ${slideNumber}: не найдена геометрия всех staggered-карточек`)
-  assert.deepEqual(placements, [
-    { columnEnd: '3', columnStart: '1', rowEnd: '2', rowStart: '1' },
-    { columnEnd: '5', columnStart: '3', rowEnd: '2', rowStart: '1' },
-    { columnEnd: '7', columnStart: '5', rowEnd: '2', rowStart: '1' },
-    { columnEnd: '4', columnStart: '2', rowEnd: '3', rowStart: '2' },
-    { columnEnd: '6', columnStart: '4', rowEnd: '3', rowStart: '2' },
-  ], `слайд ${slideNumber}: staggered должен использовать центрированную геометрию 3+2`)
+  const titleMargins = await grid.locator('.Slide-Step-TitleFitGroup').evaluateAll(elements =>
+    elements.map(element => Number.parseFloat(getComputedStyle(element).marginTop)),
+  )
+  assert.ok(
+    titleMargins.length === cardCount && titleMargins.every(marginTop => marginTop > 0),
+    `слайд ${slideNumber}: title-группы staggered должны быть прибиты к нижнему краю`,
+  )
 
   const boxes = cardBoxes
   const topY = boxes[0].y
   const bottomY = boxes[3].y
+  const topCards = boxes.slice(0, 3)
+  const lowerCards = boxes.slice(3)
 
   assert.ok(
-    boxes.slice(0, 3).every(box => Math.abs(box.y - topY) <= 1),
+    topCards.every(box => Math.abs(box.y - topY) <= 1),
     `слайд ${slideNumber}: первые три staggered-карточки должны быть в верхнем ряду`,
   )
   assert.ok(
-    boxes.slice(3).every(box => Math.abs(box.y - bottomY) <= 1) && bottomY > topY,
+    lowerCards.every(box => Math.abs(box.y - bottomY) <= 1) && bottomY > topY,
     `слайд ${slideNumber}: последние две staggered-карточки должны быть в нижнем ряду`,
   )
+  assert.ok(
+    Math.abs(topCards[0].x - gridBox.x) <= 1
+    && Math.abs(topCards.at(-1).x + topCards.at(-1).width - gridBox.x - gridBox.width) <= 1,
+    `слайд ${slideNumber}: верхний ряд staggered не заполняет ширину сетки`,
+  )
 
-  const lowerCenter = (boxes[3].x + boxes[4].x + boxes[4].width) / 2
+  const lowerCenter = (lowerCards[0].x + lowerCards[1].x + lowerCards[1].width) / 2
   const gridCenter = gridBox.x + gridBox.width / 2
 
   assert.ok(
@@ -251,6 +271,40 @@ async function assertNumberedQuartet(slide, slideNumber) {
   )
 }
 
+async function assertP0FrontmatterText(slide, slideNumber) {
+  const contract = P0_FRONTMATTER_TEXT[slideNumber]
+  if (!contract)
+    return
+
+  assert.equal(
+    await slide.locator(contract.selector).count(),
+    1,
+    `слайд ${slideNumber}: не найден ожидаемый variant/arrangement ${contract.selector}`,
+  )
+
+  const visibleText = await slide.locator('.Text').evaluateAll(elements => elements
+    .filter((element) => {
+      const rect = element.getBoundingClientRect()
+      const style = getComputedStyle(element)
+
+      return rect.width > 0
+        && rect.height > 0
+        && style.display !== 'none'
+        && style.visibility !== 'hidden'
+        && style.opacity !== '0'
+    })
+    .map(element => element.textContent ?? ''))
+  const normalizedVisibleText = visibleText.map(normalizeVisibleText)
+
+  for (const expected of contract.values) {
+    assert.ok(
+      normalizedVisibleText.includes(normalizeVisibleText(expected)),
+      `слайд ${slideNumber}: вложенный текст front matter «${expected}» не виден; `
+      + `видимые Text=${JSON.stringify(normalizedVisibleText)}`,
+    )
+  }
+}
+
 async function inspectSlide(
   page,
   origin,
@@ -315,6 +369,7 @@ async function inspectSlide(
     await assertStaggeredStepsLayout(slide, slideNumber)
   if (slideNumber === 28)
     await assertNumberedQuartet(slide, slideNumber)
+  await assertP0FrontmatterText(slide, slideNumber)
   assertLifecycleTransition(
     beforeLifecycle,
     afterLifecycle,
@@ -474,6 +529,13 @@ export async function runBrowserSmoke() {
         REPRESENTATIVE_SLIDES[index - 1],
         () => inFlightTracker.waitForIdle(),
       )
+      if (index === 0) {
+        assert.equal(
+          await page.title(),
+          EXPECTED_DOCUMENT_TITLE,
+          'первый headmatter title должен задавать служебный HTML title колоды',
+        )
+      }
     }
 
     for (const slideNumber of VISUAL_ONLY_SLIDES) {

package/scripts/check-accessibility.mjs

@@ -0,0 +1,364 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { parseSync } from '@slidev/parser'
+import { chromium } from 'playwright-chromium'
+import { createStaticDistServer, isSameOriginUrl } from './browser-smoke-runtime.mjs'
+import { inspectRenderedTypography } from './typography-browser.mjs'
+
+const PROJECT_ROOT = resolve(import.meta.dirname, '..')
+const DIST_DIR = resolve(PROJECT_ROOT, 'dist')
+const DECK_PATH = resolve(PROJECT_ROOT, 'example.md')
+const VIEWPORT = { width: 1280, height: 720 }
+const TYPOGRAPHY_GUARD = process.argv.includes('--typography-guard')
+
+async function settleSlide(page) {
+  await page.evaluate(async () => {
+    await Promise.race([
+      document.fonts?.ready ?? Promise.resolve(),
+      new Promise(resolveTimeout => setTimeout(resolveTimeout, 3_000)),
+    ])
+    await new Promise((resolveFrame) => {
+      requestAnimationFrame(() => requestAnimationFrame(resolveFrame))
+    })
+  })
+}
+
+async function openSlide(page, origin, slideNumber) {
+  const hash = `#/${slideNumber}`
+
+  if (page.url() === 'about:blank')
+    await page.goto(`${origin}/${hash}`, { waitUntil: 'domcontentloaded' })
+  else {
+    await page.evaluate((nextHash) => {
+      window.location.hash = nextHash
+    }, hash)
+  }
+
+  await page.waitForFunction(expectedHash => window.location.hash === expectedHash, hash)
+  const slide = page.locator(`.slidev-page[data-slidev-no="${slideNumber}"]`)
+  await slide.waitFor({ state: 'visible' })
+  await settleSlide(page)
+  return slide
+}
+
+async function inspectSlideAccessibility(slide, slideNumber) {
+  return slide.evaluate((root, currentSlideNumber) => {
+    function parseColor(value) {
+      if (value.startsWith('#')) {
+        const hex = value.slice(1)
+        const hexadecimalDigits = '0123456789abcdefABCDEF'
+        if (hex.length === 6 && [...hex].every(character => hexadecimalDigits.includes(character))) {
+          return {
+            red: Number.parseInt(hex.slice(0, 2), 16),
+            green: Number.parseInt(hex.slice(2, 4), 16),
+            blue: Number.parseInt(hex.slice(4, 6), 16),
+            alpha: 1,
+          }
+        }
+      }
+
+      const rgb = value.match(/^rgba?\(([^)]+)\)$/u)
+      if (rgb) {
+        const parts = rgb[1].replaceAll(',', ' ').split(/\s+/u).filter(Boolean)
+        const channels = parts.slice(0, 3).map(part => part.endsWith('%')
+          ? Number.parseFloat(part) * 2.55
+          : Number.parseFloat(part))
+        const alpha = parts[3] === undefined ? 1 : Number.parseFloat(parts[3])
+        return channels.every(Number.isFinite) && Number.isFinite(alpha)
+          ? { red: channels[0], green: channels[1], blue: channels[2], alpha }
+          : null
+      }
+
+      const srgb = value.match(/^color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+))?\)$/u)
+      if (!srgb)
+        return null
+
+      return {
+        red: Number.parseFloat(srgb[1]) * 255,
+        green: Number.parseFloat(srgb[2]) * 255,
+        blue: Number.parseFloat(srgb[3]) * 255,
+        alpha: srgb[4] === undefined ? 1 : Number.parseFloat(srgb[4]),
+      }
+    }
+
+    function composite(foreground, background) {
+      const alpha = foreground.alpha + background.alpha * (1 - foreground.alpha)
+      if (alpha === 0)
+        return { red: 0, green: 0, blue: 0, alpha: 0 }
+
+      return {
+        red: (foreground.red * foreground.alpha + background.red * background.alpha * (1 - foreground.alpha)) / alpha,
+        green: (foreground.green * foreground.alpha + background.green * background.alpha * (1 - foreground.alpha)) / alpha,
+        blue: (foreground.blue * foreground.alpha + background.blue * background.alpha * (1 - foreground.alpha)) / alpha,
+        alpha,
+      }
+    }
+
+    function luminance(color) {
+      const channels = [color.red, color.green, color.blue]
+        .map(channel => channel / 255)
+        .map(channel => channel <= 0.04045
+          ? channel / 12.92
+          : ((channel + 0.055) / 1.055) ** 2.4)
+
+      return channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722
+    }
+
+    function contrastRatio(foreground, background) {
+      const foregroundLuminance = luminance(foreground)
+      const backgroundLuminance = luminance(background)
+      const light = Math.max(foregroundLuminance, backgroundLuminance)
+      const dark = Math.min(foregroundLuminance, backgroundLuminance)
+      return (light + 0.05) / (dark + 0.05)
+    }
+
+    function visible(element) {
+      const rect = element.getBoundingClientRect()
+      const style = getComputedStyle(element)
+      return rect.width > 0
+        && rect.height > 0
+        && style.display !== 'none'
+        && style.visibility !== 'hidden'
+        && Number.parseFloat(style.opacity) > 0
+    }
+
+    function directText(element) {
+      return [...element.childNodes]
+        .filter(node => node.nodeType === Node.TEXT_NODE)
+        .map(node => node.textContent ?? '')
+        .join(' ')
+        .replace(/\s+/gu, ' ')
+        .trim()
+    }
+
+    function backgroundFor(element) {
+      const layers = []
+      let current = element
+
+      while (current instanceof Element) {
+        const style = getComputedStyle(current)
+        const color = parseColor(style.backgroundColor)
+        if (color)
+          layers.push(color)
+        if (current === root)
+          break
+        current = current.parentElement
+      }
+
+      return layers.reverse().reduce(
+        (background, layer) => composite(layer, background),
+        { red: 255, green: 255, blue: 255, alpha: 1 },
+      )
+    }
+
+    function selectorFor(element) {
+      const classes = [...element.classList].slice(0, 2).join('.')
+      return `${element.tagName.toLowerCase()}${classes ? `.${classes}` : ''}`
+    }
+
+    function sameColorChannels(left, right) {
+      return left && right
+        && Math.abs(left.red - right.red) < 0.5
+        && Math.abs(left.green - right.green) < 0.5
+        && Math.abs(left.blue - right.blue) < 0.5
+    }
+
+    function isDocumentedAccentException(element, foreground) {
+      const accentContext = element.closest('.Slide_mode_color, .Slot_surface_color, .Slide-Step_active')
+      const lightText = parseColor(getComputedStyle(root).getPropertyValue('--theme-color-light-0').trim())
+      return accentContext !== null && sameColorChannels(foreground, lightText)
+    }
+
+    const failures = []
+    let contrastChecks = 0
+    let contrastExceptions = 0
+    let mediaChecks = 0
+
+    for (const element of root.querySelectorAll('*')) {
+      if (!visible(element))
+        continue
+
+      const text = directText(element)
+      if (!text)
+        continue
+
+      const foreground = parseColor(getComputedStyle(element).color)
+      if (!foreground) {
+        failures.push(`слайд ${currentSlideNumber}: не удалось разобрать цвет ${selectorFor(element)}`)
+        continue
+      }
+
+      const background = backgroundFor(element)
+      const style = getComputedStyle(element)
+      const fontSize = Number.parseFloat(style.fontSize)
+      const fontWeight = Number.parseInt(style.fontWeight, 10)
+      const requiredRatio = fontSize >= 24 || (fontSize >= 18.66 && fontWeight >= 600) ? 3 : 4.5
+      const actualRatio = contrastRatio(composite(foreground, background), background)
+      contrastChecks += 1
+
+      if (actualRatio + 0.01 < requiredRatio) {
+        if (isDocumentedAccentException(element, foreground)) {
+          contrastExceptions += 1
+          continue
+        }
+
+        failures.push(
+          `слайд ${currentSlideNumber}: контраст ${actualRatio.toFixed(2)} < ${requiredRatio.toFixed(1)} `
+          + `у ${selectorFor(element)} «${text.slice(0, 60)}»`,
+        )
+      }
+    }
+
+    for (const image of root.querySelectorAll('img')) {
+      if (!visible(image))
+        continue
+      mediaChecks += 1
+      const hasAlt = image.hasAttribute('alt')
+      const alt = image.getAttribute('alt') ?? ''
+      const hidden = image.getAttribute('aria-hidden') === 'true'
+        || image.closest('[aria-hidden="true"]') !== null
+
+      if (!hasAlt)
+        failures.push(`слайд ${currentSlideNumber}: img без атрибута alt`)
+      else if (alt && hidden)
+        failures.push(`слайд ${currentSlideNumber}: содержательный img с alt скрыт через aria-hidden`)
+      else if (!alt && !hidden)
+        failures.push(`слайд ${currentSlideNumber}: декоративный img с пустым alt не скрыт через aria-hidden`)
+    }
+
+    for (const graphic of root.querySelectorAll('[role="img"]')) {
+      if (!visible(graphic))
+        continue
+      mediaChecks += 1
+      const hidden = graphic.getAttribute('aria-hidden') === 'true'
+        || graphic.closest('[aria-hidden="true"]') !== null
+      const name = graphic.getAttribute('aria-label')?.trim()
+        || graphic.querySelector(':scope > title')?.textContent?.trim()
+        || ''
+
+      if (!hidden && !name)
+        failures.push(`слайд ${currentSlideNumber}: role="img" не имеет доступного имени`)
+      if (hidden && name)
+        failures.push(`слайд ${currentSlideNumber}: скрытая графика одновременно имеет доступное имя`)
+    }
+
+    return { contrastChecks, contrastExceptions, failures, mediaChecks }
+  }, slideNumber)
+}
+
+async function inspectFocusAndReducedMotion(page, slide) {
+  await page.keyboard.press('Tab')
+  const result = await slide.evaluate((root) => {
+    const layout = root.querySelector('.slidev-layout')
+    if (!layout)
+      throw new Error('активный слайд не содержит .slidev-layout')
+
+    const focusProbe = document.createElement('a')
+    focusProbe.href = '#focus-probe'
+    focusProbe.textContent = 'Проверка видимого фокуса'
+    layout.append(focusProbe)
+    focusProbe.focus()
+    const focusStyle = getComputedStyle(focusProbe)
+    const focusVisible = focusProbe.matches(':focus-visible')
+    const focusWidth = Number.parseFloat(focusStyle.outlineWidth)
+    const focusStyleName = focusStyle.outlineStyle
+
+    const motionProbe = document.createElement('span')
+    motionProbe.style.animationDuration = '10s'
+    motionProbe.style.transitionDuration = '10s'
+    layout.append(motionProbe)
+    const motionStyle = getComputedStyle(motionProbe)
+    const animationDuration = motionStyle.animationDuration
+    const transitionDuration = motionStyle.transitionDuration
+    const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches
+
+    focusProbe.remove()
+    motionProbe.remove()
+
+    return {
+      animationDuration,
+      focusStyleName,
+      focusVisible,
+      focusWidth,
+      reducedMotion,
+      transitionDuration,
+    }
+  })
+
+  assert.equal(result.reducedMotion, true, 'Chromium должен эмулировать prefers-reduced-motion: reduce')
+  assert.equal(result.focusVisible, true, 'клавиатурный фокус должен сопоставляться с :focus-visible')
+  assert.notEqual(result.focusStyleName, 'none', 'видимый фокус не должен отключать outline')
+  assert.ok(result.focusWidth >= 3, `ширина фокуса должна быть не меньше 3px, получено ${result.focusWidth}`)
+  const durationMs = value => Number.parseFloat(value) * (value.endsWith('ms') ? 1 : 1_000)
+  assert.ok(
+    durationMs(result.animationDuration) <= 0.01,
+    `анимация должна отключаться в reduced-motion, получено ${result.animationDuration}`,
+  )
+  assert.ok(
+    durationMs(result.transitionDuration) <= 0.01,
+    `переход должен отключаться в reduced-motion, получено ${result.transitionDuration}`,
+  )
+}
+
+async function run() {
+  const source = readFileSync(DECK_PATH, 'utf8')
+  const slideCount = parseSync(source, DECK_PATH).slides.length
+  const failures = []
+  const externalRequests = []
+  let contrastChecks = 0
+  let contrastExceptions = 0
+  let mediaChecks = 0
+  let browser
+  let server
+
+  try {
+    server = await createStaticDistServer(DIST_DIR)
+    browser = await chromium.launch()
+    const context = await browser.newContext({
+      reducedMotion: 'reduce',
+      serviceWorkers: 'block',
+      viewport: VIEWPORT,
+    })
+    const page = await context.newPage()
+    page.setDefaultTimeout(15_000)
+    page.on('request', (request) => {
+      if (!isSameOriginUrl(server.origin, request.url()))
+        externalRequests.push(request.url())
+    })
+
+    for (let slideNumber = 1; slideNumber <= slideCount; slideNumber += 1) {
+      const slide = await openSlide(page, server.origin, slideNumber)
+      const result = await inspectSlideAccessibility(slide, slideNumber)
+      failures.push(...result.failures)
+      contrastChecks += result.contrastChecks
+      contrastExceptions += result.contrastExceptions
+      mediaChecks += result.mediaChecks
+
+      if (TYPOGRAPHY_GUARD) {
+        const typography = await inspectRenderedTypography(slide)
+        failures.push(...typography.issues.map(issue => `Слайд ${slideNumber}: ${issue.message}`))
+      }
+
+      if (slideNumber === 1)
+        await inspectFocusAndReducedMotion(page, slide)
+    }
+  }
+  finally {
+    await browser?.close()
+    await server?.close()
+  }
+
+  for (const requestUrl of new Set(externalRequests))
+    failures.push(`внешний сетевой запрос: ${requestUrl}`)
+
+  assert.deepEqual(failures, [], `Нарушения доступности:\n${failures.join('\n')}`)
+  console.log(
+    `Доступность: слайды=${slideCount}, контрастные пары=${contrastChecks}, `
+    + `акцентные исключения=${contrastExceptions}, медиа=${mediaChecks}, `
+    + `внешние запросы=${externalRequests.length}, `
+    + 'видимый фокус=1, reduced-motion=1',
+  )
+}
+
+await run()