feat(ByRole): Allow filter by busy state (#1222)

Author: eps1lon

src/__tests__/ariaAttributes.js

@@ -36,6 +36,28 @@ test('`expanded` throws on unsupported roles', () => {
   )
 })
 
+test('`busy` throws on unsupported roles', () => {
+  const {getByRole} = render(
+    `<div aria-busy="true" role="none">Hello, Dave!</div>`,
+  )
+  expect(() =>
+    getByRole('none', {busy: true}),
+  ).toThrowErrorMatchingInlineSnapshot(
+    `"aria-busy" is not supported on role "none".`,
+  )
+})
+
+test('`busy: true|false` matches `busy` regions', () => {
+  const {getByRole} = renderIntoDocument(
+    `<div>
+      <div role="log" aria-busy="true" />
+      <div role="log" aria-busy="false" />
+    </div>`,
+  )
+  expect(getByRole('log', {busy: true})).toBeInTheDocument()
+  expect(getByRole('log', {busy: false})).toBeInTheDocument()
+})
+
 test('`checked: true|false` matches `checked` checkboxes', () => {
   const {getByRole} = renderIntoDocument(
     `<div>

src/queries/role.ts

@@ -9,6 +9,7 @@ import {
 } from 'aria-query'
 import {
   computeAriaSelected,
+  computeAriaBusy,
   computeAriaChecked,
   computeAriaPressed,
   computeAriaCurrent,
@@ -42,6 +43,7 @@ const queryAllByRole: AllByRole = (
     description,
     queryFallbacks = false,
     selected,
+    busy,
     checked,
     pressed,
     current,
@@ -61,6 +63,16 @@ const queryAllByRole: AllByRole = (
     }
   }
 
+  if (busy !== undefined) {
+    // guard against unknown roles
+    if (
+      allRoles.get(role as ARIARoleDefinitionKey)?.props['aria-busy'] ===
+      undefined
+    ) {
+      throw new Error(`"aria-busy" is not supported on role "${role}".`)
+    }
+  }
+
   if (checked !== undefined) {
     // guard against unknown roles
     if (
@@ -152,6 +164,9 @@ const queryAllByRole: AllByRole = (
       if (selected !== undefined) {
         return selected === computeAriaSelected(element)
       }
+      if (busy !== undefined) {
+        return busy === computeAriaBusy(element)
+      }
       if (checked !== undefined) {
         return checked === computeAriaChecked(element)
       }

src/role-helpers.js

@@ -240,6 +240,15 @@ function computeAriaSelected(element) {
   return checkBooleanAttribute(element, 'aria-selected')
 }
 
+/**
+ * @param {Element} element -
+ * @returns {boolean} -
+ */
+function computeAriaBusy(element) {
+  // https://www.w3.org/TR/wai-aria-1.1/#aria-busy
+  return element.getAttribute('aria-busy') === 'true'
+}
+
 /**
  * @param {Element} element -
  * @returns {boolean | undefined} - false/true if (not)checked, undefined if not checked-able
@@ -333,6 +342,7 @@ export {
   prettyRoles,
   isInaccessible,
   computeAriaSelected,
+  computeAriaBusy,
   computeAriaChecked,
   computeAriaPressed,
   computeAriaCurrent,

types/queries.d.ts

@@ -80,6 +80,11 @@ export interface ByRoleOptions {
    * selected in the accessibility tree, i.e., `aria-selected="true"`
    */
   selected?: boolean
+  /**
+   * If true only includes elements in the query set that are marked as
+   * busy in the accessibility tree, i.e., `aria-busy="true"`
+   */
+  busy?: boolean
   /**
    * If true only includes elements in the query set that are marked as
    * checked in the accessibility tree, i.e., `aria-checked="true"`