-
Notifications
You must be signed in to change notification settings - Fork 184
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create rule S6852 (
jsx-a11y/interactive-supports-focus
): Elements w…
…ith interactive role should support focus
- Loading branch information
Showing
6 changed files
with
107 additions
and
1 deletion.
There are no files selected for viewing
5 changes: 5 additions & 0 deletions
5
its/ruling/src/test/expected/jsts/desktop/typescript-S6852.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{ | ||
"desktop:app/src/ui/dialog/header.tsx": [ | ||
67 | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
.../src/main/java/org/sonar/javascript/checks/InteractiveElementsShouldBeFocusableCheck.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 = "S6852") | ||
public class InteractiveElementsShouldBeFocusableCheck implements EslintBasedCheck { | ||
|
||
@Override | ||
public String eslintKey() { | ||
return "interactive-supports-focus"; | ||
} | ||
} |
34 changes: 34 additions & 0 deletions
34
...avascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6852.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
<p>Interactive elements being focusable is vital for website accessibility. It enables users, including those using assistive technologies, to | ||
interact effectively with the website. Without this, some users may be unable to access certain features, leading to a poor user experience and | ||
potential non-compliance with accessibility standards.</p> | ||
<h2>Why is this an issue?</h2> | ||
<pre> | ||
Lack of focusability can hinder navigation and interaction with the website, resulting in an exclusionary user experience and possible violation of accessibility guidelines. | ||
</pre> | ||
<h2>How to fix it</h2> | ||
<p>To fix this, ensure that all interactive elements on your website can receive focus. This can be achieved by using standard HTML interactive | ||
elements, or by assigning a tabindex of "0" to custom interactive components.</p> | ||
<h3>Code examples</h3> | ||
<h4>Noncompliant code example</h4> | ||
<pre data-diff-id="1" data-diff-type="noncompliant"> | ||
<!-- Element with mouse/keyboard handler has no tabindex --> | ||
<span onclick="submitForm();" role="button">Submit</span> | ||
|
||
<!-- Anchor element without href is not focusable --> | ||
<a onclick="showNextPage();" role="button">Next page</a> | ||
</pre> | ||
<h4>Compliant solution</h4> | ||
<pre data-diff-id="1" data-diff-type="compliant"> | ||
<span onClick="doSomething();" tabIndex="0" role="button">Element with mouse handler has tabIndex</span> | ||
|
||
<a href="javascript:void(0);" onClick="doSomething();">Focusable anchor with mouse handler</a> | ||
</pre> | ||
<h2>Resources</h2> | ||
<h3>Documentation</h3> | ||
<ul> | ||
<li> <a href="https://www.w3.org/TR/WCAG20-TECHS/H4.html">Creating a logical tab order through links, form controls, and objects</a> </li> | ||
<li> <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav">Fundamental Keyboard Navigation Conventions</a> </li> | ||
<li> MDN - <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#accessibility_concerns">ARIA: button role - | ||
Accessibility concerns</a> </li> | ||
</ul> | ||
|
29 changes: 29 additions & 0 deletions
29
...avascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6852.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
{ | ||
"title": "Elements with interactive role should support focus", | ||
"type": "CODE_SMELL", | ||
"status": "ready", | ||
"remediation": { | ||
"func": "Constant\/Issue", | ||
"constantCost": "5min" | ||
}, | ||
"tags": [ | ||
"accessibility", | ||
"react" | ||
], | ||
"defaultSeverity": "Major", | ||
"ruleSpecification": "RSPEC-6852", | ||
"sqKey": "S6852", | ||
"scope": "All", | ||
"quickfix": "infeasible", | ||
"code": { | ||
"impacts": { | ||
"MAINTAINABILITY": "LOW", | ||
"RELIABILITY": "MEDIUM" | ||
}, | ||
"attribute": "CONVENTIONAL" | ||
}, | ||
"compatibleLanguages": [ | ||
"JAVASCRIPT", | ||
"TYPESCRIPT" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -319,6 +319,7 @@ | |
"S6848", | ||
"S6849", | ||
"S6850", | ||
"S6851" | ||
"S6851", | ||
"S6852" | ||
] | ||
} |