diff --git a/Gemfile.lock b/Gemfile.lock index 1754b8d..2b54584 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - erblint-github (0.3.0) + erblint-github (0.3.1) GEM remote: https://rubygems.org/ diff --git a/docs/rules/accessibility/aria-label-is-well-formatted.md b/docs/rules/accessibility/aria-label-is-well-formatted.md index e8fc344..90b4a67 100644 --- a/docs/rules/accessibility/aria-label-is-well-formatted.md +++ b/docs/rules/accessibility/aria-label-is-well-formatted.md @@ -2,10 +2,18 @@ ## Rule Details -`[aria-label]` content should be formatted in the same way you would visual text. Please use sentence case. +`[aria-label]` content should be formatted in the same way you would visual text. -Do not kebab case the words like you would an HTML ID. An `aria-label` is different from `aria-labelledby`. -An `aria-label` is not an ID, and should be formatted as human-friendly text. +Keep the following practices in mind: + +- Use sentence case. +- Do not kebab case the words like you would an HTML ID. An `aria-label` is different from `aria-labelledby`. An `aria-label` represents the name of a control, and has the same purpose as a visual label would for screen reader users. Therefore, it should be formatted as human-friendly text. +- Do not use line-break characters like ` `. An accessible name should be concise to start with. +- Do not set the `aria-label` to a URL. Instead, use an appropriate human-friendly description. + +## Resources + +- [Staff only: Guidance on naming controls](https://github.com/github/accessibility-playbook/blob/main/content/link-and-button-guidance.mdx#guidance-on-naming-controls) ## Config @@ -35,6 +43,14 @@ If you determine that there are valid scenarios for `aria-label` to start with l + HTML @linter.run(processed_source) - assert_equal 4, @linter.offenses.count + assert_equal 5, @linter.offenses.count + end + + def test_warns_when_aria_label_contains_newline_characer + @file = <<~HTML + + + HTML + @linter.run(processed_source) + assert_equal 2, @linter.offenses.count end def test_does_not_warn_when_aria_labelledby_starts_with_downcase @@ -26,18 +36,14 @@ def test_does_not_warn_when_aria_labelledby_starts_with_downcase assert_empty @linter.offenses end - def test_does_not_warn_when_aria_label_starts_with_anything_other_than_downcase - @file = <<~HTML - - - - HTML + def test_does_not_warn_with_string_interpolation + @file = '' @linter.run(processed_source) assert_empty @linter.offenses end - def test_does_not_warn_when_aria_label_is_excepted_in_config + def test_does_not_warn_when_aria_label_starts_with_anything_other_than_downcase @file = <<~HTML @@ -48,15 +54,14 @@ def test_does_not_warn_when_aria_label_is_excepted_in_config assert_empty @linter.offenses end - def test_does_not_warn_if_aria_label_is_in_excepted_list @file = <<~HTML - + HTML - @linter.config.exceptions = ["hello"] + @linter.config.exceptions = ["hello", "git checkout <%= some_branch %>"] @linter.run(processed_source) - assert_equal 1, @linter.offenses.count + assert_empty @linter.offenses end end