- 필수 기능
- 시작하기
- Glossary
- 표준 속성
- Guides
- Agent
- 통합
- 개방형텔레메트리
- 개발자
- API
- Datadog Mobile App
- CoScreen
- Cloudcraft
- 앱 내
- 서비스 관리
- 인프라스트럭처
- 애플리케이션 성능
- APM
- Continuous Profiler
- 스팬 시각화
- 데이터 스트림 모니터링
- 데이터 작업 모니터링
- 디지털 경험
- 소프트웨어 제공
- 보안
- AI Observability
- 로그 관리
- 관리
ID: tsx-react/no-tabindex-positive
Language: TypeScript
Severity: Notice
Category: Best Practices
This rule is to help ensure a logical and efficient tab order in web applications. The tabIndex
attribute specifies the tab order of an element, with a positive value indicating that the element should be included in the tab order. However, using positive values can disrupt the natural tab order, leading to a confusing and potentially inaccessible user interface.
This rule is particularly important for ensuring accessibility and usability. Users who rely on keyboard navigation, such as those with motor disabilities or vision impairments, may struggle to navigate a page if the tab order is not logical and predictable.
To adhere to this rule, you should avoid using positive values for the tabIndex
attribute. Instead, use a tabIndex
of 0
to include an element in the tab order based on its position in the document flow, or a tabIndex
of -1
to exclude an element from the tab order.
function Menu() {
return (
<div>
<span tabIndex="5">item1</span>
<span tabIndex={3}>item2</span>
</div>
);
}
function Menu() {
return (
<div>
<span tabIndex="-1">item1</span>
<span tabIndex={0}>item2</span>
</div>
);
}
|
|
For more information, please read the Code Analysis documentation
Identify code vulnerabilities directly in yourVS Code editor
Identify code vulnerabilities directly inJetBrains products