반응형
'버튼' 대화형 역할을 수정하는 방법은 초점을 맞출 수 있어야 합니다.
사용자가 선택할 수 있는 드롭다운 옵션 목록이 있습니다.
드롭 다운의 optinos 는, 다음의 태그로 작성됩니다.< a href >
<a onClick={() => handleSelect(filter)} role="button">
{filter.name}
</a>
문제는 추가되어야 한다는 것입니다.tabIndex="0" or -1
Eslint로부터의 에러를 수정합니다.
하지만 내가 추가할 때tabIndex=0
, 내 버튼이 더 이상 작동하지 않습니다.
이 오류를 해결할 다른 방법이 있나요?
드롭다운 컴포넌트는 다음과 같습니다.
<ul name="filters" className="dropdown">
{filterOptions.map((filter) => (
<li
key={filter.id}
defaultChecked={filter.name}
name={filter.name}
className={`option option-${filter.selected ? 'selected' : 'unselected'}`}
>
<span className={`option-${filter.selected ? 'checked-box' : 'unchecked-box'} `} />
<a onClick={() => handleSelect(filter)} role="button">
{filter.name}
</a>
</li>
))}
</ul>
버튼은 인터랙티브 컨트롤이므로 초점을 맞출 수 있습니다.버튼 역할이 포커스를 맞출 수 없는 요소에 추가된 경우(예:
<span>
,<div>
또는<p>
그런 다음 tabindex 속성을 사용하여 버튼의 포커스를 설정해야 합니다.
HTML 속성
tabindex
Atribute에 대응합니다.tabIndex
반응합니다.
https://reactjs.org/docs/dom-elements.html
그래서 저는 @S.. 답이 맞다고 생각합니다.
<a
onClick={() => handleSelect(filter)}
role="button"
tabIndex={0}
>
{filter.name}
</a>
탭 인덱스를 추가합니다.
<a onClick={() => handleSelect(filter)} role="button" tabIndex={i}>
{filter.name}
</a>
지도에 반복기를 추가한 후 다음을 수행합니다.(filter, i)
언급URL : https://stackoverflow.com/questions/56441825/how-to-fix-button-interactive-role-must-be-focusable
반응형
'itsource' 카테고리의 다른 글
레디스엔 언제?언제 MongoDB에 접속합니까? (0) | 2023.03.23 |
---|---|
AuthError - 오류: 증폭이 올바르게 구성되지 않았습니다. (0) | 2023.03.23 |
(Angularj) 웹 어플리케이션 통합 테스트 방법 (0) | 2023.03.23 |
리듀서로 액션을 디스패치할 수 있습니까? (0) | 2023.03.18 |
WooCommerce 2.2+에 번역 파일을 수동으로 설치하는 방법 (0) | 2023.03.18 |