[React/버튼] button 태그로 만든 버튼이 아닌, div 태그로 a 태그(anchor)를 감싼 형태의 button에 대한 이벤트 바인딩 삽질기

/**
 * onKeyDown 이벤트핸들러에서 엔터키로 함수 실행하기
 */
export const onKeyDownCall = (e: React.KeyboardEvent, func: (ev: React.SyntheticEvent) => void) => {
  // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event
  if (e.key === 'Enter') {
    e.preventDefault();
    e.stopPropagation();
    func(e);
  }
};

// 최종적으로 handleSubmitTest 라는 함수를 실행한다는 가정

// 텍스트 입력 input
<input type='text'
  onKeyDown={(e) => onKeyDownCall(e, handleSubmitTest)} // (3) input 에서 엔터키로 실행
/>
<div onClick={handleSubmitTest}>{/* (1) div > a 형태의 버튼을 클릭하여 실행 */}
  <a href='' onKeyDown={(e) => onKeyDownCall(e, handleSubmitTest)}>{/* (2) 버튼에 커서가 있는 상태에서(e.g. 탭 이동) 엔터키로 실행 */}
    Submit
  </a>
</div>

  "rules": {
     ...
    "jsx-a11y/anchor-is-valid": 0,
    "jsx-a11y/no-static-element-interactions": 0,
    "jsx-a11y/click-events-have-key-events": 0
  }