Merge branch 'master' into accessibility/issues/1430/migrate-a11y-rubocop-rules-no-redundant-image-alt

Adrián Bolonio · web-flow · commit 7040e0446923 · 2022-07-29T17:32:09.000+02:00
diff --git a/README.md b/README.md
@@ -19,6 +19,7 @@ inherit_gem:
   rubocop-github:
     - config/default.yml
     - config/rails.yml
+    - config/accessibility.yml
 ```
 
 ### Legacy usage
@@ -33,4 +34,4 @@ If you are using a rubocop version < 1.0.0, you can use rubocop-github version
 
 ## The Cops
 
-All cops are located under [`lib/rubocop/cop/github`](lib/rubocop/cop/github), and contain examples/documentation.
+All cops are located under [`lib/rubocop/cop/github`](lib/rubocop/cop/github) and [`lib/rubocop/cop/github/accessibility`](lib/rubocop/cop/github/accessibility), and contain examples/documentation.
diff --git a/config/accessibility.yml b/config/accessibility.yml
@@ -0,0 +1,6 @@
+require:
+  - rubocop/cop/github/accessibility
+
+GitHub/Accessibility/ImageHasAlt:
+  Enabled: true
+  StyleGuide: https://github.com/github/rubocop-github/blob/master/guides/image-has-alt.md
diff --git a/guides/image-has-alt.md b/guides/image-has-alt.md
@@ -0,0 +1,29 @@
+# GitHub/Accessibility/ImageHasAlt
+
+## Rule Details
+
+Images should have an alt prop with meaningful text or an empty string for decorative images.
+
+## Resources
+
+- [W3C WAI Images Tutorial](https://www.w3.org/WAI/tutorials/images/)
+- [Primer: Alternative text for images](https://primer.style/design/accessibility/alternative-text-for-images)
+
+## Examples
+### **Incorrect** code for this rule 👎
+
+```erb
+<%= image_tag "spinners/octocat-spinner-16px.gif", size: "12x12" %>
+```
+
+### **Correct** code for this rule  👍
+
+```erb
+<!-- good -->
+<%= image_tag "spinners/octocat-spinner-16px.gif", size: "12x12", alt: "GitHub Logo spinner" %>
+```
+
+```erb
+<!-- also good -->
+<%= image_tag "spinners/octocat-spinner-16px.gif", size: "12x12", alt: "" %>
+```
diff --git a/lib/rubocop/cop/github/accessibility/image_has_alt.rb b/lib/rubocop/cop/github/accessibility/image_has_alt.rb
@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require "rubocop"
+
+module RuboCop
+  module Cop
+    module GitHub
+      module Accessibility
+        class ImageHasAlt < Base
+          MSG = "Images should have an alt prop with meaningful text or an empty string for decorative images"
+
+          def_node_search :has_alt_attribute?, "(sym :alt)"
+
+          def on_send(node)
+            receiver, method_name, _= *node
+
+            if receiver.nil? && method_name == :image_tag
+              alt = has_alt_attribute?(node)
+              add_offense(node.loc.selector) if alt.nil?
+            end
+          end
+        end
+      end
+    end
+  end
+end
diff --git a/test/accessibility/test_image_has_alt.rb b/test/accessibility/test_image_has_alt.rb
@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+require_relative "./cop_test"
+require "minitest/autorun"
+require "rubocop/cop/github/accessibility/image_has_alt"
+
+class TestImageHasAlt < CopTest
+  def cop_class
+    RuboCop::Cop::GitHub::Accessibility::ImageHasAlt
+  end
+
+  def test_image_has_alt_offense
+    offenses = erb_investigate cop, <<-ERB, "app/views/products/index.html.erb"
+      <%= image_tag "spinners/octocat-spinner-16px.gif", size: "12x12" %>
+    ERB
+
+    assert_equal 1, offenses.count
+    assert_equal "Images should have an alt prop with meaningful text or an empty string for decorative images", offenses[0].message
+  end
+
+  def test_image_has_alt_no_offense
+    offenses = erb_investigate cop, <<-ERB, "app/views/products/index.html.erb"
+      <%= image_tag "spinners/octocat-spinner-16px.gif", size: "12x12", alt: "GitHub Logo spinner" %>
+    ERB
+
+    assert_equal 0, offenses.count
+  end
+end
