無障礙功能

無障礙功能測試

測試函式庫 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 準則，但檢查 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`