Skip to content

Commit 14a9653

Browse files
committed
* add back delete doc and test page
1 parent c70e44b commit 14a9653

File tree

2 files changed

+69
-0
lines changed

2 files changed

+69
-0
lines changed
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Avoid both disabled and aria disabled
2+
3+
## Rule Details
4+
5+
[From w3 ARIA in HTML ](https://www.w3.org/TR/html-aria/#docconformance-attr):
6+
> 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,
7+
8+
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.
9+
10+
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`.
11+
12+
### 👎 Examples of **incorrect** code for this rule:
13+
14+
```erb
15+
<button aria-disabled="true" disabled="true">
16+
<input aria-disabled="true" disabled="true">
17+
```
18+
19+
### 👍 Examples of **correct** code for this rule:
20+
21+
```erb
22+
<button disabled="true">
23+
````
24+
25+
```erb
26+
<input disabled="true">
27+
```
28+
29+
```erb
30+
<button aria-disabled="true" class="js-disabled-button disabled-button">Update</button>
31+
```
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# frozen_string_literal: true
2+
3+
require "test_helper"
4+
5+
class AvoidBothDisabledAndAriaDisabled < LinterTestCase
6+
def linter_class
7+
ERBLint::Linters::GitHub::Accessibility::AvoidBothDisabledAndAriaDisabled
8+
end
9+
10+
ELEMENTS_WITH_NATIVE_DISABLED_ATTRIBUTE_SUPPORT = %w[button fieldset input optgroup option select textarea].freeze
11+
12+
def test_warns_if_both_disabled_and_aria_disabled_set_on_html_elements_with_disabled_support
13+
@file = ELEMENTS_WITH_NATIVE_DISABLED_ATTRIBUTE_SUPPORT.map do |element|
14+
"<#{element} aria-disabled='true' disabled> </#{element}>"
15+
end.join
16+
@linter.run(processed_source)
17+
18+
assert_equal @linter.offenses.count, 7
19+
end
20+
21+
def test_does_not_warn_if_only_disabled_attribute_is_set
22+
@file = ELEMENTS_WITH_NATIVE_DISABLED_ATTRIBUTE_SUPPORT.map do |element|
23+
"<#{element} disabled> </#{element}>"
24+
end.join
25+
@linter.run(processed_source)
26+
27+
assert_empty @linter.offenses
28+
end
29+
30+
def test_does_not_warn_if_only_aria_disabled_attribute_is_set
31+
@file = ELEMENTS_WITH_NATIVE_DISABLED_ATTRIBUTE_SUPPORT.map do |element|
32+
"<#{element} aria-disabled='true'> </#{element}>"
33+
end.join
34+
@linter.run(processed_source)
35+
36+
assert_empty @linter.offenses
37+
end
38+
end

0 commit comments

Comments
 (0)