getByRole()
でボタンがヒットしないです、という相談を受けて調べた内容のメモです。次のようなHTMLになっていました。
<label for="my-button">ラベル</label> |
ボタンに対して、ラベルがついていない場合は、<button>
タグの中のキャプション(ここでは「ボタンキャプション」という文字列)を指定して、getByRole('button', {name: 'ボタンキャプション'})
でヒットするのですが、上記のようなラベルがついていると、そちらのキャプションにはヒットしなくなって、ラベルの方にのみヒットするようになります。
test('has title', async ({ page }) => { |
W3Cのアクセシビリティの実践的ガイドのボタンのページを見ると次のように書かれています。
The button has an accessible label. By default, the accessible name is computed from any text content inside the button element. However, it can also be provided with aria-labelledby or aria-label.
訳: ボタンはアクセス可能なラベルを持っています。デフォルトではボタン要素の中のテキストコンテンツから算出されます。しかし、aria-labelledbyやaria-labelでも提供できます。
ということで、ボタンキャプションはラベルがない場合にのみ有効なデフォルト値ということで、こちらはバグなどではなく、アクセシビリティのガイドラインに従った動きをしているということがわかります。