keyboard로 모달 팝업 내 포커스 loop

팝업이 열리면

•  팝업 내 첫 번째 요소에 포커스 이동
• 팝업 내에서만 키보드 사용
• esc 팝업 닫기

 

처음 작업할땐 팝업 오픈 시 팝업 전체에 포커스가 가도록 작업했었다. 이후 여러 블로그를 참고하다 보니

전체가 아닌 팝업 내 첫 번째 요소에 포커스가 가는 것이 팝업에 진입했다는 것을 좀 더 시각적으로 보여줄 수 있고 콘텐츠를 수월하게 조작할 수 있을 것 같아 코드를 수정했다.

 

See the Pen WA - 모달 레이어 포커스 loop by devjiin (@devjiin) on CodePen.

 

 

 

 

nodelist를 array로 변환하는 이유?

focusableElements = Array.prototype.slice.call(focusableElements);

위 코드를 작성하지 않아도 포커스 기능이 잘 작동되는데 왜 array로 변환해야 되는지 궁금해서 찾아봤다.

 

nodelist와 array 모두 index와 length를 가져올 수 있다. 하지만 차이점이 있다.

• nodelist는 html문서에서 추출된 dom 노드의 모음이다. 
• querySelector() 메서드는 정적 목록을 반환하기 때문에 dom을 변경해도 업데이트되지 않는다. 그러나 Node.childNodes와 같은 속성은 DOM을 수정하는 즉시 업데이트되는 실시간 목록이다. 즉 NodeList는 어레이와 달리 DOM에서 요소를 추가하거나 제거하면 변경 사항이 자동으로 적용된다. dom을 수정함으로써 NodeList가 자동 적용될 수 있다.
• nodeList에서는 push(), pop(), slice(), join()과 같은 공통 어레이 메서드를 직접 사용할 수 없다. es6 이후에는 Array.from() 방법을 사용하여 NodeList를 일반 어레이로 변환할 수 있다.
• SelectorAll()은 JavaScript API가 아닌 브라우저 API이다.

 

참고 사이트

https://attacomsian.com/blog/javascript-nodelist-vs-array

https://selosele.github.io/2020/01/29/layer-popup/