无障碍性

测试无障碍性

测试库 API 的指导原则之一是，它们应该使您能够像用户使用应用程序一样对其进行测试，包括通过屏幕阅读器等无障碍性界面。

请参阅有关查询的页面，了解有关如何使用语义 HTML 查询来确保您的应用程序与浏览器无障碍性 API 协同工作的详细信息。

`getRoles`

此函数允许在给定 DOM 节点树中表示的隐式 ARIA 角色上进行迭代。

它返回一个对象，该对象按角色名称进行索引，每个值都是具有该隐式 ARIA 角色的元素数组。

有关隐式 ARIA 角色的更多信息，请参见 HTML 中的 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 中的每个**必须**条件，除了检查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 />
--------------------------------------------------

测试无障碍性​

getRoles​

isInaccessible​

logRoles​

测试无障碍性

`getRoles`

`isInaccessible`

`logRoles`