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}]}, ], })