fix(renderer): コアのインストールボタンに読み上げ名を戻す - #2470
Merged
Merged
Conversation
AviUtl / 拡張編集の行のボタンは待機中に文字を持たず、キャレットだけが 出ている。この状態ではアクセシブル名が空で、スクリーンリーダーには 「ボタン」としか読まれず、何を起動するボタンなのか分からない。 元は「AviUtlをインストール」という文字が入っていた。73c8498b (2023-10-15, "feat: improvements in main tab") で 3 カラムの行を flex の 1 行へ畳んだ際に、 w-100 と一緒に文字も削られている。コミットの主題はレイアウトの刷新で、 文言を消す意図には触れていないため、取りこぼしと判断した。 文字をそのまま戻すとボタンの幅が変わり、行に沿って縦に並ぶボタン列の 整列が崩れる。ここは見た目を変えず、aria-label と title で名前だけを与える。 状態メッセージを出している間は付けない — aria-label は要素の文字を上書きするので、 付けたままだと「インストール完了」が読み上げから消える。
待機中は読み上げ名で、完了後は表示している文言でボタンを取れることを見る。 後者は aria-label が状態メッセージを覆い隠していないことの番人になる。
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.
何が起きているか
AviUtl タブの AviUtl / 拡張編集の行のボタンは、待機中はキャレットだけで文字がありません。
アクセシブル名が空なので、スクリーンリーダーでは「ボタン」としか読まれず、何を起動するボタンなのか分かりません（WCAG 2.1 の 4.1.2 に相当）。マウス利用者にもツールチップが無いので手掛かりがありません。
なぜこうなったか
元は文字が入っていました。
697ac4b0AviUtlをインストール9f47d4bfインストール73c8498b73c8498b"feat: improvements in main tab" は、3 カラム（col-sm-3/col-sm-6/col-sm-3）の行を flex の 1 行へ畳んだコミットです。その差分でw-100と一緒に文字も消えています。コミットの主題はレイアウトの刷新で、文言を消す意図には触れていないため、レイアウト整理の取りこぼしと判断しました。この PR でやること
見た目は変えません。 文字をそのまま戻すとボタンの幅が変わり、行に沿って縦に並ぶボタン列（
rounded-start-0などで 1 本の帯に見せている）の整列が崩れるためです。aria-labelとtitleで名前だけを与えます。状態メッセージを出している間は付けません。
aria-labelは要素の文字を上書きするため、付けたままだと「インストール完了」が読み上げから消えます。なお「見える文字を戻すかどうか」は別の判断なので、この PR には含めていません。
検証
e2e/core.spec.tsに 2 つ足しました。getByRole('button', { name: 'AviUtlをインストール' })で辿れるgetByRole('button', { name: 'インストール完了' })で辿れる（＝aria-labelが状態メッセージを覆い隠していない番人）修正を外した状態で E2E が落ちること、戻すと通ることの両方を手元で確認済みです。
yarn lint/yarn lint:ts/yarn test緑yarn package→yarn test:e2e e2e/core.spec.ts緑