Enhance `CheckableAvatar` component to behave as an actual Checkbox

[sungik-choi]

Description

CheckableAvatar 컴포넌트가 실제 체크박스처럼 동작하도록 개선합니다.

Reasons for suggestion

현재 CheckableAvatar 는 HTMLDivElement 로 인터랙션이 불가능한 엘리먼트로 구현되어있습니다. 실제로는 체크박스처럼 동작하기 때문에 내부 구현도 그에 알맞게 개선되면 좋겠습니다.

Proposed solution

• 실제 Checkbox의 의미를 갖도록 변경합니다.
  • 키보드 포커스가 가능해야 합니다. 포커스 디자인이 마찬가지로 추가되면 좋겠습니다.
  • Space 키를 통해 체크가 가능해야합니다.
  • HTMLFormElement 와 실제 Form 요소로서 함께 사용할 수 있어야합니다.
• Avatar 의 name 등, 대표할 수 있는 텍스트가 VisuallyHidden 처리된 라벨로 컴포넌트 내부에 포함되어 스크린 리더 사용자들에게 더 풍부한 정보를 제공할 수 있으면 좋겠습니다.
• 인터페이스가 Checkbox 컴포넌트와 통일되면 좋겠습니다.
  • isChecked -> checked
  • isCheckable 도 비슷하게 checkable 로 변경되는 편이 예측 가능성을 높일 수 있어 좋을 거 같습니다.
  • 체크가 가능한 컴포넌트에 대한 공용 인터페이스를 선언하고, 재사용하는 방식이 장기적으로 가장 좋아보입니다.

References

• https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/