slidev-theme-practicum 0.3.0 → 0.4.0

package/composables/validate-deck-typography.cjs

@@ -0,0 +1,101 @@
+const { inspectTypography } = require('./typography-guard.cjs')
+
+/** @typedef {import('./deck-slot-markup.cjs').DeckLiveNode} DeckLiveNode */
+/** @typedef {import('./typography-guard.cjs').TypographyText} TypographyText */
+/** @typedef {import('./typography-guard.cjs').TypographyIssue} TypographyIssue */
+
+const EXCLUDED = new Set(['Header', 'Logo', 'Image', 'Decor', 'svg', 'img', 'script', 'style'])
+const SIZE_PATTERN = /^(\d+)(?:\s*-\s*(\d+))?$/u
+
+/** @param {DeckLiveNode} node @returns {string} */
+function textContent(node) {
+  if (node.kind === 'text')
+    return node.content
+  return node.kind === 'element' ? node.children.map(textContent).join(' ') : ''
+}
+
+/** @param {unknown} value */
+function isEnabled(value) {
+  return value === '' || Boolean(value)
+}
+
+/** @param {Record<string, unknown>} props */
+function sizePolicy(props) {
+  if (('max-size' in props && isEnabled(props['max-size'])) || ('maxSize' in props && isEnabled(props.maxSize)))
+    return '0-12'
+  const input = String(props.size ?? '2').trim()
+  const match = input.match(SIZE_PATTERN)
+  if (!match || Number(match[1]) > 12 || Number(match[2] ?? match[1]) > 12)
+    return undefined
+  const min = Math.min(Number(match[1]), Number(match[2] ?? match[1]))
+  const max = Math.max(Number(match[1]), Number(match[2] ?? match[1]))
+  return min === max ? String(min) : `${min}-${max}`
+}
+
+/**
+ * Проверяет только явно объявленные Text. Сокращённая запись и стили
+ * компонентов проверяются после отображения слайда в браузере.
+ * @param {DeckLiveNode[]} children
+ * @returns {TypographyIssue[]}
+ */
+function validateDeclaredTypography(children) {
+  /** @type {TypographyText[]} */
+  const texts = []
+  /** @type {TypographyIssue[]} */
+  const issues = []
+  let slotIndex = 0
+
+  /** @param {DeckLiveNode} node @param {string} slot @param {string[]} inherited */
+  function visit(node, slot, inherited) {
+    if (node.kind !== 'element' || EXCLUDED.has(node.tag))
+      return
+    if (node.tag === 'Slot') {
+      slotIndex += 1
+      slot = `Slot ${slotIndex}${node.props.role ? ` (${node.props.role})` : ''}`
+    }
+    const relevantProps = node.tag === 'Text'
+      ? ['size', 'max-size', 'maxSize', 'color', 'muted', 'as', 'class', 'style']
+      : ['class', 'style']
+    const dynamic = [...inherited, ...(node.dynamicProps ?? []).filter(prop =>
+      !prop.startsWith('v-bind:') || relevantProps.includes(prop.slice(7)),
+    )]
+    if (node.tag === 'Text') {
+      const text = textContent(node).replace(/\s+/gu, ' ').trim().slice(0, 100)
+      if (!text)
+        return
+      if (dynamic.length) {
+        issues.push({
+          code: 'dynamic-typography',
+          message: `«${text}»: статически не определены ${[...new Set(dynamic)].join(', ')}.`,
+          hint: 'Задайте литеральные атрибуты или проверьте фактический результат командой slidev-practicum-check-typography.',
+        })
+        return
+      }
+      const size = sizePolicy(node.props)
+      if (size === undefined) {
+        issues.push({
+          code: 'invalid-size',
+          message: `«${text}»: неверный размер ${String(node.props.size)}.`,
+          hint: 'Укажите токен 0–12 или диапазон этих токенов, например size="7-8".',
+        })
+      }
+      const color = String(node.props.color ?? 'current')
+      const muted = ('muted' in node.props && isEnabled(node.props.muted)) || color.startsWith('text-muted')
+      texts.push({
+        text,
+        size,
+        color: muted ? 'text-muted' : color,
+        slot,
+        keyNumber: String(node.props.as ?? '').toLowerCase() === 'data',
+        muted,
+      })
+    }
+    for (const child of node.children)
+      visit(child, slot, dynamic)
+  }
+  for (const child of children)
+    visit(child, 'Слайд вне Slot', [])
+  return [...issues, ...inspectTypography(texts)]
+}
+
+module.exports = { validateDeclaredTypography }

package/example.md

@@ -557,7 +557,7 @@ items:
     body: Применить в другой задаче
 ---
 
-<!-- Контракт: steps staggered — ровно 5 шагов во frontmatter для ритма 3+2. -->
+<!-- Контракт: steps staggered — от 2 до 6 шагов во frontmatter, два центрированных ряда; label сверху, title и body снизу. -->
 
 # Как команда разбирает ошибку
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-practicum",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Strict Slidev presentation theme with a 12x12 grid, editorial layouts, and low-level slot composition API",
   "keywords": [
     "slidev-theme",
@@ -39,10 +39,12 @@
       "favicon": "/theme/favicon.svg",
       "fonts": {
         "provider": "none",
-        "sans": "YS Text, Inter",
+        "sans": "YS Text, Inter, system-ui",
         "mono": "monospace",
         "local": [
           "YS Text",
+          "Inter",
+          "system-ui",
           "monospace"
         ]
       }
@@ -53,7 +55,8 @@
     "slidev": ">=0.50.0"
   },
   "bin": {
-    "slidev-practicum-validate": "scripts/validate-deck.cjs"
+    "slidev-practicum-validate": "scripts/validate-deck.cjs",
+    "slidev-practicum-check-typography": "scripts/check-typography.mjs"
   },
   "scripts": {
     "dev": "slidev example.md",
@@ -65,7 +68,8 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "validate-deck": "node scripts/validate-deck.cjs",
-    "test": "npm run lint && npm run typecheck && npm run test:unit && npm run test:architecture && npm run test:build && npm run test:layout-variant-build && npm run test:build-artifact && npm run test:browser && npm run test:package",
+    "check-typography": "node scripts/check-typography.mjs",
+    "test": "npm run lint && npm run typecheck && npm run test:unit && npm run test:architecture && npm run test:build && npm run test:layout-variant-build && npm run test:build-artifact && npm run test:browser && npm run test:accessibility && npm run test:typography && npm run test:pixels && npm run test:package && npm run test:consumer",
     "typecheck": "vue-tsc --noEmit",
     "test:architecture": "node scripts/check-test-architecture.mjs",
     "test:unit": "node --test tests/*.test.cjs",
@@ -74,7 +78,12 @@
     "test:layout-variant-build": "node scripts/check-local-layout-variant-build.mjs",
     "test:build-artifact": "node scripts/check-build-artifact.mjs",
     "test:browser": "node scripts/browser-smoke.mjs",
-    "test:package": "node scripts/check-package.mjs"
+    "test:accessibility": "node scripts/check-accessibility.mjs",
+    "test:typography": "node scripts/test-typography.mjs",
+    "test:pixels": "node scripts/check-pixels.mjs",
+    "test:pixels:update": "node scripts/check-pixels.mjs --update",
+    "test:package": "node scripts/check-package.mjs",
+    "test:consumer": "node scripts/check-consumer.mjs"
   },
   "author": "",
   "type": "commonjs",

package/scripts/browser-smoke.mjs

@@ -146,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`,
   )
 }
 
@@ -197,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(

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()