Merge pull request #11 from github/kh-avoid_both_disabled_and_aria_disabled

Add avoid both disabled and aria disabled rule

Author: khiga8

README.md

@@ -23,6 +23,8 @@ require "erblint-github/linters"
 ```yaml 
 ---
 linters:
+  GitHub::Accessibility::AvoidBothDisabledAndAriaDisabled:
+    enabled: true
   GitHub::Accessibility::ImageHasAlt:
     enabled: true
   GitHub::Accessibility::NoAriaLabelMisuse:
@@ -33,6 +35,7 @@ linters:
 
 ## Rules
 
+- [GitHub::Accessibility::AvoidBothDisabledAndAriaDisabled](./docs/rules/accessibility/avoid-both-disabled-and-aria-disabled.md)
 - [GitHub::Accessibility::ImageHasAlt](./docs/rules/accessibility/image-has-alt.md)
 - [GitHub::Accessibility::NoAriaLabelMisuse](./docs/rules/accessibility/no-aria-label-misuse.md)
 - [GitHub::Accessibility::NoRedundantImageAlt](./docs/rules/accessibility/no-redundant-image-alt.md)

docs/rules/accessibility/avoid-both-disabled-and-aria-disabled.md

@@ -0,0 +1,31 @@
+# Avoid both disabled and aria disabled
+
+## Rule Details
+
+[From w3 ARIA in HTML ](https://www.w3.org/TR/html-aria/#docconformance-attr):
+> authors MAY use aria-disabled=true on a button element, rather than the disabled attribute. However, authors SHOULD NOT use both the native HTML attribute and the aria-* attribute together,
+
+HTML elements with `disabled` are ignored when a screen reader uses tab navigation. To expose the disabled element, one may use `aria-disabled` and custom js and css to mimic disabled behavior *instead*. Setting both `aria-disabled` and `disabled` is unnecessary.
+
+This linter will raise when both `aria-disabled` and `disabled` are set on HTML elements that natively support `disabled` including `button`, `fieldset`, `input`, `optgroup`, `option`, `select`, and `textarea`.
+
+👎 Examples of **incorrect** code for this rule:
+
+```erb
+<button aria-disabled="true" disabled="true">
+<input aria-disabled="true" disabled="true">
+```
+
+👍 Examples of **correct** code for this rule:
+
+```erb
+<button disabled="true">
+````
+
+```erb
+<input disabled="true">
+```
+
+```erb
+<button aria-disabled="true" class="js-disabled-button disabled-button">Update</button>
+```

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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+require_relative "../../custom_helpers"
+
+module ERBLint
+  module Linters
+    module GitHub
+      module Accessibility
+        class AvoidBothDisabledAndAriaDisabled < Linter
+          include ERBLint::Linters::CustomHelpers
+          include LinterRegistry
+
+          ELEMENTS_WITH_NATIVE_DISABLED_ATTRIBUTE_SUPPORT = %w[button fieldset input optgroup option select textarea].freeze
+          MESSAGE = "[aria-disabled] may be used in place of native HTML [disabled] to allow tab-focus on an otherwise ignored element. Setting both attributes is contradictory."
+
+          def run(processed_source)
+            tags(processed_source).each do |tag|
+              next if tag.closing?
+              next unless ELEMENTS_WITH_NATIVE_DISABLED_ATTRIBUTE_SUPPORT.include?(tag.name)
+              next unless tag.attributes["disabled"] && tag.attributes["aria-disabled"]
+
+              generate_offense(self.class, processed_source, tag)
+            end
+
+            rule_disabled?(processed_source)
+          end
+        end
+      end
+    end
+  end
+end

test/linters/accessibility/avoid_both_disabled_and_aria_disabled_test.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class AvoidBothDisabledAndAriaDisabled < LinterTestCase
+  def linter_class
+    ERBLint::Linters::GitHub::Accessibility::AvoidBothDisabledAndAriaDisabled
+  end
+
+  ELEMENTS_WITH_NATIVE_DISABLED_ATTRIBUTE_SUPPORT = %w[button fieldset input optgroup option select textarea].freeze
+
+  def test_warns_if_both_disabled_and_aria_disabled_set_on_html_elements_with_disabled_support
+    @file = ELEMENTS_WITH_NATIVE_DISABLED_ATTRIBUTE_SUPPORT.map do |element|
+      "<#{element} aria-disabled='true' disabled> </#{element}>"
+    end.join
+    @linter.run(processed_source)
+
+    assert_equal @linter.offenses.count, 7
+  end
+
+  def test_does_not_warn_if_only_disabled_attribute_is_set
+    @file = ELEMENTS_WITH_NATIVE_DISABLED_ATTRIBUTE_SUPPORT.map do |element|
+      "<#{element} disabled> </#{element}>"
+    end.join
+    @linter.run(processed_source)
+
+    assert_empty @linter.offenses
+  end
+
+  def test_does_not_warn_if_only_aria_disabled_attribute_is_set
+    @file = ELEMENTS_WITH_NATIVE_DISABLED_ATTRIBUTE_SUPPORT.map do |element|
+      "<#{element} aria-disabled='true'> </#{element}>"
+    end.join
+    @linter.run(processed_source)
+
+    assert_empty @linter.offenses
+  end
+end