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.
Overview
<Table>
のヘッダーセルにあるチェックボックスには、マシンリーダブルなラベルはあるが可視のラベルがなかったため追加。参考: フォーム: ウェブアクセシビリティ簡易チェックリスト | アクセシビリティ | SmartHR Design System
What I did
テキストラベルを表示するスペースがセル内に無いため、マウスポインターがホバーした際、またはフォーカスした際に、「すべての行を選択」のツールチップを出した。
ヘッダーセルを固定した際に、
<Table>
コンポーネントの描画範囲外が描画されなくなるため、ツールチップは右側に出した。(右側の見出しセルが見えなくなるけど。。。)その他
<ThCheckbox>
は<th>
でレンダリングされ、内包するコンテンツが「すべての行を選択」になるので、チェックボックスがあるカラムの名前が「すべての行を選択」になってしまう。そのことを回避するために
<th>
にaria-label
を付与し、内包するコンテンツを無視して「選択」というカラム名に変更した。