Fix: ボイスの紹介・並べ替え画面のボタンをアクセシブルにする #1314
Merged
Conversation
This file contains 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
yncat
commented
May 13, 2023
| @@ -77,6 +77,7 @@ | |||
| : 0 | |||
| ].iconPath | |||
| " | |||
| :alt="characterInfosMap[speakerUuid].metas.speakerName" | |||
There was a problem hiding this comment.
「ラベルのない画像」と読んでしまうのでaltを入れる
| @@ -100,8 +101,9 @@ | |||
| selectCharacter(speakerUuid); | |||
| rollStyleIndex(speakerUuid, -1); | |||
| " | |||
| aria-label="前のボイススタイル" | |||
There was a problem hiding this comment.
「ボイススタイル」という言葉でいいのかはちょっと不明
There was a problem hiding this comment.
あ、「スタイル」と呼んでいます！
Suggested change
| aria-label="前のボイススタイル" | |
| aria-label="前のスタイル" |
このあたりの命名規則の一覧は作っていないのですが、基本的に使い方に合わせるようにしています！
どの辺りに書いていそうか調べるのご面倒だと思うので、PR頂いて違和感あったときにコメントします！
| /> | ||
| <span>{{ | ||
| <span aria-live="polite">{{ |
There was a problem hiding this comment.
ボイススタイルを変更したときに、変更後になにが選択されたかを自動で読むようにする
Hiroshiba
approved these changes
May 14, 2023
| @@ -100,8 +101,9 @@ | |||
| selectCharacter(speakerUuid); | |||
| rollStyleIndex(speakerUuid, -1); | |||
| " | |||
| aria-label="前のボイススタイル" | |||
There was a problem hiding this comment.
あ、「スタイル」と呼んでいます！
Suggested change
| aria-label="前のボイススタイル" | |
| aria-label="前のスタイル" |
このあたりの命名規則の一覧は作っていないのですが、基本的に使い方に合わせるようにしています！
どの辺りに書いていそうか調べるのご面倒だと思うので、PR頂いて違和感あったときにコメントします！
| /> | ||
| <span>{{ | ||
| <span aria-live="polite">{{ |
| @@ -145,6 +148,7 @@ | |||
| voiceSampleIndex | |||
| ); | |||
| " | |||
| :aria-label="`ボイスサンプル${voiceSampleIndex + 1}`" | |||
There was a problem hiding this comment.
webページではサンプルボイスと呼んでいるのでそうさせていただきます！
Suggested change
| :aria-label="`ボイスサンプル${voiceSampleIndex + 1}`" | |
| :aria-label="`サンプルボイス${voiceSampleIndex + 1}`" |
| @@ -116,6 +118,7 @@ | |||
| selectCharacter(speakerUuid); | |||
| rollStyleIndex(speakerUuid, 1); | |||
| " | |||
| aria-label="次のボイススタイル" | |||
There was a problem hiding this comment.
Suggested change
| aria-label="次のボイススタイル" | |
| aria-label="次のスタイル" |
|
ありがとうございました、 suggest の内容で問題ないです！ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
内容
Voiceboxを初めて起動したときに表示される画面を、スクリーンリーダーで正しく操作できるようにしました。並べ替えのD&Dは即対応が難しいのと、頑張れば操作できるのでなにも触っていません。
関連 Issue
ref #46
スクリーンショット・動画など
その他
本業の開発では React を使用しているので、 Vue のお作法はあまりわかっていません（というか、今日初めて書きました）。違うところがあればご指摘ください。
少しずつPRを出させてもらって、ほかの画面もアクセシブルにしていきたいと思っています。差分は毎回このぐらいの小さいものになると思います。