wip

Author: kendallgassner

config/accessibility.yml

@@ -32,3 +32,5 @@ linters:
     enabled: true
   GitHub::Accessibility::SvgHasAccessibleText:
     enabled: true
+  GitHub::Accessibility::NoVisuallyHiddenInteractiveElements:
+    enabled: true

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

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+require_relative "../../custom_helpers"
+
+module ERBLint
+  module Linters
+    module GitHub
+      module Accessibility
+        class NoVisuallyHiddenInteractiveElements < Linter
+          include ERBLint::Linters::CustomHelpers
+          include LinterRegistry
+          INTERACTIVE_ELEMENTS = %w[a button summary select option textarea].freeze
+
+          MESSAGE = "Avoid visually hidding interactive elements. Visually hiding interactive elements can be confusing to sighted keyboard users as it appears their focus has been lost when they navigate to the hidden element"
+
+          def run(processed_source)
+            visually_hidden = false
+
+            tags(processed_source).each do |tag|
+              next if tag.closing?
+              classes = possible_attribute_values(tag, "class")
+              visually_hidden = true if classes.include?("sr-only")
+              next unless classes.include?("sr-only") || visually_hidden
+                if INTERACTIVE_ELEMENTS.include?(tag.name)
+                  generate_offense(self.class, processed_source, tag)
+                end  
+            end
+          end
+        end
+      end
+    end
+  end
+end

test/linters/accessibility/no_visually_hidden_interactive_elements_test.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class NoVisuallyHiddenInteractiveElements < LinterTestCase
+  def linter_class
+    ERBLint::Linters::GitHub::Accessibility::NoVisuallyHiddenInteractiveElements
+  end
+
+  def test_warns_if_element_is_interactive_and_visually_hidden
+    @file = "<button class='sr-only'>Text</button>"
+    @linter.run(processed_source)
+
+    assert_equal(1, @linter.offenses.count)
+    error_messages = @linter.offenses.map(&:message).sort
+    assert_match(/Avoid visually hidding interactive elements. Visually hiding interactive elements can be confusing to sighted keyboard users as it appears their focus has been lost when they navigate to the hidden element/, error_messages.last)
+  end
+
+  def test_does_not_warn_if_element_is_not_interactive_and_visually_hidden
+    @file = "<div class='sr-only'>Text</div>"
+    @linter.run(processed_source)
+
+    assert_empty @linter.offenses
+  end
+
+
+  def test_does_not_warn_if_element_is_interactive_and_not_visually_hidden
+    @file = "<button class='other'>Submit</button>"
+    @linter.run(processed_source)
+
+    assert_empty @linter.offenses
+  end
+
+  def test_does_not_warn_if_element_is_interactive_and_shown_on_focus
+    @file = "<a class='other show-on-focus'>skip to main content</a>"
+    @linter.run(processed_source)
+
+    assert_empty @linter.offenses
+  end
+
+  def test_warn_if_element_is_interactive_in_a_visually_hidden_parent
+    @file = "<div class='sr-only'><button>Submit</button></div>"
+    @linter.run(processed_source)
+
+    assert_equal(1, @linter.offenses.count)
+    error_messages = @linter.offenses.map(&:message).sort
+    assert_match(/Avoid visually hidding interactive elements. Visually hiding interactive elements can be confusing to sighted keyboard users as it appears their focus has been lost when they navigate to the hidden element/, error_messages.last)
+  end
+end

test/recommended_setup_works_test.rb

@@ -16,7 +16,7 @@ def test_asserts_recommended_setup_works
     end
     known_linter_names ||= ERBLint::LinterRegistry.linters.map(&:simple_name)
 
-    assert_equal 15, rules_enabled_in_accessibility_config
-    assert_equal 15, known_linter_names.count { |linter| linter.include?("GitHub::Accessibility") }
+    assert_equal 16, rules_enabled_in_accessibility_config
+    assert_equal 16, known_linter_names.count { |linter| linter.include?("GitHub::Accessibility") }
   end
 end