feat(getByRole): Allow filter by disabled

Author: kemuridama

src/__tests__/ariaAttributes.js

@@ -379,3 +379,29 @@ test('`expanded: true|false` matches `expanded` elements with proper role', () =
   expect(getByRole('button', {expanded: true})).toBeInTheDocument()
   expect(getByRole('button', {expanded: false})).toBeInTheDocument()
 })
+
+test('`expected: true|false` matches `disabled` buttons', () => {
+  const {getByRole} = renderIntoDocument(
+    `
+      <div>
+        <button disabled />
+        <button />
+      </div>
+    `,
+  )
+  expect(getByRole('button', {disabled: true})).toBeInTheDocument()
+  expect(getByRole('button', {disabled: false})).toBeInTheDocument()
+})
+
+test('`expected: true|false` matches `aria-disabled` buttons', () => {
+  const {getByRole} = renderIntoDocument(
+    `
+    <div>
+    <button aria-disabled="true" />
+    <button aria-disabled="false" />
+    </div>
+    `,
+  )
+  expect(getByRole('button', {disabled: true})).toBeInTheDocument()
+  expect(getByRole('button', {disabled: false})).toBeInTheDocument()
+})

src/queries/role.ts

@@ -20,6 +20,7 @@ import {
   computeAriaValueMin,
   computeAriaValueText,
   computeHeadingLevel,
+  computeDisabled,
   getImplicitAriaRoles,
   prettyRoles,
   isInaccessible,
@@ -53,6 +54,7 @@ const queryAllByRole: AllByRole = (
     pressed,
     current,
     level,
+    disabled,
     expanded,
     value: {
       now: valueNow,
@@ -233,6 +235,9 @@ const queryAllByRole: AllByRole = (
       if (level !== undefined) {
         return level === computeHeadingLevel(element)
       }
+      if (disabled !== undefined) {
+        return disabled === computeDisabled(element)
+      }
       if (
         valueNow !== undefined ||
         valueMax !== undefined ||

src/role-helpers.js

@@ -370,6 +370,14 @@ function computeAriaValueText(element) {
   return valueText === null ? undefined : valueText
 }
 
+/**
+ * @param {Element} element
+ * @returns {boolean | undefined}
+ */
+function computeDisabled(element) {
+  return element.disabled || element.getAttribute('aria-disabled') === 'true'
+}
+
 export {
   getRoles,
   logRoles,
@@ -387,5 +395,6 @@ export {
   computeAriaValueMax,
   computeAriaValueMin,
   computeAriaValueText,
+  computeDisabled,
   computeHeadingLevel,
 }

types/queries.d.ts

@@ -135,6 +135,7 @@ export interface ByRoleOptions {
     | RegExp
     | string
     | ((accessibleDescription: string, element: Element) => boolean)
+  disabled?: boolean
 }
 
 export type AllByRole<T extends HTMLElement = HTMLElement> = (