From d75689d8c11c797caf5c20a9007fa01891dc316b Mon Sep 17 00:00:00 2001 From: Matan Borenkraout Date: Sat, 25 Mar 2023 09:41:49 +0300 Subject: [PATCH 1/6] feat: add a list of elements supporting disabled attribute --- sources/index.ts | 1 + sources/util.ts | 9 +++++++++ 2 files changed, 10 insertions(+) diff --git a/sources/index.ts b/sources/index.ts index e26d4f40..046b26b7 100644 --- a/sources/index.ts +++ b/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 { elementsSupportingDisabledAttribute } from './util' diff --git a/sources/util.ts b/sources/util.ts index 8600dabb..0562668c 100644 --- a/sources/util.ts +++ b/sources/util.ts @@ -115,3 +115,12 @@ export function hasAnyConcreteRoles( } return false; } + +export const elementsSupportingDisabledAttribute = new Set(['button', +'fieldset', +'input', +'optgroup', +'option', +'select', +'textarea', +]) From 61967338dd626cc43ce906b5defc21996f013d76 Mon Sep 17 00:00:00 2001 From: Matan Borenkraout Date: Sat, 25 Mar 2023 09:51:08 +0300 Subject: [PATCH 2/6] add missing changeset --- .changeset/rare-cycles-nail.md | 5 +++++ sources/util.ts | 17 +++++++++-------- 2 files changed, 14 insertions(+), 8 deletions(-) create mode 100644 .changeset/rare-cycles-nail.md diff --git a/.changeset/rare-cycles-nail.md b/.changeset/rare-cycles-nail.md new file mode 100644 index 00000000..5c3b043e --- /dev/null +++ b/.changeset/rare-cycles-nail.md @@ -0,0 +1,5 @@ +--- +"dom-accessibility-api": minor +--- + +add a list of elements supporting disabled attribute diff --git a/sources/util.ts b/sources/util.ts index 0562668c..af62ba4c 100644 --- a/sources/util.ts +++ b/sources/util.ts @@ -116,11 +116,12 @@ export function hasAnyConcreteRoles( return false; } -export const elementsSupportingDisabledAttribute = new Set(['button', -'fieldset', -'input', -'optgroup', -'option', -'select', -'textarea', -]) +export const elementsSupportingDisabledAttribute = new Set([ + "button", + "fieldset", + "input", + "optgroup", + "option", + "select", + "textarea", +]); From c48f2429fe0b301181f82c6268abacdaa3b4f4d6 Mon Sep 17 00:00:00 2001 From: Matan Borenkraout Date: Sat, 25 Mar 2023 09:54:35 +0300 Subject: [PATCH 3/6] failing lint --- sources/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sources/index.ts b/sources/index.ts index 046b26b7..0f876d8b 100644 --- a/sources/index.ts +++ b/sources/index.ts @@ -2,4 +2,4 @@ export { computeAccessibleDescription } from "./accessible-description"; export { computeAccessibleName } from "./accessible-name"; export { default as getRole } from "./getRole"; export * from "./is-inaccessible"; -export { elementsSupportingDisabledAttribute } from './util' +export { elementsSupportingDisabledAttribute } from "./util"; From ad0fd044e1984507306fe619d41a53c922ca6220 Mon Sep 17 00:00:00 2001 From: Matan Borenkraout Date: Sun, 26 Mar 2023 10:49:58 +0300 Subject: [PATCH 4/6] export a function instead of an array --- .changeset/rare-cycles-nail.md | 2 +- sources/__tests__/is-disabled.js | 20 ++++++++++++++++++++ sources/index.ts | 2 +- sources/is-disabled.ts | 27 +++++++++++++++++++++++++++ sources/util.ts | 10 ---------- 5 files changed, 49 insertions(+), 12 deletions(-) create mode 100644 sources/__tests__/is-disabled.js create mode 100644 sources/is-disabled.ts diff --git a/.changeset/rare-cycles-nail.md b/.changeset/rare-cycles-nail.md index 5c3b043e..09c8e778 100644 --- a/.changeset/rare-cycles-nail.md +++ b/.changeset/rare-cycles-nail.md @@ -2,4 +2,4 @@ "dom-accessibility-api": minor --- -add a list of elements supporting disabled attribute +add an `isDisabled` function to check if elements are disabled or not diff --git a/sources/__tests__/is-disabled.js b/sources/__tests__/is-disabled.js new file mode 100644 index 00000000..52000d23 --- /dev/null +++ b/sources/__tests__/is-disabled.js @@ -0,0 +1,20 @@ +import { isDisabled } from "../is-disabled"; +import { cleanup, renderIntoDocument } from "./helpers/test-utils"; + +describe("isInaccessible", () => { + afterEach(cleanup); + test.each([ + ["
", false], + ['
', true], + ['
', true], + ["
", true], + ['
', false], + ['
', false], + ])("markup #%#", (markup, expectedIsDisabled) => { + const container = renderIntoDocument(markup); + expect(container).not.toBe(null); + + const testNode = container.querySelector("[data-test]"); + expect(isDisabled(testNode)).toBe(expectedIsDisabled); + }); +}); diff --git a/sources/index.ts b/sources/index.ts index 0f876d8b..6b0711ab 100644 --- a/sources/index.ts +++ b/sources/index.ts @@ -2,4 +2,4 @@ export { computeAccessibleDescription } from "./accessible-description"; export { computeAccessibleName } from "./accessible-name"; export { default as getRole } from "./getRole"; export * from "./is-inaccessible"; -export { elementsSupportingDisabledAttribute } from "./util"; +export { isDisabled } from "./is-disabled"; diff --git a/sources/is-disabled.ts b/sources/is-disabled.ts new file mode 100644 index 00000000..a201f2aa --- /dev/null +++ b/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"; +} diff --git a/sources/util.ts b/sources/util.ts index af62ba4c..8600dabb 100644 --- a/sources/util.ts +++ b/sources/util.ts @@ -115,13 +115,3 @@ export function hasAnyConcreteRoles( } return false; } - -export const elementsSupportingDisabledAttribute = new Set([ - "button", - "fieldset", - "input", - "optgroup", - "option", - "select", - "textarea", -]); From e051f9cdcd003528c442eb8dfe7c005c9c0fbcbd Mon Sep 17 00:00:00 2001 From: Matan Borenkraout Date: Sun, 26 Mar 2023 10:51:57 +0300 Subject: [PATCH 5/6] fix tests --- sources/__tests__/is-disabled.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/sources/__tests__/is-disabled.js b/sources/__tests__/is-disabled.js index 52000d23..34a30835 100644 --- a/sources/__tests__/is-disabled.js +++ b/sources/__tests__/is-disabled.js @@ -4,12 +4,12 @@ import { cleanup, renderIntoDocument } from "./helpers/test-utils"; describe("isInaccessible", () => { afterEach(cleanup); test.each([ - ["
", false], - ['
', true], - ['
', true], - ["
", true], - ['
', false], - ['
', false], + ["