Focus fixup rule/document.activeElement = body

단축키 적용 불가

video 엘리먼트에 play() 메소드를 실행하는데 단축키가 적용되지 않는 문제. 포커스를 빼앗긴 것이 원인이었다.

document.activeElement를 추적하니 계속 body를 잡는다. 근거를 알 수 없는 황당한 현상.

The section Focus fixup rule one was introduced in February 2014 and made a little clearer in November 2016. It describes that focus is returned to when the active element loses its ability to receive focus.

https://allyjs.io/tutorials/mutating-active-element.html

Focus fixup rule

이라고 하는 것 같다.

Focus fixup rule: When the designated focused area of the document is removed from that Document in some way (e.g. it stops being a focusable area, it is removed from the DOM, it becomes expressly inert, etc.), designate the Document's viewport to be the new focused area of the document.

문서의 포커스 영역이 해당 문서에서 사라지면 (이를테면 포커스 할 수 없는 영역이 되거나 DOM에서 제거되거나 반응이 명시적으로 불가능해지는 등) 문서의 뷰포트를 해당 문서에서 새롭게 포커스된 영역으로 지정한다.

For example, this might happen because an element is removed from its Document, or has a hidden attribute added. It might also happen to an input element when the element gets disabled.

예를 들어 문서에서 요소가 제거되거나 hidden 속성이 추가되는 경우가 해당된다. input 요소가 disabled 되는 경우도 마찬가지.

In a Document whose focused area is a button element, removing, disabling, or hiding that button would cause the page's new focused area to be the viewport of the Document. This would, in turn, be reflected through the activeElement API as the body element.

포커스된 영역이 버튼 요소인 문서에서 그 버튼이 삭제되거나 disable 되거나 숨겨지는 경우, 페이지의 새로운 포커스 영역은 문서의 뷰포트가 된다. activeElement API에 body 요소가 잡히는 것을 통해 이를 확인할 수 있다.

https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule

그렇단다. 포커스를 갖고 있던 엘리먼트가 사라지면 자동으로 activeElement는 body를 잡는다고 한다. 링크된 페이지에 정리해놓은 표를 보니 diabled, hidden으로 변경되는 경우에는 브라우저마다 포커스가 옮겨가는 요소가 다른 듯 하다.

아무튼 그럼 play() 메소드를 실행하는 곳이 아니라 video element 쪽에서 onplay 이벤트 리스너를 달아서 focus를 달아야 할지도.