无障碍访问

无障碍测试

Testing Library 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，从无障碍访问树中排除元素中所有MUST标准，但检查角色属性除外。

函数的定义为:

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`