From 2e5b99ae2e51d8c051845008344cfa7841c8854a Mon Sep 17 00:00:00 2001 From: Jatin Ranka Date: Tue, 12 Mar 2024 22:46:24 +0530 Subject: [PATCH 1/4] fix: updates support for aria-required attribute in `to-be-required` method --- README.md | 2 ++ src/__tests__/to-be-required.js | 2 ++ src/to-be-required.js | 15 +-------------- 3 files changed, 5 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 3e9796af..86cefebd 100644 --- a/README.md +++ b/README.md @@ -379,6 +379,7 @@ attribute.
+
``` ```javascript @@ -392,6 +393,7 @@ expect(getByTestId('select')).toBeRequired() expect(getByTestId('textarea')).toBeRequired() expect(getByTestId('supported-role')).not.toBeRequired() expect(getByTestId('supported-role-aria')).toBeRequired() +expect(queryByTestId('without-aria-role')).toBeRequired() ```
diff --git a/src/__tests__/to-be-required.js b/src/__tests__/to-be-required.js index 857a41ed..37c8fb91 100644 --- a/src/__tests__/to-be-required.js +++ b/src/__tests__/to-be-required.js @@ -13,6 +13,7 @@ test('.toBeRequired', () => {
+
`) @@ -26,6 +27,7 @@ test('.toBeRequired', () => { expect(queryByTestId('textarea')).toBeRequired() expect(queryByTestId('supported-role')).not.toBeRequired() expect(queryByTestId('supported-role-aria')).toBeRequired() + expect(queryByTestId('without-aria-role')).toBeRequired() // negative test cases wrapped in throwError assertions for coverage. expect(() => diff --git a/src/to-be-required.js b/src/to-be-required.js index d674a62c..432d7f74 100644 --- a/src/to-be-required.js +++ b/src/to-be-required.js @@ -3,8 +3,6 @@ import {checkHtmlElement, getTag} from './utils' // form elements that support 'required' const FORM_TAGS = ['select', 'textarea'] -const ARIA_FORM_TAGS = ['input', 'select', 'textarea'] - const UNSUPPORTED_INPUT_TYPES = [ 'color', 'hidden', @@ -14,14 +12,6 @@ const UNSUPPORTED_INPUT_TYPES = [ 'reset', ] -const SUPPORTED_ARIA_ROLES = [ - 'combobox', - 'gridcell', - 'radiogroup', - 'spinbutton', - 'tree', -] - function isRequiredOnFormTagsExceptInput(element) { return FORM_TAGS.includes(getTag(element)) && element.hasAttribute('required') } @@ -39,10 +29,7 @@ function isRequiredOnSupportedInput(element) { function isElementRequiredByARIA(element) { return ( element.hasAttribute('aria-required') && - element.getAttribute('aria-required') === 'true' && - (ARIA_FORM_TAGS.includes(getTag(element)) || - (element.hasAttribute('role') && - SUPPORTED_ARIA_ROLES.includes(element.getAttribute('role')))) + element.getAttribute('aria-required') === 'true' ) } From 20639626f32840d6762b6190242ae288e9a19750 Mon Sep 17 00:00:00 2001 From: Jatin Ranka Date: Wed, 1 May 2024 12:22:54 +0530 Subject: [PATCH 2/4] fix: allow only supported aria roles --- README.md | 1 - src/__tests__/to-be-required.js | 2 -- src/to-be-required.js | 23 +++++++++++++++++------ 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 86cefebd..b527ac38 100644 --- a/README.md +++ b/README.md @@ -379,7 +379,6 @@ attribute.
-
``` ```javascript diff --git a/src/__tests__/to-be-required.js b/src/__tests__/to-be-required.js index 37c8fb91..857a41ed 100644 --- a/src/__tests__/to-be-required.js +++ b/src/__tests__/to-be-required.js @@ -13,7 +13,6 @@ test('.toBeRequired', () => {
-
`) @@ -27,7 +26,6 @@ test('.toBeRequired', () => { expect(queryByTestId('textarea')).toBeRequired() expect(queryByTestId('supported-role')).not.toBeRequired() expect(queryByTestId('supported-role-aria')).toBeRequired() - expect(queryByTestId('without-aria-role')).toBeRequired() // negative test cases wrapped in throwError assertions for coverage. expect(() => diff --git a/src/to-be-required.js b/src/to-be-required.js index 432d7f74..89ceb77e 100644 --- a/src/to-be-required.js +++ b/src/to-be-required.js @@ -1,8 +1,9 @@ import {checkHtmlElement, getTag} from './utils' - // form elements that support 'required' const FORM_TAGS = ['select', 'textarea'] +const ARIA_FORM_TAGS = ['input', 'select', 'textarea'] + const UNSUPPORTED_INPUT_TYPES = [ 'color', 'hidden', @@ -12,10 +13,20 @@ const UNSUPPORTED_INPUT_TYPES = [ 'reset', ] +const SUPPORTED_ARIA_ROLES = [ + 'checkbox', + 'combobox', + 'gridcell', + 'listbox', + 'radiogroup', + 'spinbutton', + 'textbox', + 'tree', +] + function isRequiredOnFormTagsExceptInput(element) { return FORM_TAGS.includes(getTag(element)) && element.hasAttribute('required') } - function isRequiredOnSupportedInput(element) { return ( getTag(element) === 'input' && @@ -25,22 +36,22 @@ function isRequiredOnSupportedInput(element) { !element.hasAttribute('type')) ) } - function isElementRequiredByARIA(element) { return ( element.hasAttribute('aria-required') && - element.getAttribute('aria-required') === 'true' + element.getAttribute('aria-required') === 'true' && + (ARIA_FORM_TAGS.includes(getTag(element)) || + (element.hasAttribute('role') && + SUPPORTED_ARIA_ROLES.includes(element.getAttribute('role')))) ) } export function toBeRequired(element) { checkHtmlElement(element, toBeRequired, this) - const isRequired = isRequiredOnFormTagsExceptInput(element) || isRequiredOnSupportedInput(element) || isElementRequiredByARIA(element) - return { pass: isRequired, message: () => { From 216538559719d4b18a73f6416ea7ba247532f01f Mon Sep 17 00:00:00 2001 From: Jatin Ranka Date: Wed, 1 May 2024 12:27:57 +0530 Subject: [PATCH 3/4] fix: prettier changes --- README.md | 1 - src/to-be-required.js | 4 ++++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index b527ac38..3e9796af 100644 --- a/README.md +++ b/README.md @@ -392,7 +392,6 @@ expect(getByTestId('select')).toBeRequired() expect(getByTestId('textarea')).toBeRequired() expect(getByTestId('supported-role')).not.toBeRequired() expect(getByTestId('supported-role-aria')).toBeRequired() -expect(queryByTestId('without-aria-role')).toBeRequired() ```
diff --git a/src/to-be-required.js b/src/to-be-required.js index 89ceb77e..6997584f 100644 --- a/src/to-be-required.js +++ b/src/to-be-required.js @@ -27,6 +27,7 @@ const SUPPORTED_ARIA_ROLES = [ function isRequiredOnFormTagsExceptInput(element) { return FORM_TAGS.includes(getTag(element)) && element.hasAttribute('required') } + function isRequiredOnSupportedInput(element) { return ( getTag(element) === 'input' && @@ -36,6 +37,7 @@ function isRequiredOnSupportedInput(element) { !element.hasAttribute('type')) ) } + function isElementRequiredByARIA(element) { return ( element.hasAttribute('aria-required') && @@ -48,10 +50,12 @@ function isElementRequiredByARIA(element) { export function toBeRequired(element) { checkHtmlElement(element, toBeRequired, this) + const isRequired = isRequiredOnFormTagsExceptInput(element) || isRequiredOnSupportedInput(element) || isElementRequiredByARIA(element) + return { pass: isRequired, message: () => { From 188b3a3e65bbe522408994e463732e1da9d739af Mon Sep 17 00:00:00 2001 From: Jatin Ranka Date: Wed, 1 May 2024 12:28:35 +0530 Subject: [PATCH 4/4] fix: prettier changes --- src/to-be-required.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/to-be-required.js b/src/to-be-required.js index 6997584f..39188e63 100644 --- a/src/to-be-required.js +++ b/src/to-be-required.js @@ -1,4 +1,5 @@ import {checkHtmlElement, getTag} from './utils' + // form elements that support 'required' const FORM_TAGS = ['select', 'textarea']