Skip to content

Commit

Permalink
Add rule S6825 (jsx-a11y/no-aria-hidden-on-focusable): Focusable el…
Browse files Browse the repository at this point in the history
…ements should not have `aria-hidden` attribute (#4292)
  • Loading branch information
alex-sonar committed Oct 18, 2023
1 parent 0ef5749 commit c03babc
Show file tree
Hide file tree
Showing 6 changed files with 105 additions and 1 deletion.
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"vuetify:packages/vuetify/src/components/VTextarea/VTextarea.tsx": [
277
]
}
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,7 @@ public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
NoAccessorFieldMismatchCheck.class,
NoAngularBypassSanitizationCheck.class,
NoAnyCheck.class,
NoAriaHiddenOnFocusableCheck.class,
NoArrayDeleteCheck.class,
NoArrayIndexKeyCheck.class,
NoBaseToStringCheck.class,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/**
* SonarQube JavaScript Plugin
* Copyright (C) 2011-2023 SonarSource SA
* mailto:info AT sonarsource DOT com
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 3 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
package org.sonar.javascript.checks;

import org.sonar.check.Rule;
import org.sonar.plugins.javascript.api.EslintBasedCheck;
import org.sonar.plugins.javascript.api.JavaScriptRule;
import org.sonar.plugins.javascript.api.TypeScriptRule;

@TypeScriptRule
@JavaScriptRule
@Rule(key = "S6825")
public class NoAriaHiddenOnFocusableCheck implements EslintBasedCheck {

@Override
public String eslintKey() {
return "no-aria-hidden-on-focusable";
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<h2>Why is this an issue?</h2>
<p>ARIA (Accessible Rich Internet Applications) is a set of attributes that define ways to make web content and web applications more accessible to
people with disabilities. The 'aria-hidden' attribute is used to indicate that an element and all of its descendants are not visible or perceivable to
any user as implemented by assistive technologies.</p>
<p>However, when 'aria-hidden' is used on a focusable element, it can create a confusing and inaccessible experience for screen reader users. This is
because the element will still be included in the tab order, so a screen reader user can navigate to it, but it will not be announced by the screen
reader due to the 'aria-hidden' attribute.</p>
<p>This rule ensures that focusable elements are not hidden from screen readers using the 'aria-hidden' attribute.</p>
<h2>How to fix it</h2>
<p>Check if the element is focusable. Focusable elements should not have 'aria-hidden' attribute.</p>
<h3>Code examples</h3>
<h4>Noncompliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
&lt;button aria-hidden="true"&gt;Click me&lt;/button&gt;
</pre>
<p>Remove 'aria-hidden' attribute.</p>
<h4>Compliant solution</h4>
<pre data-diff-id="1" data-diff-type="compliant">
&lt;button&gt;Click me&lt;/button&gt;
</pre>
<h2>Resources</h2>
<h3>Documentation</h3>
<ul>
<li> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">MDN - Using ARIA: Roles, states, and properties</a>
</li>
<li> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden">MDN - aria-hidden attribute (Reference)</a>
</li>
</ul>
<h3>Standards</h3>
<ul>
<li> <a href="https://www.w3.org/TR/wai-aria-1.2/">W3C - Accessible Rich Internet Applications (WAI-ARIA) 1.2</a> </li>
</ul>

Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"title": "Focusable elements should not have \"aria-hidden\" attribute",
"type": "CODE_SMELL",
"status": "ready",
"remediation": {
"func": "Constant\/Issue",
"constantCost": "5min"
},
"tags": [
"a11y",
"react"
],
"defaultSeverity": "Major",
"ruleSpecification": "RSPEC-6825",
"sqKey": "S6825",
"scope": "All",
"quickfix": "targeted",
"code": {
"impacts": {
"RELIABILITY": "MEDIUM"
},
"attribute": "CONVENTIONAL"
},
"compatibleLanguages": [
"JAVASCRIPT",
"TYPESCRIPT"
]
}
Original file line number Diff line number Diff line change
Expand Up @@ -298,6 +298,7 @@
"S6821",
"S6822",
"S6823",
"S6824"
"S6824",
"S6825"
]
}

0 comments on commit c03babc

Please sign in to comment.