[workshop-playwright-qa] sitewide: 1 QA finding(s) — readability

[github-actions]

QA findings for sitewide (all pages)

Tested at: 2026-09-09T19:42:00Z
Viewports: small (360×800), medium (768×1024), desktop (1280×800), wide (1440×900), full-hd (1920×1080)

Ran the full Playwright QA suite against all 98 discovered workshop pages
(the root page plus 97 workshop-step anchors) at all 5 configured viewports
(490 page×viewport checks total). Navigation checks (page load / console
errors, main content presence, hash-anchor <details> expansion, internal
link click-through), most readability checks, and all accessibility checks
(alt text, accessible names, single visible <h1>, heading hierarchy) passed
on every page and viewport with no failures.

The one recurring defect found on every single page tested, at every
viewport, is a readability issue in a shared UI component:

#	Viewport	Category	Description
1	all (small, medium, desktop, wide, full-hd)	readability	The code-block filename label (<span class="code-block-filename">, e.g. .github/workflows/hello-workflow.yml) inside the terminal/YAML/Markdown editor bars renders at a computed font-size of 11px, below the 14–16px minimum for labels/essential text (and below the workshop brand guide's 16px body-text / 12–14px label floor).

Representative page used for the screenshot: 07-your-first-workflow
((127.0.0.1/redacted) desktop viewport (1280×800), targeting the .yaml-editor-bar` element containing the
filename label.

Since the class is defined once in docs.css (.code-block-filename,
.terminal-bar .code-block-filename, .yaml-editor-bar .code-block-filename,
.markdown-editor-bar .code-block-filename, etc.) and reused across every
code sample block in every step, this single CSS rule is responsible for the
defect appearing on all 98 pages — it is not 98 separate content bugs.

Proposed correction

Increase the font-size for .code-block-filename (and its
scoped selectors under .terminal-bar, .yaml-editor-bar, and
.markdown-editor-bar) in dist/docs.css (and the corresponding source
stylesheet it is built from) to at least 12px for a compact label context,
and ideally 14px to satisfy the workshop's readability threshold for
essential/interactive labels.

Screenshots

Warning

Firewall blocked 5 domains

The following domains were blocked by the firewall during workflow execution:

• accounts.google.com
• android.clients.google.com
• clients2.google.com
• www.google.com
• www.gstatic.com

To allow these domains, add them to the network.allowed list in your workflow frontmatter:

network:
  allowed:
    - defaults
    - "accounts.google.com"
    - "android.clients.google.com"
    - "clients2.google.com"
    - "www.google.com"
    - "www.gstatic.com"

See Network Configuration for more information.

Generated by 🎭 Workshop Playwright QA · copilot · auto · 160.9 AIC · ⌖ 5.11 AIC · ⊞ 9.4K · ◷

• expires on Sep 10, 2026, 8:09 PM UTC