<button>태그가 iOS에서는 onFocus되지 않는 문제

{:toc}

1. <button> 태그의 Click과 Focus 동작

일반적인 동작

• <button> 요소를 클릭할 때, 브라우저와 운영체제에 따라 포커스가 해당 버튼으로 이동할지 여부가 결정됩니다.

브라우저 별 동작

(출처: https://en.spec-zone.ru/html/element/button)

Spec-Zone.ru

 

• 데스크톱 브라우저
  • Windows: 클릭 시 버튼에 포커스가 이동합니다.
  • Mac(Firefox, Safari): 클릭해도 버튼에 포커스가 이동하지 않습니다.
    
    

• 모바일 브라우저
  • Android: 클릭 시 버튼에 포커스가 이동합니다.
  • iOS: 클릭해도 버튼에 포커스가 이동하지 않습니다.

 

2. Safari와 WebKit의 포커스 동작 논쟁 (WebKit 버그 #22261)

(출처: https://bugs.webkit.org/show_bug.cgi?id=22261#c68)

22261 – Clicking on a non-text input element does not give it focus

 

MacOS 설계 원칙

• MacOS에서는 텍스트 필드에 포커스가 있는 상태에서 버튼을 클릭하더라도, 텍스트 필드에 포커스가 유지됩니다. 이는 MacOS의 다른 애플리케이션 동작과 일관성을 맞추기 위한 설계입니다.
  
  

문제 제기

• Safari와 Chrome(WebKit 기반)의 동작이 Windows와 Linux의 다른 브라우저들과 다릅니다.
• 웹 개발자들이 이런 차이 때문에 브라우저 별로 다른 동작을 처리하기 위한 별도의 코드를 작성해야 하며, 이는 유지 보수를 어렵게 만듭니다.
  
  

토론 내용 요약

• MacOS 사용자 입장
  MacOS 생태계와의 일관성을 유지하기 위해 현재 동작 방식을 지켜야 한다고 주장.
  
  
• 웹 표준과 접근성 관점
  • HTML5 웹 표준에서는 포커스가 가능한 요소(예: tabindex가 설정된 경우)에 클릭 시 포커스가 이동해야 한다고 권장합니다.
  • 이를 따르지 않으면 접근성이 저하될 수 있다는 우려가 나옵니다.
    
    
• 해결 방안 제시
  • Safari에서도 표준을 준수하도록 동작을 변경하거나,
    tabindex가 설정된 경우에 한해 동작을 조정하도록 제안
    
    
• 결론: MacOS 설계 철학과 웹 표준 간의 갈등이 핵심
  • MacOS의 고유 동작을 유지해야 한다는 주장과,
  • 개발자 및 웹 접근성을 위해 브라우저 간 일관성을 보장해야 한다는 요구의 대립
    
    

---

3. 결론 및 접근성 영향

Safari의 <button> 클릭 동작은 MacOS 사용자들에게는 의도한 설계로 적합할 수 있습니다.
하지만 브라우저 간 일관성이 부족해 접근성과 개발 편의성이 떨어진다는 비판이 커지고 있습니다.
현재 WebKit 팀은 MacOS의 사용자 경험과 웹 표준 간의 균형을 찾기 위해 논의하고 있습니다.