From dc2122e52c20d1dfd45ca2dfad24d951e97b741c Mon Sep 17 00:00:00 2001 From: Anthony Shew Date: Thu, 12 Sep 2024 02:23:28 -0600 Subject: [PATCH] fix: optional ARIA properties for `role="separator"` in `useAriaPropsForRole` (#3856) --- CHANGELOG.md | 6 +- crates/biome_aria/src/roles.rs | 6 +- .../a11y/useAriaPropsForRole/invalid.jsx | 5 +- .../a11y/useAriaPropsForRole/invalid.jsx.snap | 208 +++++++----------- .../specs/a11y/useAriaPropsForRole/valid.jsx | 3 +- .../a11y/useAriaPropsForRole/valid.jsx.snap | 5 +- 6 files changed, 85 insertions(+), 148 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 023b01243d2e..636081d206c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -133,6 +133,8 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b - Fix edge case [#3791](https://github.com/biomejs/biome/issues/3791) for rule `noFocusedTests` being used with non-string-like expressions ([#3793](https://github.com/biomejs/biome/pull/3793)). Contributed by @h-a-n-a +- Fix optional ARIA properties for `role="separator"` in `useAriaPropsForRole` ([#3856](https://github.com/biomejs/biome/pull/3856)). Contributed by @anthonyshew + ### Configuration - Add support for loading configuration from `.editorconfig` files ([#1724](https://github.com/biomejs/biome/issues/1724)). @@ -362,7 +364,7 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b - [noConsole](https://biomejs.dev/linter/rules/no-console/) now accepts an option that specifies some allowed calls on `console`. Contributed by @Conaclos -- Add an `ignoreNull` option for [noDoubleEquals](https://biomejs.dev/linter/rules/no-double-equals/). +- Add an `ignoreNull` option for [noDoubleEquals](https://biomejs.dev/linter/rules/no-double-equals/). By default the rule allows loose comparisons against `null`. The option `ignoreNull` can be set to `false` for reporting loose comparison against `null`. @@ -847,7 +849,7 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b #### New features -- Add [noUnknownPseudoClass](https://biomejs.dev/linter/rules/no-unknown-pseudo-class/). Contributed by @tunamaguro +- Add [noUnknownPseudoClass](https://biomejs.dev/linter/rules/no-unknown-pseudo-class/). Contributed by @tunamaguro #### Bug fixes diff --git a/crates/biome_aria/src/roles.rs b/crates/biome_aria/src/roles.rs index a61799d21056..eb3fac5eb288 100644 --- a/crates/biome_aria/src/roles.rs +++ b/crates/biome_aria/src/roles.rs @@ -152,11 +152,7 @@ define_role! { define_role! { /// https://www.w3.org/TR/wai-aria-1.1/#separator SeparatorRole { - PROPS: [ - ("aria-valuemax", true), - ("aria-valuemin", true), - ("aria-valuenow", true), - ], + PROPS: [], ROLES: ["structure", "widget"], CONCEPTS: &[("hr", &[])], } diff --git a/crates/biome_js_analyze/tests/specs/a11y/useAriaPropsForRole/invalid.jsx b/crates/biome_js_analyze/tests/specs/a11y/useAriaPropsForRole/invalid.jsx index 7e8e2745061c..26038b68993f 100644 --- a/crates/biome_js_analyze/tests/specs/a11y/useAriaPropsForRole/invalid.jsx +++ b/crates/biome_js_analyze/tests/specs/a11y/useAriaPropsForRole/invalid.jsx @@ -7,9 +7,6 @@ var a = ; var a = ; var a = ; var a = ; -var a = ; -var a = ; -var a = ; var a = ; var a = ; var a = ; @@ -21,4 +18,4 @@ var a = ; var a = ; var a = ; var a = ; -var a = ; \ No newline at end of file +var a = ; diff --git a/crates/biome_js_analyze/tests/specs/a11y/useAriaPropsForRole/invalid.jsx.snap b/crates/biome_js_analyze/tests/specs/a11y/useAriaPropsForRole/invalid.jsx.snap index 620df2b0aff4..3f132df21023 100644 --- a/crates/biome_js_analyze/tests/specs/a11y/useAriaPropsForRole/invalid.jsx.snap +++ b/crates/biome_js_analyze/tests/specs/a11y/useAriaPropsForRole/invalid.jsx.snap @@ -1,5 +1,6 @@ --- source: crates/biome_js_analyze/tests/spec_tests.rs +assertion_line: 86 expression: invalid.jsx --- # Input @@ -13,9 +14,6 @@ var a = ; var a = ; var a = ; var a = ; -var a = ; -var a = ; -var a = ; var a = ; var a = ; var a = ; @@ -28,6 +26,7 @@ var a = ; var a = ; var a = ; var a = ; + ``` # Diagnostics @@ -176,7 +175,7 @@ invalid.jsx:8:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━ > 8 │ var a = ; │ ^^^^^^^^^^^^^ 9 │ var a = ; - 10 │ var a = ; + 10 │ var a = ; i Missing ARIA prop(s): @@ -195,8 +194,8 @@ invalid.jsx:9:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━ 8 │ var a = ; > 9 │ var a = ; │ ^^^^^^^^^^^^^ - 10 │ var a = ; - 11 │ var a = ; + 10 │ var a = ; + 11 │ var a = ; i Missing ARIA prop(s): @@ -208,73 +207,14 @@ invalid.jsx:9:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━ ``` invalid.jsx:10:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! The element with the separator ARIA role does not have the required ARIA attributes. + ! The element with the scrollbar ARIA role does not have the required ARIA attributes. 8 │ var a = ; 9 │ var a = ; - > 10 │ var a = ; + > 10 │ var a = ; │ ^^^^^^^^^^^^^^^^ - 11 │ var a = ; - 12 │ var a = ; - - i Missing ARIA prop(s): - - - aria-valuemax - - aria-valuenow - - -``` - -``` -invalid.jsx:11:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - ! The element with the separator ARIA role does not have the required ARIA attributes. - - 9 │ var a = ; - 10 │ var a = ; - > 11 │ var a = ; - │ ^^^^^^^^^^^^^^^^ - 12 │ var a = ; - 13 │ var a = ; - - i Missing ARIA prop(s): - - - aria-valuemin - - aria-valuenow - - -``` - -``` -invalid.jsx:12:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - ! The element with the separator ARIA role does not have the required ARIA attributes. - - 10 │ var a = ; - 11 │ var a = ; - > 12 │ var a = ; - │ ^^^^^^^^^^^^^^^^ - 13 │ var a = ; - 14 │ var a = ; - - i Missing ARIA prop(s): - - - aria-valuenow - - -``` - -``` -invalid.jsx:13:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - ! The element with the scrollbar ARIA role does not have the required ARIA attributes. - - 11 │ var a = ; - 12 │ var a = ; - > 13 │ var a = ; - │ ^^^^^^^^^^^^^^^^ - 14 │ var a = ; - 15 │ var a = ; + 11 │ var a = ; + 12 │ var a = ; i Missing ARIA prop(s): @@ -287,16 +227,16 @@ invalid.jsx:13:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━ ``` ``` -invalid.jsx:14:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +invalid.jsx:11:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! The element with the scrollbar ARIA role does not have the required ARIA attributes. - 12 │ var a = ; - 13 │ var a = ; - > 14 │ var a = ; + 9 │ var a = ; + 10 │ var a = ; + > 11 │ var a = ; │ ^^^^^^^^^^^^^^^^ - 15 │ var a = ; - 16 │ var a = ; + 12 │ var a = ; + 13 │ var a = ; i Missing ARIA prop(s): @@ -309,16 +249,16 @@ invalid.jsx:14:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━ ``` ``` -invalid.jsx:15:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +invalid.jsx:12:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! The element with the scrollbar ARIA role does not have the required ARIA attributes. - 13 │ var a = ; - 14 │ var a = ; - > 15 │ var a = ; + 10 │ var a = ; + 11 │ var a = ; + > 12 │ var a = ; │ ^^^^^^^^^^^^^^^^ - 16 │ var a = ; - 17 │ var a = ; + 13 │ var a = ; + 14 │ var a = ; i Missing ARIA prop(s): @@ -330,16 +270,16 @@ invalid.jsx:15:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━ ``` ``` -invalid.jsx:16:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +invalid.jsx:13:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! The element with the scrollbar ARIA role does not have the required ARIA attributes. - 14 │ var a = ; - 15 │ var a = ; - > 16 │ var a = ; + 11 │ var a = ; + 12 │ var a = ; + > 13 │ var a = ; │ ^^^^^^^^^^^^^^^^ - 17 │ var a = ; - 18 │ var a = ; + 14 │ var a = ; + 15 │ var a = ; i Missing ARIA prop(s): @@ -350,16 +290,16 @@ invalid.jsx:16:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━ ``` ``` -invalid.jsx:17:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +invalid.jsx:14:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! The element with the radio ARIA role does not have the required ARIA attributes. - 15 │ var a = ; - 16 │ var a = ; - > 17 │ var a = ; + 12 │ var a = ; + 13 │ var a = ; + > 14 │ var a = ; │ ^^^^^^^^^^^^ - 18 │ var a = ; - 19 │ var a = ; + 15 │ var a = ; + 16 │ var a = ; i Missing ARIA prop(s): @@ -369,16 +309,16 @@ invalid.jsx:17:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━ ``` ``` -invalid.jsx:18:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +invalid.jsx:15:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! The element with the option ARIA role does not have the required ARIA attributes. - 16 │ var a = ; - 17 │ var a = ; - > 18 │ var a = ; + 13 │ var a = ; + 14 │ var a = ; + > 15 │ var a = ; │ ^^^^^^^^^^^^^ - 19 │ var a = ; - 20 │ var a = ; + 16 │ var a = ; + 17 │ var a = ; i Missing ARIA prop(s): @@ -388,16 +328,16 @@ invalid.jsx:18:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━ ``` ``` -invalid.jsx:19:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +invalid.jsx:16:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! The element with the heading ARIA role does not have the required ARIA attributes. - 17 │ var a = ; - 18 │ var a = ; - > 19 │ var a = ; + 14 │ var a = ; + 15 │ var a = ; + > 16 │ var a = ; │ ^^^^^^^^^^^^^^ - 20 │ var a = ; - 21 │ var a = ; + 17 │ var a = ; + 18 │ var a = ; i Missing ARIA prop(s): @@ -407,16 +347,16 @@ invalid.jsx:19:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━ ``` ``` -invalid.jsx:20:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +invalid.jsx:17:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! The element with the combobox ARIA role does not have the required ARIA attributes. - 18 │ var a = ; - 19 │ var a = ; - > 20 │ var a = ; + 15 │ var a = ; + 16 │ var a = ; + > 17 │ var a = ; │ ^^^^^^^^^^^^^^^ - 21 │ var a = ; - 22 │ var a = ; + 18 │ var a = ; + 19 │ var a = ; i Missing ARIA prop(s): @@ -427,16 +367,16 @@ invalid.jsx:20:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━ ``` ``` -invalid.jsx:21:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +invalid.jsx:18:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! The element with the combobox ARIA role does not have the required ARIA attributes. - 19 │ var a = ; - 20 │ var a = ; - > 21 │ var a = ; + 16 │ var a = ; + 17 │ var a = ; + > 18 │ var a = ; │ ^^^^^^^^^^^^^^^ - 22 │ var a = ; - 23 │ var a = ; + 19 │ var a = ; + 20 │ var a = ; i Missing ARIA prop(s): @@ -446,16 +386,16 @@ invalid.jsx:21:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━ ``` ``` -invalid.jsx:22:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +invalid.jsx:19:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! The element with the combobox ARIA role does not have the required ARIA attributes. - 20 │ var a = ; - 21 │ var a = ; - > 22 │ var a = ; + 17 │ var a = ; + 18 │ var a = ; + > 19 │ var a = ; │ ^^^^^^^^^^^^^^^ - 23 │ var a = ; - 24 │ var a = ; + 20 │ var a = ; + 21 │ var a = ; i Missing ARIA prop(s): @@ -465,15 +405,16 @@ invalid.jsx:22:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━ ``` ``` -invalid.jsx:23:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +invalid.jsx:20:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! The element with the menuitemcheckbox ARIA role does not have the required ARIA attributes. - 21 │ var a = ; - 22 │ var a = ; - > 23 │ var a = ; + 18 │ var a = ; + 19 │ var a = ; + > 20 │ var a = ; │ ^^^^^^^^^^^^^^^^^^^^^^^ - 24 │ var a = ; + 21 │ var a = ; + 22 │ i Missing ARIA prop(s): @@ -483,14 +424,15 @@ invalid.jsx:23:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━ ``` ``` -invalid.jsx:24:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +invalid.jsx:21:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! The element with the menuitemradio ARIA role does not have the required ARIA attributes. - 22 │ var a = ; - 23 │ var a = ; - > 24 │ var a = ; + 19 │ var a = ; + 20 │ var a = ; + > 21 │ var a = ; │ ^^^^^^^^^^^^^^^^^^^^ + 22 │ i Missing ARIA prop(s): @@ -498,5 +440,3 @@ invalid.jsx:24:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━ ``` - - diff --git a/crates/biome_js_analyze/tests/specs/a11y/useAriaPropsForRole/valid.jsx b/crates/biome_js_analyze/tests/specs/a11y/useAriaPropsForRole/valid.jsx index 9975f01d6f09..e64847e7a6b3 100644 --- a/crates/biome_js_analyze/tests/specs/a11y/useAriaPropsForRole/valid.jsx +++ b/crates/biome_js_analyze/tests/specs/a11y/useAriaPropsForRole/valid.jsx @@ -3,6 +3,7 @@ var a = ; var a = ; var a = ; var a = ; +var a = ; var a = ; var a = ; var a = ; @@ -10,4 +11,4 @@ var a = ; var a = ; var a = ; var a = ; -var a = ; \ No newline at end of file +var a = ; diff --git a/crates/biome_js_analyze/tests/specs/a11y/useAriaPropsForRole/valid.jsx.snap b/crates/biome_js_analyze/tests/specs/a11y/useAriaPropsForRole/valid.jsx.snap index b69db2c62fa9..fff245f78cbe 100644 --- a/crates/biome_js_analyze/tests/specs/a11y/useAriaPropsForRole/valid.jsx.snap +++ b/crates/biome_js_analyze/tests/specs/a11y/useAriaPropsForRole/valid.jsx.snap @@ -1,5 +1,6 @@ --- source: crates/biome_js_analyze/tests/spec_tests.rs +assertion_line: 86 expression: valid.jsx --- # Input @@ -9,6 +10,7 @@ var a = ; var a = ; var a = ; var a = ; +var a = ; var a = ; var a = ; var a = ; @@ -17,6 +19,5 @@ var a = ; var a = ; var a = ; var a = ; -``` - +```