アクセシビリティ

アクセシビリティのテスト

テストライブラリのAPIを導く原則の1つは、スクリーンリーダーなどのアクセシビリティインターフェイスを通じてユーザーが使用するように、アプリをテストできるようにすることです。

クエリに関するページで、セマンティックなHTMLクエリを使用することで、アプリがブラウザのアクセシビリティAPIで確実に動作する方法の詳細をご覧ください。

getRoles

この関数は、特定のDOMノードツリーで表現される暗黙的なARIAロールの反復処理を許可します。

この関数は、ロール名でインデックス付けされたオブジェクトを返します。各値は、その暗黙的なARIAロールを持つ要素の配列です。

HTMLのARIAで、暗黙的なARIAロールの詳細を参照してください。

import {getRoles} from '@testing-library/dom'

const nav = document.createElement('nav')
nav.innerHTML = `
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>`
console.log(getRoles(nav))

// Object {
//   navigation: [<nav />],
//   list: [<ul />],
//   listitem: [<li />, <li />]
// }

isInaccessible

この関数は、指定された要素がブラウザのアクセシビリティAPIから除外される必要があるかどうかを計算します。この関数は、アクセシビリティツリーから要素を除外するWAI-ARIA 1.2のセクションのすべてのMUST条件を実装しています。role属性のチェックを除きます。

以下のように定義されます

function isInaccessible(element: Element): boolean

logRoles

このヘルパー関数は、DOMノードのツリー内の暗黙的なARIAロールのリストを出力するために使用できます。各ロールには、そのロールと一致するすべてのノードのリストが含まれます。これは、getByRoleを使用してテスト対象のDOMを照会する方法を見つけるのに役立ちます。

import {logRoles} from '@testing-library/dom'

const nav = document.createElement('nav')
nav.innerHTML = `
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>`

logRoles(nav)

結果

navigation:
<nav />
--------------------------------------------------
list:
<ul />
--------------------------------------------------
listitem:
<li />
<li />
--------------------------------------------------