rule: no-aria-hidden-on-focusable-elements

Author: khiga8

README.md

@@ -39,6 +39,8 @@ linters:
     enabled: true
   GitHub::Accessibility::NestedInteractiveElementsCounter:
     enabled: true
+  GitHub::Accessibility::NoAriaHiddenOnFocusableCounter:
+    enabled: true
   GitHub::Accessibility::NoAriaLabelMisuseCounter:
     enabled: true
   GitHub::Accessibility::NoPositiveTabIndexCounter:
@@ -61,6 +63,7 @@ linters:
 - [GitHub::Accessibility::NestedInteractiveElementsCounter](./docs/rules/accessibility/nested-interactive-elements-counter.md)
 - [GitHub::Accessibility::IframeHasTitleCounter](./docs/rules/accessibility/iframe-has-title-counter.md)
 - [GitHub::Accessibility::ImageHasAltCounter](./docs/rules/accessibility/image-has-alt-counter.md)
+- [GitHub::Accessibility::NoAriaHiddenOnFocusableCounter](./docs/rules/accessibility/no-aria-hidden-on-focusable-counter.md)
 - [GitHub::Accessibility::NoAriaLabelMisuseCounter](./docs/rules/accessibility/no-aria-label-misuse-counter.md)
 - [GitHub::Accessibility::NoPositiveTabIndexCounter](./docs/rules/accessibility/no-positive-tab-index-counter.md)
 - [GitHub::Accessibility::NoRedundantImageAltCounter](./docs/rules/accessibility/no-redundant-image-alt-counter.md)

docs/rules/accessibility/no-aria-hidden-on-focusable-counter.md

@@ -0,0 +1,33 @@
+# No aria-hidden on focusable counter
+
+## Rule Details
+
+Elements that are focusable should not have `aria-hidden="true"` set.
+
+`aria-hidden="true"` hides an element from assistive technologies, but if the element is still reachable by keyboard, it can cause confusion amongst assistie technology users who may be able to reach the element, but not have access to the element or it's information.
+
+### Resources
+
+- [Accessibility insights: aria-hidden-focus](https://accessibilityinsights.io/info-examples/web/aria-hidden-focus/)
+
+## Examples
+
+### **Incorrect** code for this rule 👎
+
+```erb
+<button aria-hidden="true">Submit</button>
+```
+
+```erb
+<div role="menuitem" aria-hidden="true" tabindex="0"></div>
+```
+
+### **Correct** code for this rule  👍
+
+```erb
+<button>Submit</button>
+```
+
+```erb
+<div role="menuitem" aria-hidden="true" tabindex="-1"></div>
+```

lib/erblint-github/linters/custom_helpers.rb

@@ -6,6 +6,8 @@
 module ERBLint
   module Linters
     module CustomHelpers
+      INTERACTIVE_ELEMENTS = %w[button summary input select textarea a].freeze
+
       def rule_disabled?(processed_source)
         processed_source.parser.ast.descendants(:erb).each do |node|
           indicator_node, _, code_node, = *node
@@ -89,6 +91,15 @@ def tags(processed_source)
       def simple_class_name
         self.class.name.gsub("ERBLint::Linters::", "")
       end
+
+      def focusable?(tag)
+        tabindex = possible_attribute_values(tag, "tabindex")
+        if INTERACTIVE_ELEMENTS.include?(tag.name)
+          tabindex.empty? || tabindex.first.to_i >= 0
+        else
+          tabindex.any? && tabindex.first.to_i >= 0
+        end
+      end
     end
   end
 end

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

@@ -10,7 +10,6 @@ class NestedInteractiveElementsCounter < Linter
           include ERBLint::Linters::CustomHelpers
           include LinterRegistry
 
-          INTERACTIVE_ELEMENTS = %w[button summary input select textarea a].freeze
           MESSAGE = "Nesting interactive elements produces invalid HTML, and ssistive technologies, such as screen readers, might ignore or respond unexpectedly to such nested controls."
 
           def run(processed_source)

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

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require_relative "../../custom_helpers"
+
+module ERBLint
+  module Linters
+    module GitHub
+      module Accessibility
+        class NoAriaHiddenOnFocusableCounter < Linter
+          include ERBLint::Linters::CustomHelpers
+          include LinterRegistry
+
+          MESSAGE = "Elements that are focusable should not have `aria-hidden='true' because it can cause confusion on the state of the element for assistive technolgoy users."
+
+          def run(processed_source)
+            tags(processed_source).each do |tag|
+              aria_hidden = possible_attribute_values(tag, "aria-hidden")
+              generate_offense(self.class, processed_source, tag) if aria_hidden.include?("true") && focusable?(tag)
+            end
+
+            counter_correct?(processed_source)
+          end
+
+          def autocorrect(processed_source, offense)
+            return unless offense.context
+
+            lambda do |corrector|
+              if processed_source.file_content.include?("erblint:counter #{simple_class_name}")
+                # update the counter if exists
+                corrector.replace(offense.source_range, offense.context)
+              else
+                # add comment with counter if none
+                corrector.insert_before(processed_source.source_buffer.source_range, "#{offense.context}\n")
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

test/linters/accessibility/no_aria_hidden_on_focusable_counter_test.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class NoAriaHiddenOnFocusableCounterTest < LinterTestCase
+  def linter_class
+    ERBLint::Linters::GitHub::Accessibility::NoAriaHiddenOnFocusableCounter
+  end
+
+  def test_does_not_warn_if_link_does_not_have_aria_hidden
+    @file = "<a href='github.com'>GitHub</a>"
+    @linter.run(processed_source)
+
+    assert_empty @linter.offenses
+  end
+
+  def test_does_not_warn_if_link_has_aria_hidden_false
+    @file = "<a aria-hidden='false' href='github.com'>GitHub</a>"
+    @linter.run(processed_source)
+
+    assert_empty @linter.offenses
+  end
+
+  def test_warns_when_link_has_aria_hidden_true
+    @file = "<a aria-hidden='true' href='github.com'>GitHub</a>"
+    @linter.run(processed_source)
+
+    refute_empty @linter.offenses
+  end
+
+  def test_does_not_warn_when_link_has_aria_hidden_true_and_is_not_focusable
+    @file = "<a aria-hidden='true' tabindex='-1' href='github.com'>GitHub</a>"
+    @linter.run(processed_source)
+
+    assert_empty @linter.offenses
+  end
+
+  def test_warns_when_element_has_aria_hidden_true_and_is_tab_focusable
+    @file = "<div role='list' aria-hidden='true' tabindex='0'></div>"
+    @linter.run(processed_source)
+
+    refute_empty @linter.offenses
+  end
+end