From dd179c79786c846cf9e645d516cdfd88c4e98ed9 Mon Sep 17 00:00:00 2001
From: Ryo Ochiai <ryo.ochiai@kemuridama.jp>
Date: Mon, 8 May 2023 13:55:35 +0900
Subject: [PATCH] feat(getByRole): Allow filter by disabled

---
 src/__tests__/ariaAttributes.js | 22 ++++++++++++++++++++++
 src/queries/role.ts             |  5 +++++
 src/role-helpers.js             |  9 +++++++++
 types/queries.d.ts              |  1 +
 4 files changed, 37 insertions(+)

diff --git a/src/__tests__/ariaAttributes.js b/src/__tests__/ariaAttributes.js
index 7984d5e0..b1dcae83 100644
--- a/src/__tests__/ariaAttributes.js
+++ b/src/__tests__/ariaAttributes.js
@@ -379,3 +379,25 @@ 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()
+})
diff --git a/src/queries/role.ts b/src/queries/role.ts
index 98b08848..b2af081b 100644
--- a/src/queries/role.ts
+++ b/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 ||
diff --git a/src/role-helpers.js b/src/role-helpers.js
index bc134f27..b1f9d5d2 100644
--- a/src/role-helpers.js
+++ b/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,
 }
diff --git a/types/queries.d.ts b/types/queries.d.ts
index c6ce9054..8ae5836c 100644
--- a/types/queries.d.ts
+++ b/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> = (