Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

クローズ 初心者向け
  • 何か問題がありますか？
#4,555 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
62/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
css
領域
frontend

調査の方向性

オーバーフローは、README にある「Other pages」の side-quest リンクから発生しています。このリンクのラベルにはインラインの code 要素（gh aw run）が含まれ、href は #side-quest-08-01-codespaces-actions-write です。README を 360×800 のビューポートで読み込み、document.documentElement.scrollWidth が clientWidth を 2px 上回ることを確認してください。推奨セレクタは .markdown-body a code で、リンクまたはリスト項目自体を対象にすることもできます。360px で scrollWidth が clientWidth を 1px 超えて上回らなくなり、他のビューポートでも正しく表示されることが完了条件です。

索引モデルが issue の本文から書いたものです。

説明

accessibility bug

QA findings for README

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

Automated QA covered 98 workshop pages × 5 viewports (490 page/viewport combinations), checking navigation, readability, accessibility, and brand alignment per /github-brand. This was the only finding produced.

# Viewport Category Description
1 small readability Horizontal document overflow of 2px detected on the README page ((127.0.0.1/redacted) document.documentElement.scrollWidthis362pxvsclientWidth 360px. Root cause: the link Fix Codespaces actions:write Errors When Running gh aw run(href#side-quest-08-01-codespaces-actions-write) contains an inline gh aw runelement that does not wrap, pushing its right edge tox=361.875px, just past the 360px` viewport boundary.
Reproduction
  1. Load (127.0.0.1/redacted) (workshop READMEpage) at a360×800` viewport.
  2. Observe document.documentElement.scrollWidth (362px) exceeds clientWidth (360px), producing a 2px horizontal scrollbar — fails the brand skill's hard requirement of "no horizontal document overflow greater than 1px".
  3. The offending element is a list-item link containing an inline <code> span (gh aw run) that doesn't break, in the "Other pages" / side-quest links section of the README.
Suggested fix

Allow the inline <code> elements inside these link labels to wrap (e.g. overflow-wrap: anywhere or word-break: break-word on .markdown-body a code, or on the link/list-item itself) so long link labels with inline code don't force a fixed-width overflow at narrow viewports.

Screenshots

README small viewport horizontal overflow near the "Fix Codespaces actions:write Errors" link

[!WARNING]

Firewall blocked 7 domains

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

  • accounts.google.com
  • android.clients.google.com
  • clients2.google.com
  • registry.npmjs.org
  • update.googleapis.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"
    - "registry.npmjs.org"
    - "update.googleapis.com"
    - "www.google.com"
    - "www.gstatic.com"

See Network Configuration for more information.

Generated by 🎭 Workshop Playwright QA · copilot · auto · 169.1 AIC · ⌖ 5.02 AIC · ⊞ 9.5K · ◷

  • expires on Oct 14, 2026, 7:56 PM UTC
主要言語
JavaScript
スター
53
フォーク
35
平均マージ
13時間 50分
マージ済み PR（30日）
14

環境構築

Codespaces で開く

このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートなし
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

githubnext/gh-aw-workshop のほかの issue

githubnext/gh-aw-workshop の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。