Button

[hsskey]

📋 컴포넌트 정보

• 컴포넌트 이름: Button
• 컴포넌트 설명: 버튼은 사용자가 폼 제출, 대화상자 열기, 작업 취소, 삭제 작업 수행 등의 작업이나 이벤트를 트리거할 수 있게 해주는 위젯
• 사용 사례: 폼 제출, 대화상자 열기, 작업 취소, 삭제 작업 등 다양한 사용자 작업을 트리거할 때 사용. 또한 토글 버튼이나 메뉴 버튼 등 다양한 형태로도 활용 가능

📚 참조 및 레퍼런스

• ARIA Authoring Practices: W3C ARIA Button Pattern
  • 버튼 패턴의 설명과 예시, 키보드 인터랙션, 접근성 고려사항 등을 참고할 수 있음
• 기타 레퍼런스:
  • Web.dev - Building a button component
    • 버튼 컴포넌트 제작 과정을 자세히 설명한 글
  • MUI, Ant Design 등의 UI 라이브러리에서 버튼 컴포넌트 구현 방식을 참고할 수 있음

📝 접근성 및 ARIA 적용 여부

• ARIA Pattern 적용: W3C ARIA Button Pattern
  • 사용된 ARIA 속성:
    • role="button": 요소가 버튼임을 나타냄
    • aria-pressed: 토글 버튼의 상태(pressed/not pressed)를 나타냄
    • aria-expanded: 메뉴 버튼 등에서 연결된 요소가 펼쳐졌는지 여부를 나타냄
    • aria-describedby: 버튼에 대한 설명이 있는 요소의 ID를 참조
    • aria-labelledby: 버튼의 레이블 역할을 하는 요소의 ID를 참조
• 접근성 관련 고려사항:
  • 버튼 텍스트는 버튼의 목적을 명확하게 전달해야 함
  • 비활성화된 버튼에는 aria-disabled="true"를 사용
  • 토글 버튼의 상태 변화를 aria-pressed로 전달
  • 포커스 가능한 버튼에는 키보드로도 접근 및 활성화할 수 있어야 함
• 접근성 기능 요약:
  • 버튼의 이름은 텍스트 콘텐츠로 제공되거나 aria-label, aria-labelledby로 제공
  • 버튼 상태 정보는 aria-pressed, aria-expanded 등의 속성으로 전달
  • 비활성화된 버튼은 aria-disabled="true"를 사용하여 나타냄

🏗️ 마크업 구조 분석

• HTML 시맨틱 태그 사용: <button> 요소를 사용하는 것이 가장 적합하지만, <div>, <a>, <input> 등의 요소에 role="button"을 사용하여 버튼으로 만들 수도 있음
• 마크업 구조 비교:
  • W3C의 예시:

    <div tabindex="0" role="button">Print Page</div>
    <a tabindex="0" role="button" aria-pressed="false">Mute</a>

  • Web.dev의 예시:

    <button>Default</button>
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
    <button disabled>Disabled</button>

  • Ant Design의 예시:

    <button type="button" class="ant-btn ant-btn-primary">Primary Button</button>
    <button type="button" class="ant-btn ant-btn-dashed">Dashed Button</button>
    <button type="button" class="ant-btn ant-btn-link">Link Button</button>

  • MUI의 예시:

    <button class="MuiButton-root">Button</button>
    <button class="MuiButton-root Mui-disabled">Disabled</button>

• 구조적 선택 이유:
  • 네이티브 <button> 요소가 가장 시맨틱하고 접근성이 우수
  • <div>, <a> 등을 버튼으로 사용할 때는 role="button"과 tabindex="0"을 추가해야 함
  • Ant Design, MUI 등은 <button> 요소에 클래스를 추가하여 스타일을 적용하는 방식을 사용

💡 UI 라이브러리 비교 분석

• Ant Design:
  • <button> 요소에 ant-btn 클래스를 추가하여 스타일을 적용
  • 버튼 타입(primary, dashed, link 등)에 따라 다른 클래스를 추가
• MUI:
  • <button> 요소에 MuiButton-root 클래스를 추가하여 기본 스타일을 적용
  • 비활성화된 버튼에는 Mui-disabled 클래스를 추가
  • 버튼 그룹 컴포넌트(ButtonGroup)를 제공

⚙️ 구현 및 설계 고려사항

• 주요 설계 고려사항:
  • 버튼 텍스트는 명확하고 간결해야 함
  • 버튼의 상태(활성화/비활성화, 토글 등)를 시각적으로 명확히 전달해야 함
  • 키보드 포커스 및 활성화를 지원해야 함
  • 버튼의 목적에 따라 적절한 type 속성(button, submit, reset 등)을 사용해야 함
• 코드 예시:

  <button type="button">일반 버튼</button>
  <button type="submit">제출 버튼</button>
  <button type="reset">리셋 버튼</button>
  <button disabled>비활성화 버튼</button>
  
  <a role="button" tabindex="0" aria-pressed="false">토글 버튼</a>

🔍 테스트 및 검토

• 접근성 테스트:
  • 키보드로 버튼에 접근하고 활성화할 수 있는지 확인
  • 스크린 리더로 버튼의 이름, 역할, 상태 등이 제대로 읽히는지 확인
• 브라우저 호환성 테스트: 다양한 브라우저에서 버튼의 스타일과 기능이 동일하게 동작하는지 확인
• 사용자 피드백: 실제 사용자들이 버튼을 사용하면서 겪는 문제점이나 개선점을 수렴하고 반영

📌 추가 참고 사항

• 관련 문서:
  • ARIA Practices 1.2 - Button
  • MDN - <button> 요소
  • Web.dev Button Article
• 의견 및 제안:
  • 버튼의 스타일은 사이트의 전체적인 디자인 시스템과 일관되게 설계하는 것이 좋음
  • 아이콘만 있는 버튼의 경우 aria-label 속성을 사용하여 버튼의 목적을 설명해야 함

🎯 역할, 속성, 상태 및 태그 속성

• Role, Attribute, State
  • Role: button
    • <button> 요소에는 기본적으로 button 역할이 적용됨
    • <div>, <a> 등의 요소를 버튼으로 사용할 때는 role="button"을 명시적으로 추가해야 함
  • Attribute:
    • aria-pressed: 토글 버튼의 상태(pressed/not pressed)를 나타냄
    • aria-expanded: 메뉴 버튼 등에서 연결된 요소가 펼쳐졌는지 여부를 나타냄
    • aria-describedby: 버튼에 대한 설명이 있는 요소의 ID를 참조
    • aria-labelledby: 버튼의 레이블 역할을 하는 요소의 ID를 참조
    • tabindex="0": 포커스 가능한 버튼을 만들 때 사용
  • State:
    • disabled: 버튼을 비활성화할 때 사용
• JavaScript 및 CSS 사용 여부
  • JavaScript 사용 여부: 버튼의 상태 변경, 클릭 이벤트 처리 등을 위해 JavaScript를 사용할 수 있음
  • CSS 적용 사항: 버튼의 스타일(크기, 색상, 배경, 테두리 등)을 CSS로 적용. 상태(hover, focus, active, disabled)에 따른 스타일 변화를 고려해야 함