Popover api

메뉴, 다이얼로그, 모달, 등에서 자주 사용되지만 브라우저에서 이런 컴포넌트를 구축하는것은 생각보다 복잡함
 -> 포커스
 -> 열기 및 닫기 상태
 -> 컴포넌트에 접근 가능한 hook 

모든 복잡성을 직접 관리하지 않고 브라우저에서 popover 속성과 관련된 기능으로 처리가능합니다

 

 

popover 속성

---

최상위 레이어로 끌어올려줌

• popover는 페이지의 다른 레이어 위에 별도의 레이어로 표시되므로 z-index를 찾느라 애쓸 필요가 없습니다.

외부 클릭 닫힘 기능이 포함

• popover 영역 외부를 클릭하면 popover가 닫히고 다시 focus됨

기본적인 포커스 관리를 지원

• popover창을 열면 다음 탭이 popover창 안에서 멈춤(?)

접근 가능한 키보드 바인딩을 지원

• esc키를 누르면 popover 창이 닫히고 focus 복구

접근 가능한 컴포넌트 바인딩을 지원

• popover 요소를 trigger에 의미적으로 연결

 

popover를 만들기 위해 필요한 3가지

1. popover가 포함된 요소의 popover 속성
2. popover를 포함하는 요소의 id
3. popver의 id값과 동일한 값을 가진 popver를 여는 요소에 있는 popovertarget 필요

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="”true”">X</span>
  </button>
  <p>I am a popover with more information.</p>
  <p></p>
</div>

 

 

추가 속성

---

popovertargetaction

• "hide": 해당 popover 숨김
• "show": 해당 popover 표시

popover

• "auto"(default)
  • 생략되어있고 열릴때 상위 popover를 제외한 다른 자동 popover를 강제로 닫음
  • 외부클릭시 닫힘
• "manual"
  • 다른 유형의  popover를 강제로 닫지않음
  • 외부클릭으로 닫히지 않음
  • 보통 toast같이 타이머 또는 명시적으로 닫히는 경우 사용

 

 

popover 스타일

---

::backdrop

#my-popover::backdrop {
  background: rgba(190, 190, 190, 0.5);
}

해당 선택자는 auto popover를 사용할때 popover의 바로 아래 레이어에 위치하여 배경색을 투명하게 만드는데 활용

 

 

 

popover와 dialog의 차이점

---

모달(modal) 방식: 팝오버가 표시되는 동안 페이지의 나머지 부분이 상호작용이 불가능하며, 팝오버가 특정 방식으로 처리되기 전까지 페이지가 비활성화됩니다.

비모달(non-modal) 방식: 팝오버가 표시되는 동안 페이지의 나머지 부분은 상호작용할 수 있습니다.

popover(비모달 방식)	dialog(모달 방식)
외부 클릭 닫기 지원	명시 해야만 닫기가능
하위 레이어 활성화 상태(상호작용 가능)	하위 레이어 비활성화
최상위 레이어에 배치	최상위 레이어에 배치되지 않음

<dialog> 에 popover속성을 추가하여 popover제어와 최상위 배치및 element semantic하게 사용 가능

 

 

지원 브라우저 현황

---

아직 실험중인 기술로 추후 방식이 변화할수 있음

firefox - 사용자가 명시적으로 활성화 시켜야 사용가능

opera - 지원안함

 

 

 

현재의 Modal보다는 Toast, Navigation, topbar 컴포넌트에 해당하는 기술로 보임

현재 Modal을 대신 하는것은 컨셉상은 dialog가 맞음

 

 

 

 

 

참고자료: https://ykss.netlify.app/translation/introducing_the_popover_api/

(번역) 팝오버(popover) API를 소개합니다

https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

Popover API - Web APIs | MDN

https://developer.chrome.com/blog/introducing-popover-api/

Introducing the popover API - Chrome Developers