itsource

'버튼' 대화형 역할을 수정하는 방법은 초점을 맞출 수 있어야 합니다.

mycopycode 2023. 3. 23. 22:43
반응형

'버튼' 대화형 역할을 수정하는 방법은 초점을 맞출 수 있어야 합니다.

사용자가 선택할 수 있는 드롭다운 옵션 목록이 있습니다.

드롭 다운의 optinos 는, 다음의 태그로 작성됩니다.< a href >

<a onClick={() => handleSelect(filter)} role="button">
   {filter.name}
</a>

문제는 추가되어야 한다는 것입니다.tabIndex="0" or -1Eslint로부터의 에러를 수정합니다.

하지만 내가 추가할 때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 속성을 사용하여 버튼의 포커스를 설정해야 합니다.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#Accessibility_concerns

HTML 속성tabindexAtribute에 대응합니다.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

반응형