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,