feat: add an isDisabled function to identify whether elements are disabled or not (#919)

Co-authored-by: Sebastian Silbermann <[email protected]>

Author: MatanBobi

.changeset/rare-cycles-nail.md

@@ -0,0 +1,5 @@
+---
+"dom-accessibility-api": minor
+---
+
+add an `isDisabled` function to check if elements are disabled or not

sources/__tests__/is-disabled.js

@@ -0,0 +1,20 @@
+import { isDisabled } from "../is-disabled";
+import { cleanup, renderIntoDocument } from "./helpers/test-utils";
+
+describe("isDisabled", () => {
+	afterEach(cleanup);
+	test.each([
+		["<button data-test />", false],
+		['<button data-test aria-disabled="true" />', true],
+		['<button data-test disabled="true" />', true],
+		["<button data-test disabled />", true],
+		['<button data-test aria-disabled="false" />', false],
+		["<div data-test disabled />", false],
+	])("markup #%#", (markup, expectedIsDisabled) => {
+		const container = renderIntoDocument(markup);
+		expect(container).not.toBe(null);
+
+		const testNode = container.querySelector("[data-test]");
+		expect(isDisabled(testNode)).toBe(expectedIsDisabled);
+	});
+});

sources/index.ts

@@ -2,3 +2,4 @@ export { computeAccessibleDescription } from "./accessible-description";
 export { computeAccessibleName } from "./accessible-name";
 export { default as getRole } from "./getRole";
 export * from "./is-inaccessible";
+export { isDisabled } from "./is-disabled";

sources/is-disabled.ts

@@ -0,0 +1,27 @@
+import { getLocalName } from "./getRole";
+
+const elementsSupportingDisabledAttribute = new Set([
+	"button",
+	"fieldset",
+	"input",
+	"optgroup",
+	"option",
+	"select",
+	"textarea",
+]);
+
+/**
+ * Check if an element is disabled
+ * https://www.w3.org/TR/html-aam-1.0/#html-attribute-state-and-property-mappings
+ * https://www.w3.org/TR/wai-aria-1.1/#aria-disabled
+ *
+ * @param element
+ * @returns {boolean} true if disabled, otherwise false
+ */
+export function isDisabled(element: Element): boolean {
+	const localName = getLocalName(element);
+	return elementsSupportingDisabledAttribute.has(localName) &&
+		element.hasAttribute("disabled")
+		? true
+		: element.getAttribute("aria-disabled") === "true";
+}