diff --git a/README.md b/README.md
index 63d67490..ab942af8 100644
--- a/README.md
+++ b/README.md
@@ -131,12 +131,12 @@ toBeDisabled()
This allows you to check whether an element is disabled from the user's
perspective.
-It matches if the element is a form control and the `disabled` attribute is
+It matches if the element has either `aria-disabled` set to `true` or is a form control and the `disabled` attribute is
specified on this element or the element is a descendant of a form element with
a `disabled` attribute.
According to the specification, the following elements can be
-[actually disabled](https://html.spec.whatwg.org/multipage/semantics-other.html#disabled-elements):
+[actually disabled](https://html.spec.whatwg.org/multipage/semantics-other.html#disabled-elements) (using `disabled` attribute):
`button`, `input`, `select`, `textarea`, `optgroup`, `option`, `fieldset`.
#### Examples
diff --git a/package.json b/package.json
index 027ff2fa..c3ce1b2d 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
},
"devDependencies": {
"jest-watch-select-projects": "^0.1.2",
- "jsdom": "^15.1.0",
+ "jsdom": "^15.1.1",
"kcd-scripts": "^1.4.0"
},
"eslintConfig": {
diff --git a/src/__tests__/to-be-disabled.js b/src/__tests__/to-be-disabled.js
index 74e13e6f..5a19af1b 100644
--- a/src/__tests__/to-be-disabled.js
+++ b/src/__tests__/to-be-disabled.js
@@ -28,6 +28,8 @@ test('.toBeDisabled', () => {
x
+ x
+ x
`)
@@ -51,6 +53,9 @@ test('.toBeDisabled', () => {
expect(queryByTestId('a-element')).not.toBeDisabled()
expect(() => expect(queryByTestId('a-element')).toBeDisabled()).toThrowError()
+
+ expect(queryByTestId('a-element-aria-disabled')).toBeDisabled()
+ expect(queryByTestId('a-element-aria-disabled-false')).not.toBeDisabled()
})
test('.toBeDisabled fieldset>legend', () => {
@@ -132,6 +137,8 @@ test('.toBeEnabled', () => {
x
+ x
+ x
`)
@@ -173,6 +180,9 @@ test('.toBeEnabled', () => {
expect(() =>
expect(queryByTestId('a-element')).not.toBeEnabled(),
).toThrowError()
+
+ expect(queryByTestId('a-element-aria-disabled')).not.toBeEnabled()
+ expect(queryByTestId('a-element-aria-disabled-false')).toBeEnabled()
})
test('.toBeEnabled fieldset>legend', () => {
diff --git a/src/to-be-disabled.js b/src/to-be-disabled.js
index 9ba177b5..5fb5fe8d 100644
--- a/src/to-be-disabled.js
+++ b/src/to-be-disabled.js
@@ -41,6 +41,10 @@ function isElementDisabled(element) {
return FORM_TAGS.includes(getTag(element)) && element.hasAttribute('disabled')
}
+function isAriaDisabled(element) {
+ return element.getAttribute('aria-disabled') === 'true'
+}
+
function isAncestorDisabled(element) {
const parent = element.parentElement
return (
@@ -52,7 +56,10 @@ function isAncestorDisabled(element) {
export function toBeDisabled(element) {
checkHtmlElement(element, toBeDisabled, this)
- const isDisabled = isElementDisabled(element) || isAncestorDisabled(element)
+ const isDisabled =
+ isAriaDisabled(element) ||
+ isElementDisabled(element) ||
+ isAncestorDisabled(element)
return {
pass: isDisabled,
@@ -71,7 +78,11 @@ export function toBeDisabled(element) {
export function toBeEnabled(element) {
checkHtmlElement(element, toBeEnabled, this)
- const isEnabled = !(isElementDisabled(element) || isAncestorDisabled(element))
+ const isEnabled = !(
+ isAriaDisabled(element) ||
+ isElementDisabled(element) ||
+ isAncestorDisabled(element)
+ )
return {
pass: isEnabled,