From 36c807b3c497263393895b0494c455237f633c43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20Bolonio?= Date: Thu, 28 Jul 2022 13:28:19 +0000 Subject: [PATCH 1/4] Add new a11y rubocop rule: ImageHasAlt --- lib/rubocop/cop/github/rails_image_has_alt.rb | 26 +++++++++++++++++ test/test_rails_image_has_alt.rb | 28 +++++++++++++++++++ 2 files changed, 54 insertions(+) create mode 100644 lib/rubocop/cop/github/rails_image_has_alt.rb create mode 100644 test/test_rails_image_has_alt.rb diff --git a/lib/rubocop/cop/github/rails_image_has_alt.rb b/lib/rubocop/cop/github/rails_image_has_alt.rb new file mode 100644 index 00000000..698d9224 --- /dev/null +++ b/lib/rubocop/cop/github/rails_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/test_rails_image_has_alt.rb b/test/test_rails_image_has_alt.rb new file mode 100644 index 00000000..e241c9eb --- /dev/null +++ b/test/test_rails_image_has_alt.rb @@ -0,0 +1,28 @@ +# frozen_string_literal: true + +require_relative "./cop_test" +require "minitest/autorun" +require "rubocop/cop/github/rails_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 From 7aa3f0cae446c2fb930b4077eba129b3d6693a84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20Bolonio?= Date: Fri, 29 Jul 2022 09:45:09 +0000 Subject: [PATCH 2/4] Renamed and move rubocop rule --- .../{rails_image_has_alt.rb => accessibility/image_has_alt.rb} | 0 test/{test_rails_image_has_alt.rb => test_image_has_alt.rb} | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename lib/rubocop/cop/github/{rails_image_has_alt.rb => accessibility/image_has_alt.rb} (100%) rename test/{test_rails_image_has_alt.rb => test_image_has_alt.rb} (93%) diff --git a/lib/rubocop/cop/github/rails_image_has_alt.rb b/lib/rubocop/cop/github/accessibility/image_has_alt.rb similarity index 100% rename from lib/rubocop/cop/github/rails_image_has_alt.rb rename to lib/rubocop/cop/github/accessibility/image_has_alt.rb diff --git a/test/test_rails_image_has_alt.rb b/test/test_image_has_alt.rb similarity index 93% rename from test/test_rails_image_has_alt.rb rename to test/test_image_has_alt.rb index e241c9eb..e4fb08a8 100644 --- a/test/test_rails_image_has_alt.rb +++ b/test/test_image_has_alt.rb @@ -2,7 +2,7 @@ require_relative "./cop_test" require "minitest/autorun" -require "rubocop/cop/github/rails_image_has_alt" +require "rubocop/cop/github/accessibility/image_has_alt" class TestImageHasAlt < CopTest def cop_class From 6825ecb78e8dbd049f919fcb0f2f5aaac0e5a88f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20Bolonio?= Date: Fri, 29 Jul 2022 09:45:53 +0000 Subject: [PATCH 3/4] Add documentation about rubocop rule. Add config file --- README.md | 3 ++- config/accessibility.yml | 6 ++++++ guides/image-has-alt.md | 29 +++++++++++++++++++++++++++++ 3 files changed, 37 insertions(+), 1 deletion(-) create mode 100644 config/accessibility.yml create mode 100644 guides/image-has-alt.md diff --git a/README.md b/README.md index 5d664e17..b8af92a1 100644 --- 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 new file mode 100644 index 00000000..00f871c6 --- /dev/null +++ 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 \ No newline at end of file diff --git a/guides/image-has-alt.md b/guides/image-has-alt.md new file mode 100644 index 00000000..a761dba6 --- /dev/null +++ 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 + +<%= image_tag "spinners/octocat-spinner-16px.gif", size: "12x12", alt: "GitHub Logo spinner" %> +``` + +```erb + +<%= image_tag "spinners/octocat-spinner-16px.gif", size: "12x12", alt: "" %> +``` \ No newline at end of file From 14837ff4e1b5ad94dd4b460761ac7945ab4f0c4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20Bolonio?= Date: Fri, 29 Jul 2022 15:10:14 +0000 Subject: [PATCH 4/4] Move test to accessibility folder --- test/{ => accessibility}/test_image_has_alt.rb | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename test/{ => accessibility}/test_image_has_alt.rb (100%) diff --git a/test/test_image_has_alt.rb b/test/accessibility/test_image_has_alt.rb similarity index 100% rename from test/test_image_has_alt.rb rename to test/accessibility/test_image_has_alt.rb