Skip to content

Commit bff637e

Browse files
committed
Clean up regex
1 parent 381f2bc commit bff637e

File tree

3 files changed

+10
-7
lines changed

3 files changed

+10
-7
lines changed

docs/rules/a11y-aria-label-is-well-formatted.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@
66

77
## Rule Details
88

9-
`[aria-label]` content should be formatted in the same way you would visual text.
9+
`[aria-label]` content should be formatted in the same way you would visual text. Please use sentence case.
1010

11-
Please use sentence case, and avoid using hyphens like you would an ID.
11+
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.
1212

1313
## Resources
1414

15+
- [Using aria-label](https://www.w3.org/WAI/tutorials/forms/labels/#using-aria-label)
16+
1517
## Examples
1618

1719
### **Incorrect** code for this rule 👎

lib/rules/a11y-aria-label-is-well-formatted.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,10 @@ module.exports = {
1919
if (propValue.type !== 'Literal') return
2020

2121
const ariaLabel = propValue.value
22-
if (ariaLabel.match(/^[a-z]+[a-z\-\s]*$/)) {
22+
if (ariaLabel.match(/^[a-z]+.*$/)) {
2323
context.report({
2424
node,
25-
message:
26-
'[aria-label] text should be formatted the same as you would visual text. Use sentence case and make sure you are not using hyphens.',
25+
message: '[aria-label] text should be formatted the same as you would visual text. Use sentence case.',
2726
})
2827
}
2928
},

tests/a11y-aria-label-is-well-formatted.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,21 @@ const ruleTester = new RuleTester({
1111
},
1212
})
1313

14-
const errorMessage =
15-
'[aria-label] text should be formatted the same as you would visual text. Use sentence case and make sure you are not using hyphens.'
14+
const errorMessage = '[aria-label] text should be formatted the same as you would visual text. Use sentence case.'
1615

1716
ruleTester.run('a11y-aria-label-is-well-formatted', rule, {
1817
valid: [
1918
{code: "<a aria-labelledby='someId' href='#'>Read more</a>;"},
2019
{code: "<a aria-label={someName} href='#'>Read more</a>;"},
2120
{code: "<a aria-label='This is a label'></a>;"},
21+
{code: "<a aria-label='Valid'></a>;"},
22+
{code: "<a aria-label='VALID'></a>;"},
2223
{code: '<Link aria-label="Valid" href="#">Read more</Link>'},
2324
],
2425
invalid: [
2526
{code: "<a aria-label='close modal'></a>;", errors: [{message: errorMessage}]},
2627
{code: "<a aria-label='submit'></a>;", errors: [{message: errorMessage}]},
28+
{code: "<a aria-label='submit.yml'></a>;", errors: [{message: errorMessage}]},
2729
{code: "<a aria-label='this-is-not-an-id'></a>;", errors: [{message: errorMessage}]},
2830
],
2931
})

0 commit comments

Comments
 (0)