Merge pull request #63 from github/kh-aria-label-is-well-formatted

New rule that flags downcased aria-label

Author: khiga8

README.md

@@ -23,6 +23,8 @@ require "erblint-github/linters"
 ```yaml 
 ---
 linters:
+  GitHub::Accessibility::AriaLabelIsWellFormatted:
+    enabled: true
   GitHub::Accessibility::AvoidBothDisabledAndAriaDisabled:
     enabled: true
   GitHub::Accessibility::AvoidGenericLinkText:
@@ -55,6 +57,7 @@ linters:
 
 ## Rules
 
+- [GitHub::Accessibility::AriaLabelIsWellFormatted](./docs/rules/accessibility/aria-label-is-well-formatted.md)
 - [GitHub::Accessibility::AvoidBothDisabledAndAriaDisabled](./docs/rules/accessibility/avoid-both-disabled-and-aria-disabled.md)
 - [GitHub::Accessibility::AvoidGenericLinkText](./docs/rules/accessibility/avoid-generic-link-text.md)
 - [GitHub::Accessibility::DisabledAttribute](./docs/rules/accessibility/disabled-attribute.md)

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

@@ -0,0 +1,46 @@
+# aria-label is well formatted
+
+## Rule Details
+
+`[aria-label]` content should be formatted in the same way you would visual text. Please 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` is not an ID, and should be formatted as human-friendly text.
+
+## Config
+
+If you determine that there are valid scenarios for `aria-label` to start with lowercase, you may exempt it in your `.erb-lint.yml` config like so:
+
+```yml
+  GitHub::Accessibility::AriaLabelIsWellFormatted:
+    enabled: true
+    exceptions:
+      - allowed for some reason
+      - also allowed for some reason
+```
+
+## Examples
+
+### **Incorrect** code for this rule 👎
+
+```erb
+<button aria-label="close">
+```
+
+```erb
+<button aria-label="submit">
+```
+
+```erb
+<button aria-label="button-1">
+```
+
+### **Correct** code for this rule  👍
+
+```erb
+<button aria-label="Submit">
+````
+
+```erb
+<button aria-label="Close">
+````

lib/erblint-github/linters/github/accessibility/aria_label_is_well_formatted.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+require_relative "../../custom_helpers"
+
+module ERBLint
+  module Linters
+    module GitHub
+      module Accessibility
+        class AriaLabelIsWellFormatted < Linter
+          include ERBLint::Linters::CustomHelpers
+          include LinterRegistry
+
+          MESSAGE = "[aria-label] text should be formatted the same as you would visual text. Use sentence case."
+
+          class ConfigSchema < LinterConfig
+            property :exceptions, accepts: array_of?(String),
+              default: -> { [] }
+          end
+          self.config_schema = ConfigSchema
+
+          def run(processed_source)
+            tags(processed_source).each do |tag|
+              next if tag.closing?
+
+              aria_label = possible_attribute_values(tag, "aria-label").join
+              next if aria_label.empty?
+
+              if aria_label.match?(/^[a-z]/) && !@config.exceptions.include?(aria_label)
+                generate_offense(self.class, processed_source, tag)
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

test/linters/accessibility/aria_label_is_well_formatted_test.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class AriaLabelIsWellFormatted < LinterTestCase
+  def linter_class
+    ERBLint::Linters::GitHub::Accessibility::AriaLabelIsWellFormatted
+  end
+
+  def test_warns_when_aria_label_starts_with_downcase
+    @file = <<~HTML
+     <button aria-label="submit" ></button>
+     <button aria-label="check-box-1" ></button>
+     <button aria-label="ok" ></button>
+     <button aria-label="no" ></button>
+    HTML
+    @linter.run(processed_source)
+
+    assert_equal 4, @linter.offenses.count
+  end
+
+  def test_does_not_warn_when_aria_labelledby_starts_with_downcase
+    @file = "<button aria-labelledby='some-element-1'</button>"
+    @linter.run(processed_source)
+
+    assert_empty @linter.offenses
+  end
+
+  def test_does_not_warn_when_aria_label_starts_with_anything_other_than_downcase
+    @file = <<~HTML
+     <button aria-label="Submit" ></button>
+     <button aria-label="Close" ></button>
+     <button aria-label="11 open" ></button>
+    HTML
+    @linter.run(processed_source)
+
+    assert_empty @linter.offenses
+  end
+
+  def test_does_not_warn_when_aria_label_is_excepted_in_config
+    @file = <<~HTML
+     <button aria-label="Submit" ></button>
+     <button aria-label="Close" ></button>
+     <button aria-label="11 open" ></button>
+    HTML
+    @linter.run(processed_source)
+
+    assert_empty @linter.offenses
+  end
+
+
+  def test_does_not_warn_if_aria_label_is_in_excepted_list
+    @file = <<~HTML
+     <button aria-label="hello" ></button>
+     <button aria-label="hello world" ></button>
+    HTML
+    @linter.config.exceptions = ["hello"]
+    @linter.run(processed_source)
+
+    assert_equal 1, @linter.offenses.count
+  end
+end