Merge branch 'master' into accessibility/issues/1430/migrate-a11y-rubocop-rules-link-href

Author: Adrián Bolonio

config/accessibility.yml

@@ -6,4 +6,10 @@ GitHub/Accessibility/ImageHasAlt:
   StyleGuide: https://github.com/github/rubocop-github/blob/master/guides/image-has-alt.md
 GitHub/Accessibility/LinkHasHref:
   Enabled: true
-  StyleGuide: https://github.com/github/rubocop-github/blob/master/guides/link-has-href.md
+  StyleGuide: https://github.com/github/rubocop-github/blob/master/guides/link-has-href.md
+GitHub/Accessibility/NoPositiveTabindex:
+  Enabled: true
+  StyleGuide: https://github.com/github/rubocop-github/blob/master/guides/no-positive-tabindex.md
+GitHub/Accessibility/NoRedundantImageAlt:
+  Enabled: true
+  StyleGuide: https://github.com/github/rubocop-github/blob/master/guides/no-redundant-image-alt.md

guides/no-positive-tabindex.md

@@ -0,0 +1,24 @@
+# GitHub/Accessibility/NoPositiveTabindex
+
+## Rule Details
+
+Positive tabindex is error-prone and often inaccessible.
+
+## Resources
+
+- [F44: Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that does not preserve meaning and operability](https://www.w3.org/TR/WCAG20-TECHS/F44.html)
+- [Deque University: Avoid Using Tabindex with Positive Numbers](https://dequeuniversity.com/tips/tabindex-positive-numbers)
+
+## Examples
+### **Incorrect** code for this rule 👎
+
+```erb
+<%= button_tag "Continue", :tabindex => 3 %>
+```
+
+### **Correct** code for this rule  👍
+
+```erb
+<!-- good -->
+<%= button_tag "Continue", :tabindex => -1 %>
+```

guides/no-redundant-image-alt.md

@@ -0,0 +1,24 @@
+# GitHub/Accessibility/NoRedundantImageAlt
+
+## Rule Details
+
+Alt prop should not contain `image` or `picture` as screen readers already announce the element as an image
+
+## 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 "cat.gif", size: "12x12", alt: "Picture of a cat" %>
+```
+
+### **Correct** code for this rule  👍
+
+```erb
+<!-- good -->
+<%= image_tag "cat.gif", size: "12x12", alt: "A black cat" %>
+```

lib/rubocop/cop/github/accessibility/no_positive_tabindex.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require "rubocop"
+
+module RuboCop
+  module Cop
+    module GitHub
+      module Accessibility
+        class NoPositiveTabindex < Base
+          MSG = "Positive tabindex is error-prone and often inaccessible."
+
+          def on_send(node)
+            receiver, method_name, *args = *node
+            if receiver.nil?
+              args.select do |arg|
+                arg.type == :hash
+              end.each do |hash|
+                hash.each_pair do |key, value|
+                  next if key.type == :dsym
+                  next unless key.respond_to?(:value)
+                  if key.value == :tabindex && value.source.to_i > 0
+                    add_offense(hash)
+                  end
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

lib/rubocop/cop/github/accessibility/no_redundant_image_alt.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+require "rubocop"
+
+module RuboCop
+  module Cop
+    module GitHub
+      module Accessibility
+        class NoRedundantImageAlt < Base
+          MSG = "Alt prop should not contain `image` or `picture` as screen readers already announce the element as an image"
+          REDUNDANT_ALT_WORDS = %w(image picture)
+
+          def_node_search :redundant_alt?, "(pair (sym :alt) (str #contains_redundant_alt_text?))"
+
+          def on_send(node)
+            receiver, method_name, _= *node
+
+            if receiver.nil? && method_name == :image_tag
+              if redundant_alt?(node)
+                add_offense(node.loc.selector)
+              end
+            end
+          end
+
+          private
+
+          def contains_redundant_alt_text?(string)
+            return false if string.empty?
+
+            if (string.downcase.split & REDUNDANT_ALT_WORDS).any?
+              return true
+            end
+          end
+        end
+      end
+    end
+  end
+end

test/accessibility/test_image_has_alt.rb test/test_image_has_alt.rbtest/accessibility/test_image_has_alt.rb renamed to test/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/no_positive_tabindex"
+
+class NoPositiveTabindex < CopTest
+  def cop_class
+    RuboCop::Cop::GitHub::Accessibility::NoPositiveTabindex
+  end
+
+  def test_no_positive_tabindex_alt_offense
+    offenses = erb_investigate cop, <<-ERB, "app/views/products/index.html.erb"
+      <%= button_tag "Continue", :tabindex => 3 %>
+    ERB
+
+    assert_equal 1, offenses.count
+    assert_equal "Positive tabindex is error-prone and often inaccessible.", offenses[0].message
+  end
+
+  def test_no_positive_tabindex_alt_no_offense
+    offenses = erb_investigate cop, <<-ERB, "app/views/products/index.html.erb"
+       <%= button_tag "Continue", :tabindex => -1 %>
+    ERB
+
+    assert_equal 0, offenses.count
+  end
+end

test/test_no_positive_tabindex.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+require_relative "./cop_test"
+require "minitest/autorun"
+require "rubocop/cop/github/accessibility/no_redundant_image_alt"
+
+class NoRedundantImageAlt < CopTest
+  def cop_class
+    RuboCop::Cop::GitHub::Accessibility::NoRedundantImageAlt
+  end
+
+  def test_no_redundant_image_alt_offense
+    offenses = erb_investigate cop, <<-ERB, "app/views/products/index.html.erb"
+      <%= image_tag "cat.gif", size: "12x12", alt: "Picture of a cat" %>
+    ERB
+
+    assert_equal 1, offenses.count
+    assert_equal "Alt prop should not contain `image` or `picture` as screen readers already announce the element as an image", offenses[0].message
+  end
+
+  def test_no_redundant_image_alt_no_offense
+    offenses = erb_investigate cop, <<-ERB, "app/views/products/index.html.erb"
+       <%= image_tag "cat.gif", size: "12x12", alt: "A black cat" %>
+    ERB
+
+    assert_equal 0, offenses.count
+  end
+end