From 2c0e476e8d8bbfe8ddff34eccb9c1cfc551e86af Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Thu, 23 Mar 2023 13:09:09 -0400 Subject: [PATCH 1/9] New rule to flag invalid aria-label format --- lib/rules/a11y-aria-label-is-readable.js | 31 ++++++++++++++++++++++++ tests/a11y-aria-label-is-readable.js | 31 ++++++++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 lib/rules/a11y-aria-label-is-readable.js create mode 100644 tests/a11y-aria-label-is-readable.js diff --git a/lib/rules/a11y-aria-label-is-readable.js b/lib/rules/a11y-aria-label-is-readable.js new file mode 100644 index 00000000..c6ee121a --- /dev/null +++ b/lib/rules/a11y-aria-label-is-readable.js @@ -0,0 +1,31 @@ +const {getProp, getPropValue} = require('jsx-ast-utils') + +module.exports = { + meta: { + docs: { + description: '[aria-label] text should be formatted as you would visible text, in a human-readable format.', + url: require('../url')(module), + }, + schema: [], + }, + + create(context) { + return { + JSXOpeningElement: node => { + const prop = getProp(node.attributes, 'aria-label') + if(!prop) return + + const propValue = prop.value; + if (propValue.type !== 'Literal') return + + const ariaLabel = propValue.value + if (ariaLabel.match(/^[a-z]+[a-z\-\.\s]*$/)) { + context.report({ + node, + message: '[aria-label] text should be formatted the same as you would visible text. Use sentence case and make sure you are not using hyphens.', + }) + } + }, + } + }, +} diff --git a/tests/a11y-aria-label-is-readable.js b/tests/a11y-aria-label-is-readable.js new file mode 100644 index 00000000..7c922efc --- /dev/null +++ b/tests/a11y-aria-label-is-readable.js @@ -0,0 +1,31 @@ +const rule = require('../lib/rules/a11y-aria-label-is-readable') +const RuleTester = require('eslint').RuleTester + +const ruleTester = new RuleTester({ + parserOptions: { + ecmaVersion: 'latest', + sourceType: 'module', + ecmaFeatures: { + jsx: true, + }, + }, +}) + +const errorMessage = + '[aria-label] text should be formatted the same as you would visible text.' + +ruleTester.run('a11y-aria-label-is-readable', rule, { + valid: [ + {code: "Read more;"}, + {code: "Read more;"}, + {code: ";"}, + { + code: 'Read more', + }, + ], + invalid: [ + {code: ";", errors: [{message: errorMessage}]}, + {code: ";", errors: [{message: errorMessage}]}, + {code: ";", errors: [{message: errorMessage}]}, + ], +}) From 96141927b291a684c0ec19da4dc0ea78b0b6afc5 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Thu, 23 Mar 2023 13:10:11 -0400 Subject: [PATCH 2/9] Update tests --- tests/a11y-aria-label-is-readable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/a11y-aria-label-is-readable.js b/tests/a11y-aria-label-is-readable.js index 7c922efc..14e0634b 100644 --- a/tests/a11y-aria-label-is-readable.js +++ b/tests/a11y-aria-label-is-readable.js @@ -12,7 +12,7 @@ const ruleTester = new RuleTester({ }) const errorMessage = - '[aria-label] text should be formatted the same as you would visible text.' + '[aria-label] text should be formatted the same as you would visible text. Use sentence case and make sure you are not using hyphens.' ruleTester.run('a11y-aria-label-is-readable', rule, { valid: [ From ede85360796740462b8fb3c39150a30d373bf7de Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Thu, 23 Mar 2023 13:18:08 -0400 Subject: [PATCH 3/9] Update docs and preset --- README.md | 45 ++++++++++++----------- docs/rules/a11y-aria-label-is-readable.md | 16 ++++++++ lib/configs/react.js | 1 + lib/index.js | 1 + lib/rules/a11y-aria-label-is-readable.js | 9 +++-- 5 files changed, 46 insertions(+), 26 deletions(-) create mode 100644 docs/rules/a11y-aria-label-is-readable.md diff --git a/README.md b/README.md index 02ce6578..96f08dd4 100644 --- a/README.md +++ b/README.md @@ -82,27 +82,28 @@ This config will be interpreted in the following way: πŸ”§ Automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix).\ ❌ Deprecated. -| NameΒ Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  | Description | πŸ’Ό | πŸ”§ | ❌ | -| :------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- | :- | :- | :- | -| [a11y-no-generic-link-text](docs/rules/a11y-no-generic-link-text.md) | disallow generic link text | | | ❌ | -| [array-foreach](docs/rules/array-foreach.md) | enforce `for..of` loops over `Array.forEach` | βœ… | | | -| [async-currenttarget](docs/rules/async-currenttarget.md) | disallow `event.currentTarget` calls inside of async functions | πŸ” | | | -| [async-preventdefault](docs/rules/async-preventdefault.md) | disallow `event.preventDefault` calls inside of async functions | πŸ” | | | -| [authenticity-token](docs/rules/authenticity-token.md) | disallow usage of CSRF tokens in JavaScript | πŸ” | | | -| [get-attribute](docs/rules/get-attribute.md) | disallow wrong usage of attribute names | πŸ” | πŸ”§ | | -| [js-class-name](docs/rules/js-class-name.md) | enforce a naming convention for js- prefixed classes | πŸ” | | | -| [no-blur](docs/rules/no-blur.md) | disallow usage of `Element.prototype.blur()` | πŸ” | | | -| [no-d-none](docs/rules/no-d-none.md) | disallow usage the `d-none` CSS class | πŸ” | | | -| [no-dataset](docs/rules/no-dataset.md) | enforce usage of `Element.prototype.getAttribute` instead of `Element.prototype.datalist` | πŸ” | | | -| [no-dynamic-script-tag](docs/rules/no-dynamic-script-tag.md) | disallow creating dynamic script tags | βœ… | | | -| [no-implicit-buggy-globals](docs/rules/no-implicit-buggy-globals.md) | disallow implicit global variables | βœ… | | | -| [no-inner-html](docs/rules/no-inner-html.md) | disallow `Element.prototype.innerHTML` in favor of `Element.prototype.textContent` | πŸ” | | | -| [no-innerText](docs/rules/no-innerText.md) | disallow `Element.prototype.innerText` in favor of `Element.prototype.textContent` | πŸ” | πŸ”§ | | -| [no-then](docs/rules/no-then.md) | enforce using `async/await` syntax over Promises | βœ… | | | -| [no-useless-passive](docs/rules/no-useless-passive.md) | disallow marking a event handler as passive when it has no effect | πŸ” | πŸ”§ | | -| [prefer-observers](docs/rules/prefer-observers.md) | disallow poorly performing event listeners | πŸ” | | | -| [require-passive-events](docs/rules/require-passive-events.md) | enforce marking high frequency event handlers as passive | πŸ” | | | -| [role-supports-aria-props](docs/rules/role-supports-aria-props.md) | Enforce that elements with explicit or implicit roles defined contain only `aria-*` properties supported by that `role`. | βš›οΈ | | | -| [unescaped-html-literal](docs/rules/unescaped-html-literal.md) | disallow unescaped HTML literals | πŸ” | | | +| NameΒ Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  | Description | πŸ’Ό | πŸ”§ | ❌ | +| :----------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- | :- | :- | :- | +| [a11y-aria-label-is-readable](docs/rules/a11y-aria-label-is-readable.md) | [aria-label] text should be formatted as you would visible text, in a human-readable format. | | | | +| [a11y-no-generic-link-text](docs/rules/a11y-no-generic-link-text.md) | disallow generic link text | | | ❌ | +| [array-foreach](docs/rules/array-foreach.md) | enforce `for..of` loops over `Array.forEach` | βœ… | | | +| [async-currenttarget](docs/rules/async-currenttarget.md) | disallow `event.currentTarget` calls inside of async functions | πŸ” | | | +| [async-preventdefault](docs/rules/async-preventdefault.md) | disallow `event.preventDefault` calls inside of async functions | πŸ” | | | +| [authenticity-token](docs/rules/authenticity-token.md) | disallow usage of CSRF tokens in JavaScript | πŸ” | | | +| [get-attribute](docs/rules/get-attribute.md) | disallow wrong usage of attribute names | πŸ” | πŸ”§ | | +| [js-class-name](docs/rules/js-class-name.md) | enforce a naming convention for js- prefixed classes | πŸ” | | | +| [no-blur](docs/rules/no-blur.md) | disallow usage of `Element.prototype.blur()` | πŸ” | | | +| [no-d-none](docs/rules/no-d-none.md) | disallow usage the `d-none` CSS class | πŸ” | | | +| [no-dataset](docs/rules/no-dataset.md) | enforce usage of `Element.prototype.getAttribute` instead of `Element.prototype.datalist` | πŸ” | | | +| [no-dynamic-script-tag](docs/rules/no-dynamic-script-tag.md) | disallow creating dynamic script tags | βœ… | | | +| [no-implicit-buggy-globals](docs/rules/no-implicit-buggy-globals.md) | disallow implicit global variables | βœ… | | | +| [no-inner-html](docs/rules/no-inner-html.md) | disallow `Element.prototype.innerHTML` in favor of `Element.prototype.textContent` | πŸ” | | | +| [no-innerText](docs/rules/no-innerText.md) | disallow `Element.prototype.innerText` in favor of `Element.prototype.textContent` | πŸ” | πŸ”§ | | +| [no-then](docs/rules/no-then.md) | enforce using `async/await` syntax over Promises | βœ… | | | +| [no-useless-passive](docs/rules/no-useless-passive.md) | disallow marking a event handler as passive when it has no effect | πŸ” | πŸ”§ | | +| [prefer-observers](docs/rules/prefer-observers.md) | disallow poorly performing event listeners | πŸ” | | | +| [require-passive-events](docs/rules/require-passive-events.md) | enforce marking high frequency event handlers as passive | πŸ” | | | +| [role-supports-aria-props](docs/rules/role-supports-aria-props.md) | Enforce that elements with explicit or implicit roles defined contain only `aria-*` properties supported by that `role`. | βš›οΈ | | | +| [unescaped-html-literal](docs/rules/unescaped-html-literal.md) | disallow unescaped HTML literals | πŸ” | | | diff --git a/docs/rules/a11y-aria-label-is-readable.md b/docs/rules/a11y-aria-label-is-readable.md new file mode 100644 index 00000000..65be70ca --- /dev/null +++ b/docs/rules/a11y-aria-label-is-readable.md @@ -0,0 +1,16 @@ +# [aria-label] text should be formatted as you would visible text, in a human-readable format (`github/a11y-aria-label-is-readable`) + + + +## Rule Details + +## Resources + +## Examples + +### **Incorrect** code for this rule πŸ‘Ž + +### **Correct** code for this rule πŸ‘ + + +## Version diff --git a/lib/configs/react.js b/lib/configs/react.js index a49ead99..111b42eb 100644 --- a/lib/configs/react.js +++ b/lib/configs/react.js @@ -9,6 +9,7 @@ module.exports = { extends: ['plugin:jsx-a11y/recommended'], rules: { 'jsx-a11y/role-supports-aria-props': 'off', // Override with github/role-supports-aria-props until https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/910 is resolved + 'github/a11y-aria-label-is-readable': 'error', 'github/role-supports-aria-props': 'error', 'jsx-a11y/no-aria-hidden-on-focusable': 'error', 'jsx-a11y/anchor-ambiguous-text': [ diff --git a/lib/index.js b/lib/index.js index 025b23ff..ab1f7474 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,6 +1,7 @@ module.exports = { rules: { 'a11y-no-generic-link-text': require('./rules/a11y-no-generic-link-text'), + 'a11y-aria-label-is-readable': require('./rules/a11y-aria-label-is-readable'), 'array-foreach': require('./rules/array-foreach'), 'async-currenttarget': require('./rules/async-currenttarget'), 'async-preventdefault': require('./rules/async-preventdefault'), diff --git a/lib/rules/a11y-aria-label-is-readable.js b/lib/rules/a11y-aria-label-is-readable.js index c6ee121a..31a9a35c 100644 --- a/lib/rules/a11y-aria-label-is-readable.js +++ b/lib/rules/a11y-aria-label-is-readable.js @@ -13,16 +13,17 @@ module.exports = { return { JSXOpeningElement: node => { const prop = getProp(node.attributes, 'aria-label') - if(!prop) return + if (!prop) return - const propValue = prop.value; + const propValue = prop.value if (propValue.type !== 'Literal') return - + const ariaLabel = propValue.value if (ariaLabel.match(/^[a-z]+[a-z\-\.\s]*$/)) { context.report({ node, - message: '[aria-label] text should be formatted the same as you would visible text. Use sentence case and make sure you are not using hyphens.', + message: + '[aria-label] text should be formatted the same as you would visible text. Use sentence case and make sure you are not using hyphens.', }) } }, From d286fa5931b3658f713ed0f01565347862f8ae0b Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Thu, 23 Mar 2023 13:22:50 -0400 Subject: [PATCH 4/9] Update README --- README.md | 2 +- docs/rules/a11y-aria-label-is-readable.md | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 96f08dd4..196dd42a 100644 --- a/README.md +++ b/README.md @@ -84,7 +84,7 @@ This config will be interpreted in the following way: | NameΒ Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  | Description | πŸ’Ό | πŸ”§ | ❌ | | :----------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- | :- | :- | :- | -| [a11y-aria-label-is-readable](docs/rules/a11y-aria-label-is-readable.md) | [aria-label] text should be formatted as you would visible text, in a human-readable format. | | | | +| [a11y-aria-label-is-readable](docs/rules/a11y-aria-label-is-readable.md) | [aria-label] text should be formatted as you would visible text, in a human-readable format. | βš›οΈ | | | | [a11y-no-generic-link-text](docs/rules/a11y-no-generic-link-text.md) | disallow generic link text | | | ❌ | | [array-foreach](docs/rules/array-foreach.md) | enforce `for..of` loops over `Array.forEach` | βœ… | | | | [async-currenttarget](docs/rules/async-currenttarget.md) | disallow `event.currentTarget` calls inside of async functions | πŸ” | | | diff --git a/docs/rules/a11y-aria-label-is-readable.md b/docs/rules/a11y-aria-label-is-readable.md index 65be70ca..7a800974 100644 --- a/docs/rules/a11y-aria-label-is-readable.md +++ b/docs/rules/a11y-aria-label-is-readable.md @@ -1,5 +1,7 @@ # [aria-label] text should be formatted as you would visible text, in a human-readable format (`github/a11y-aria-label-is-readable`) +πŸ’Ό This rule is enabled in the βš›οΈ `react` config. + ## Rule Details From a083b5220dee1319c403c2b88352d8d62cf68e56 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Thu, 23 Mar 2023 13:31:16 -0400 Subject: [PATCH 5/9] Fix lint --- lib/rules/a11y-aria-label-is-readable.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/rules/a11y-aria-label-is-readable.js b/lib/rules/a11y-aria-label-is-readable.js index 31a9a35c..fa834aaf 100644 --- a/lib/rules/a11y-aria-label-is-readable.js +++ b/lib/rules/a11y-aria-label-is-readable.js @@ -1,4 +1,4 @@ -const {getProp, getPropValue} = require('jsx-ast-utils') +const {getProp} = require('jsx-ast-utils') module.exports = { meta: { @@ -19,7 +19,7 @@ module.exports = { if (propValue.type !== 'Literal') return const ariaLabel = propValue.value - if (ariaLabel.match(/^[a-z]+[a-z\-\.\s]*$/)) { + if (ariaLabel.match(/^[a-z]+[a-z\-\s]*$/)) { context.report({ node, message: From 440f6f37dab9360f04ee1b8ab4c0fd54c16de2fa Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Thu, 23 Mar 2023 13:51:10 -0400 Subject: [PATCH 6/9] Rename rule --- README.md | 2 +- docs/rules/a11y-aria-label-is-readable.md | 18 --------- .../a11y-aria-label-is-well-formatted.md | 37 +++++++++++++++++++ lib/configs/react.js | 2 +- lib/index.js | 2 +- ...s => a11y-aria-label-is-well-formatted.js} | 0 ...s => a11y-aria-label-is-well-formatted.js} | 8 ++-- 7 files changed, 43 insertions(+), 26 deletions(-) delete mode 100644 docs/rules/a11y-aria-label-is-readable.md create mode 100644 docs/rules/a11y-aria-label-is-well-formatted.md rename lib/rules/{a11y-aria-label-is-readable.js => a11y-aria-label-is-well-formatted.js} (100%) rename tests/{a11y-aria-label-is-readable.js => a11y-aria-label-is-well-formatted.js} (81%) diff --git a/README.md b/README.md index 196dd42a..7c4c1277 100644 --- a/README.md +++ b/README.md @@ -84,7 +84,7 @@ This config will be interpreted in the following way: | NameΒ Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  | Description | πŸ’Ό | πŸ”§ | ❌ | | :----------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- | :- | :- | :- | -| [a11y-aria-label-is-readable](docs/rules/a11y-aria-label-is-readable.md) | [aria-label] text should be formatted as you would visible text, in a human-readable format. | βš›οΈ | | | +| [a11y-aria-label-is-well-formatted](docs/rules/a11y-aria-label-is-well-formatted.md) | [aria-label] text should be formatted as you would visible text, in a human-readable format. | βš›οΈ | | | | [a11y-no-generic-link-text](docs/rules/a11y-no-generic-link-text.md) | disallow generic link text | | | ❌ | | [array-foreach](docs/rules/array-foreach.md) | enforce `for..of` loops over `Array.forEach` | βœ… | | | | [async-currenttarget](docs/rules/async-currenttarget.md) | disallow `event.currentTarget` calls inside of async functions | πŸ” | | | diff --git a/docs/rules/a11y-aria-label-is-readable.md b/docs/rules/a11y-aria-label-is-readable.md deleted file mode 100644 index 7a800974..00000000 --- a/docs/rules/a11y-aria-label-is-readable.md +++ /dev/null @@ -1,18 +0,0 @@ -# [aria-label] text should be formatted as you would visible text, in a human-readable format (`github/a11y-aria-label-is-readable`) - -πŸ’Ό This rule is enabled in the βš›οΈ `react` config. - - - -## Rule Details - -## Resources - -## Examples - -### **Incorrect** code for this rule πŸ‘Ž - -### **Correct** code for this rule πŸ‘ - - -## Version diff --git a/docs/rules/a11y-aria-label-is-well-formatted.md b/docs/rules/a11y-aria-label-is-well-formatted.md new file mode 100644 index 00000000..ba3af751 --- /dev/null +++ b/docs/rules/a11y-aria-label-is-well-formatted.md @@ -0,0 +1,37 @@ +# [aria-label] text should be formatted as you would visible text, in a human-readable format (`github/a11y-aria-label-is-well-formatted`) + +πŸ’Ό This rule is enabled in the βš›οΈ `react` config. + + + +## Rule Details + +`[aria-label]` content should be formatted in the same way you would visible text. + +Please use sentence case, and avoid using hyphens like you would an ID. + +## Resources + +## Examples + +### **Incorrect** code for this rule πŸ‘Ž + +```html + +``` + +```html + +``` + +### **Correct** code for this rule πŸ‘ + +```html + +``` + +```html + +``` + +## Version diff --git a/lib/configs/react.js b/lib/configs/react.js index 111b42eb..aa036960 100644 --- a/lib/configs/react.js +++ b/lib/configs/react.js @@ -9,7 +9,7 @@ module.exports = { extends: ['plugin:jsx-a11y/recommended'], rules: { 'jsx-a11y/role-supports-aria-props': 'off', // Override with github/role-supports-aria-props until https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/910 is resolved - 'github/a11y-aria-label-is-readable': 'error', + 'github/a11y-aria-label-is-well-formatted': 'error', 'github/role-supports-aria-props': 'error', 'jsx-a11y/no-aria-hidden-on-focusable': 'error', 'jsx-a11y/anchor-ambiguous-text': [ diff --git a/lib/index.js b/lib/index.js index ab1f7474..c4a8b3ee 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,7 +1,7 @@ module.exports = { rules: { 'a11y-no-generic-link-text': require('./rules/a11y-no-generic-link-text'), - 'a11y-aria-label-is-readable': require('./rules/a11y-aria-label-is-readable'), + 'a11y-aria-label-is-well-formatted': require('./rules/a11y-aria-label-is-well-formatted'), 'array-foreach': require('./rules/array-foreach'), 'async-currenttarget': require('./rules/async-currenttarget'), 'async-preventdefault': require('./rules/async-preventdefault'), diff --git a/lib/rules/a11y-aria-label-is-readable.js b/lib/rules/a11y-aria-label-is-well-formatted.js similarity index 100% rename from lib/rules/a11y-aria-label-is-readable.js rename to lib/rules/a11y-aria-label-is-well-formatted.js diff --git a/tests/a11y-aria-label-is-readable.js b/tests/a11y-aria-label-is-well-formatted.js similarity index 81% rename from tests/a11y-aria-label-is-readable.js rename to tests/a11y-aria-label-is-well-formatted.js index 14e0634b..1507a1f2 100644 --- a/tests/a11y-aria-label-is-readable.js +++ b/tests/a11y-aria-label-is-well-formatted.js @@ -1,4 +1,4 @@ -const rule = require('../lib/rules/a11y-aria-label-is-readable') +const rule = require('../lib/rules/a11y-aria-label-is-well-formatted') const RuleTester = require('eslint').RuleTester const ruleTester = new RuleTester({ @@ -14,14 +14,12 @@ const ruleTester = new RuleTester({ const errorMessage = '[aria-label] text should be formatted the same as you would visible text. Use sentence case and make sure you are not using hyphens.' -ruleTester.run('a11y-aria-label-is-readable', rule, { +ruleTester.run('a11y-aria-label-is-well-formatted', rule, { valid: [ {code: "Read more;"}, {code: "Read more;"}, {code: ";"}, - { - code: 'Read more', - }, + {code: 'Read more'}, ], invalid: [ {code: ";", errors: [{message: errorMessage}]}, From 980be835bb8857a235f85f4908db5f6741eb8468 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Thu, 23 Mar 2023 13:55:04 -0400 Subject: [PATCH 7/9] Update text --- README.md | 46 +++++++++---------- .../a11y-aria-label-is-well-formatted.md | 4 +- .../a11y-aria-label-is-well-formatted.js | 4 +- tests/a11y-aria-label-is-well-formatted.js | 2 +- 4 files changed, 28 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 7c4c1277..14aedd58 100644 --- a/README.md +++ b/README.md @@ -82,28 +82,28 @@ This config will be interpreted in the following way: πŸ”§ Automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix).\ ❌ Deprecated. -| NameΒ Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  | Description | πŸ’Ό | πŸ”§ | ❌ | -| :----------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- | :- | :- | :- | -| [a11y-aria-label-is-well-formatted](docs/rules/a11y-aria-label-is-well-formatted.md) | [aria-label] text should be formatted as you would visible text, in a human-readable format. | βš›οΈ | | | -| [a11y-no-generic-link-text](docs/rules/a11y-no-generic-link-text.md) | disallow generic link text | | | ❌ | -| [array-foreach](docs/rules/array-foreach.md) | enforce `for..of` loops over `Array.forEach` | βœ… | | | -| [async-currenttarget](docs/rules/async-currenttarget.md) | disallow `event.currentTarget` calls inside of async functions | πŸ” | | | -| [async-preventdefault](docs/rules/async-preventdefault.md) | disallow `event.preventDefault` calls inside of async functions | πŸ” | | | -| [authenticity-token](docs/rules/authenticity-token.md) | disallow usage of CSRF tokens in JavaScript | πŸ” | | | -| [get-attribute](docs/rules/get-attribute.md) | disallow wrong usage of attribute names | πŸ” | πŸ”§ | | -| [js-class-name](docs/rules/js-class-name.md) | enforce a naming convention for js- prefixed classes | πŸ” | | | -| [no-blur](docs/rules/no-blur.md) | disallow usage of `Element.prototype.blur()` | πŸ” | | | -| [no-d-none](docs/rules/no-d-none.md) | disallow usage the `d-none` CSS class | πŸ” | | | -| [no-dataset](docs/rules/no-dataset.md) | enforce usage of `Element.prototype.getAttribute` instead of `Element.prototype.datalist` | πŸ” | | | -| [no-dynamic-script-tag](docs/rules/no-dynamic-script-tag.md) | disallow creating dynamic script tags | βœ… | | | -| [no-implicit-buggy-globals](docs/rules/no-implicit-buggy-globals.md) | disallow implicit global variables | βœ… | | | -| [no-inner-html](docs/rules/no-inner-html.md) | disallow `Element.prototype.innerHTML` in favor of `Element.prototype.textContent` | πŸ” | | | -| [no-innerText](docs/rules/no-innerText.md) | disallow `Element.prototype.innerText` in favor of `Element.prototype.textContent` | πŸ” | πŸ”§ | | -| [no-then](docs/rules/no-then.md) | enforce using `async/await` syntax over Promises | βœ… | | | -| [no-useless-passive](docs/rules/no-useless-passive.md) | disallow marking a event handler as passive when it has no effect | πŸ” | πŸ”§ | | -| [prefer-observers](docs/rules/prefer-observers.md) | disallow poorly performing event listeners | πŸ” | | | -| [require-passive-events](docs/rules/require-passive-events.md) | enforce marking high frequency event handlers as passive | πŸ” | | | -| [role-supports-aria-props](docs/rules/role-supports-aria-props.md) | Enforce that elements with explicit or implicit roles defined contain only `aria-*` properties supported by that `role`. | βš›οΈ | | | -| [unescaped-html-literal](docs/rules/unescaped-html-literal.md) | disallow unescaped HTML literals | πŸ” | | | +| NameΒ Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  | Description | πŸ’Ό | πŸ”§ | ❌ | +| :----------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- | :- | :- | :- | +| [a11y-aria-label-is-well-formatted](docs/rules/a11y-aria-label-is-well-formatted.md) | [aria-label] text should be formatted as you would visual text. | βš›οΈ | | | +| [a11y-no-generic-link-text](docs/rules/a11y-no-generic-link-text.md) | disallow generic link text | | | ❌ | +| [array-foreach](docs/rules/array-foreach.md) | enforce `for..of` loops over `Array.forEach` | βœ… | | | +| [async-currenttarget](docs/rules/async-currenttarget.md) | disallow `event.currentTarget` calls inside of async functions | πŸ” | | | +| [async-preventdefault](docs/rules/async-preventdefault.md) | disallow `event.preventDefault` calls inside of async functions | πŸ” | | | +| [authenticity-token](docs/rules/authenticity-token.md) | disallow usage of CSRF tokens in JavaScript | πŸ” | | | +| [get-attribute](docs/rules/get-attribute.md) | disallow wrong usage of attribute names | πŸ” | πŸ”§ | | +| [js-class-name](docs/rules/js-class-name.md) | enforce a naming convention for js- prefixed classes | πŸ” | | | +| [no-blur](docs/rules/no-blur.md) | disallow usage of `Element.prototype.blur()` | πŸ” | | | +| [no-d-none](docs/rules/no-d-none.md) | disallow usage the `d-none` CSS class | πŸ” | | | +| [no-dataset](docs/rules/no-dataset.md) | enforce usage of `Element.prototype.getAttribute` instead of `Element.prototype.datalist` | πŸ” | | | +| [no-dynamic-script-tag](docs/rules/no-dynamic-script-tag.md) | disallow creating dynamic script tags | βœ… | | | +| [no-implicit-buggy-globals](docs/rules/no-implicit-buggy-globals.md) | disallow implicit global variables | βœ… | | | +| [no-inner-html](docs/rules/no-inner-html.md) | disallow `Element.prototype.innerHTML` in favor of `Element.prototype.textContent` | πŸ” | | | +| [no-innerText](docs/rules/no-innerText.md) | disallow `Element.prototype.innerText` in favor of `Element.prototype.textContent` | πŸ” | πŸ”§ | | +| [no-then](docs/rules/no-then.md) | enforce using `async/await` syntax over Promises | βœ… | | | +| [no-useless-passive](docs/rules/no-useless-passive.md) | disallow marking a event handler as passive when it has no effect | πŸ” | πŸ”§ | | +| [prefer-observers](docs/rules/prefer-observers.md) | disallow poorly performing event listeners | πŸ” | | | +| [require-passive-events](docs/rules/require-passive-events.md) | enforce marking high frequency event handlers as passive | πŸ” | | | +| [role-supports-aria-props](docs/rules/role-supports-aria-props.md) | Enforce that elements with explicit or implicit roles defined contain only `aria-*` properties supported by that `role`. | βš›οΈ | | | +| [unescaped-html-literal](docs/rules/unescaped-html-literal.md) | disallow unescaped HTML literals | πŸ” | | | diff --git a/docs/rules/a11y-aria-label-is-well-formatted.md b/docs/rules/a11y-aria-label-is-well-formatted.md index ba3af751..0e0d3af6 100644 --- a/docs/rules/a11y-aria-label-is-well-formatted.md +++ b/docs/rules/a11y-aria-label-is-well-formatted.md @@ -1,4 +1,4 @@ -# [aria-label] text should be formatted as you would visible text, in a human-readable format (`github/a11y-aria-label-is-well-formatted`) +# [aria-label] text should be formatted as you would visual text (`github/a11y-aria-label-is-well-formatted`) πŸ’Ό This rule is enabled in the βš›οΈ `react` config. @@ -6,7 +6,7 @@ ## Rule Details -`[aria-label]` content should be formatted in the same way you would visible text. +`[aria-label]` content should be formatted in the same way you would visual text. Please use sentence case, and avoid using hyphens like you would an ID. diff --git a/lib/rules/a11y-aria-label-is-well-formatted.js b/lib/rules/a11y-aria-label-is-well-formatted.js index fa834aaf..151e8956 100644 --- a/lib/rules/a11y-aria-label-is-well-formatted.js +++ b/lib/rules/a11y-aria-label-is-well-formatted.js @@ -3,7 +3,7 @@ const {getProp} = require('jsx-ast-utils') module.exports = { meta: { docs: { - description: '[aria-label] text should be formatted as you would visible text, in a human-readable format.', + description: '[aria-label] text should be formatted as you would visual text.', url: require('../url')(module), }, schema: [], @@ -23,7 +23,7 @@ module.exports = { context.report({ node, message: - '[aria-label] text should be formatted the same as you would visible text. Use sentence case and make sure you are not using hyphens.', + '[aria-label] text should be formatted the same as you would visual text. Use sentence case and make sure you are not using hyphens.', }) } }, diff --git a/tests/a11y-aria-label-is-well-formatted.js b/tests/a11y-aria-label-is-well-formatted.js index 1507a1f2..1df68f3e 100644 --- a/tests/a11y-aria-label-is-well-formatted.js +++ b/tests/a11y-aria-label-is-well-formatted.js @@ -12,7 +12,7 @@ const ruleTester = new RuleTester({ }) const errorMessage = - '[aria-label] text should be formatted the same as you would visible text. Use sentence case and make sure you are not using hyphens.' +'[aria-label] text should be formatted the same as you would visual text. Use sentence case and make sure you are not using hyphens.' ruleTester.run('a11y-aria-label-is-well-formatted', rule, { valid: [ From 381f2bc59e29fbbdf87eaaf3741ceef24296f1f8 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Thu, 23 Mar 2023 13:57:11 -0400 Subject: [PATCH 8/9] Run prettier --- tests/a11y-aria-label-is-well-formatted.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/a11y-aria-label-is-well-formatted.js b/tests/a11y-aria-label-is-well-formatted.js index 1df68f3e..be78fc0b 100644 --- a/tests/a11y-aria-label-is-well-formatted.js +++ b/tests/a11y-aria-label-is-well-formatted.js @@ -12,7 +12,7 @@ const ruleTester = new RuleTester({ }) const errorMessage = -'[aria-label] text should be formatted the same as you would visual text. Use sentence case and make sure you are not using hyphens.' + '[aria-label] text should be formatted the same as you would visual text. Use sentence case and make sure you are not using hyphens.' ruleTester.run('a11y-aria-label-is-well-formatted', rule, { valid: [ From bff637e26fdd598aebb04acdd7fdd4e2d705ef4c Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Thu, 23 Mar 2023 15:59:42 -0400 Subject: [PATCH 9/9] Clean up regex --- docs/rules/a11y-aria-label-is-well-formatted.md | 6 ++++-- lib/rules/a11y-aria-label-is-well-formatted.js | 5 ++--- tests/a11y-aria-label-is-well-formatted.js | 6 ++++-- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/docs/rules/a11y-aria-label-is-well-formatted.md b/docs/rules/a11y-aria-label-is-well-formatted.md index 0e0d3af6..9c2f164a 100644 --- a/docs/rules/a11y-aria-label-is-well-formatted.md +++ b/docs/rules/a11y-aria-label-is-well-formatted.md @@ -6,12 +6,14 @@ ## Rule Details -`[aria-label]` content should be formatted in the same way you would visual text. +`[aria-label]` content should be formatted in the same way you would visual text. Please use sentence case. -Please use sentence case, and avoid using hyphens like you would an ID. +Do not connect the words like you would an ID. An `aria-label` is not an ID, and should be formatted as human-friendly text. ## Resources +- [Using aria-label](https://www.w3.org/WAI/tutorials/forms/labels/#using-aria-label) + ## Examples ### **Incorrect** code for this rule πŸ‘Ž diff --git a/lib/rules/a11y-aria-label-is-well-formatted.js b/lib/rules/a11y-aria-label-is-well-formatted.js index 151e8956..3e9ace86 100644 --- a/lib/rules/a11y-aria-label-is-well-formatted.js +++ b/lib/rules/a11y-aria-label-is-well-formatted.js @@ -19,11 +19,10 @@ module.exports = { if (propValue.type !== 'Literal') return const ariaLabel = propValue.value - if (ariaLabel.match(/^[a-z]+[a-z\-\s]*$/)) { + if (ariaLabel.match(/^[a-z]+.*$/)) { context.report({ node, - message: - '[aria-label] text should be formatted the same as you would visual text. Use sentence case and make sure you are not using hyphens.', + message: '[aria-label] text should be formatted the same as you would visual text. Use sentence case.', }) } }, diff --git a/tests/a11y-aria-label-is-well-formatted.js b/tests/a11y-aria-label-is-well-formatted.js index be78fc0b..cf244a7e 100644 --- a/tests/a11y-aria-label-is-well-formatted.js +++ b/tests/a11y-aria-label-is-well-formatted.js @@ -11,19 +11,21 @@ const ruleTester = new RuleTester({ }, }) -const errorMessage = - '[aria-label] text should be formatted the same as you would visual text. Use sentence case and make sure you are not using hyphens.' +const errorMessage = '[aria-label] text should be formatted the same as you would visual text. Use sentence case.' ruleTester.run('a11y-aria-label-is-well-formatted', rule, { valid: [ {code: "Read more;"}, {code: "Read more;"}, {code: ";"}, + {code: ";"}, + {code: ";"}, {code: 'Read more'}, ], invalid: [ {code: ";", errors: [{message: errorMessage}]}, {code: ";", errors: [{message: errorMessage}]}, + {code: ";", errors: [{message: errorMessage}]}, {code: ";", errors: [{message: errorMessage}]}, ], })