fix(Textarea): 最大文字数を超えたエラーを色以外でも表現する #5084
Conversation
daiHash
requested review from
Qs-F,
s-sasaki-0529,
masuP9,
maiha2,
neet and
schktjm
and removed request for
a team
commit: |
| setSrCounterMessage(counterText) | ||
| } | ||
| }) | ||
| }, 1000), |
There was a problem hiding this comment.
スクリーンリーダー読み上げようのメッセージは１秒くらい遅延しています。input入力で更新すると、連続更新された場合にスクリーンリーダーで古いカウントでも読み上げてしまう場合がりました
例えば
messageの文言をさん文字くらい消すと、最大文字数が10文字であれば、あと４文字 => あと5文字 => あと6文字 でよみあげてしまうばあいがありますため、クリーンリーダー通知メッセージ更新を遅延してます
| @@ -70,16 +74,14 @@ const textarea = tv({ | |||
| 'aria-[invalid]:shr-border-danger', | |||
| ], | |||
| counter: 'smarthr-ui-Textarea-counter shr-block shr-text-sm', | |||
| counterText: 'shr-font-bold', | |||
| counterText: 'shr-text-black', | |||
| srOnlyNotice: 'shr-sr-only', | |||
There was a problem hiding this comment.
ああっ。。残してしまっていました。。削除しました🙇♂️
| </span> | ||
|
|
||
| <VisuallyHiddenText aria-live="polite" aria-atomic={true}> |
There was a problem hiding this comment.
ask: aria-atomic={true} は紐づくラベルを一緒に読み上げてくれる理解であってますか?（必要有無は検討してもよさそうに感じました）
There was a problem hiding this comment.
aria-atomic={true} は紐づくラベルを一緒に読み上げてくれる理解であってますか?
はい、おっしゃるとおり、trueの場合はaria-atomic=trueがあるライブリージオン要素内のコンテンツが全てまたは一部のみ更新されたか関係なくライブリージオン内のすべてのテキストが読み上げられます。
すみません、aria-atomicの属性は最初に試していました実装でcountの部分のみ更新してましたので、aria-atomic={true} ですべてのテキストが読み上げるようにしてましたが、毎回全てのテキストを更新するように修正したためaria-atomic は不要（まあ、すべて更新しているのでtrue/falseでも問題なくすべてよみあげらるので）のため消しました🙇♂️
aria-atomic の属性がライブリージオンの要素内のテキストを、
aria-atomic= trueすべて読み上げる
Screen.Recording.2024-11-08.at.19.22.52.mov
aria-atomic= falseテキストの更新された部分のみ読み上げる(デフォルトがfalse)、count
お数字のみ読み上げられる
Screen.Recording.2024-11-08.at.19.21.51.mov
関連URL
https://smarthr.atlassian.net/browse/SHRUI-1074
概要
最大文字数を超えたエラー色とマイナス記号で表現されておりましたので、記号や色以外で表現しました。
変更内容
- 最大文字数 => 残り何文字(
あと{n}文字)- 最大文字数マイナスでの表現 ＝＞ 何文字超えてますの表現（
{n}文字超過）- 最大文字数を超えたエラーの場合aria-invalid=trueになっていませんでしたので、こちらも修正
- スクリーンリーダー
- 最大文字数がある場合input focus時にdescriptionで補足追加
- 入力中に残り文字数または超えた場合に何文字超えたかも通知するように修正しました
残り文字数
最大文字数超えたエラー
reference
確認方法
Storybook や Chromaticで確認できますが、storybookですとiframe内描画されますのでライブリージオンが２回読み上げてしまう問題がるようなので、スクリーンリーダーで確認する場合はsandboxで確認のほうが良さそう