fix(target-size): ::before / ::after で広げたターゲット領域を考慮する - #386
Merged
Merged
Conversation
A small control whose clickable area is expanded to at least 24x24px by a ::before or ::after pseudo-element is no longer reported as a small target. Pseudo-elements without content, or with display: none, visibility: hidden or pointer-events: none, are not counted. Also add an example of a 16x16px button expanded by ::before to the target size test page. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
ボタン本体は小さくても、
::before/::after疑似要素でクリック領域を 24×24px 以上に広げている場合に、ターゲットサイズのルールが「Small target」を出していた問題を修正します。変更内容
packages/rules/src/target-size/index.tsgetComputedStyle(element, "::before" | "::after")のwidth/heightを確認し、どちらかが 24×24px 以上なら小さいターゲットとして扱わないwidth/heightはレイアウト後の実寸が返るため、insetやtop/bottom/left/rightで大きさが決まる場合も判定できるcontentがない、display: none、visibility: hidden、pointer-events: noneの疑似要素はクリック領域にならないので除外packages/rules/src/target-size/index.test.ts::before/::after、insetで拡大、24px 未満、幅だけ 24px、および除外条件 4 種）TargetSizeTests.astro/.lang.ts）::beforeで 24×24px に広げた例を追加（en / ja）@a11y-visualizer/rules/@a11y-visualizer/browser-extensionの patch）既知の制約
疑似要素の箱の大きさを見る簡易的な判定のため、以下は実際のクリック領域と一致しない場合があります。
overflow: hiddenやclip-pathで疑似要素が切り取られていても「十分」と判定するtransform: scale()やインライン配置で広げた場合は考慮しないテスト
pnpm --filter=@a11y-visualizer/rules test（Chromium / Firefox）: すべて通過pnpm --filter=@a11y-visualizer/browser-extension compile: 通過pnpm lint-fix: 済🤖 Generated with Claude Code