Dialog と Popover #10

HTML

よくあるメニューとして、以下のような HTML をベースに考える。

開くためのボタンが Invoker となり、 Popover としてメニューのアイテムが開く実装が考えられるだろう。

<button popovertarget=menu>Actions</button>
<ul id=menu popover>
  <li><button>Edit</button></li>
  <li><button>Hide</button></li>
  <li><button>Delete</button></li>
</ul>

ここでも Popover はセマンティクスに影響を与えないため、単に <ul> が開いただけになる。この場合、外側は role=menu とし、各アクションが role=menuitem とすることで、開いているものがメニューであると言うことを宣言できるだろう。

<button popovertarget=menu>Actions</button>
<ul id=menu role=menu popover>
  <li role=menuitem><button>Edit</button></li>
  <li role=menuitem><button>Hide</button></li>
  <li role=menuitem><button>Delete</button></li>
</ul>

最初のコントローラには明示的に autofocus を付与し、各操作実行後には Popover を閉じるために popovertargetaction=close も担わせることができる。

<button popovertarget=menu>Actions</button>
<ul id=menu role=menu popover>
  <li><button role=menuitempopovertarget=menu popovertargetaction=close autofocus>Edit</button></li>
  <li><button role=menuitempopovertarget=menu popovertargetaction=close>Hide</button></li>
  <li><button role=menuitempopovertarget=menu popovertargetaction=close>Delete</button></li>
</ul>

APG などにも書かれているように、従来このような実装を行う際は、 <button popovertarget> をクリックしたことで <ul role=menu> が開いたと言う事実を UA に伝えるために、 aria-haspopup=menu を付与し、メニューが開いている間は aria-expanded=true にするといった実装が行われていた。

しかし、 Popover が Invoker Relationship を持っている場合、 <button popovertarget> が <ul role=menu> を開いたことを UA は認識しているため、このような実装は Popover API を用いる限りは不要となる。これも Popover がネイティブの API になったことのメリットの 1 つだ。

• Popover invoker example shouldn't have aria-haspopup · Issue #9153 · whatwg/html
  • https://github.com/whatwg/html/issues/9153

これが基本の構造となる。

CSS

今回はとりあえずパッと表示されて、終わったら消えればよいということで、アニメーションは割愛する。

問題は表示位置だ。

基本的には、開く側のボタンに対して相対的に表示するため、ボタンをアンカーとして指定する。

button[popovertarget] {
  anchor-name: --menu;
}

ul[popover] {
  position-anchor: --menu;
}

あとは、 [popovertarget] に合わせて位置を指定し、必要に応じて translate で調整することで実装ができるだろう。

[popover] {
  top: anchor(end);
  left: anchor(center);
  translate: 2% 4%;
}

position-area を用いて指定する場合は、以下のようにも指定可能だ。

[popover] {
  position-area: bottom span-right;
}

あとは、通常通り必要なスタイルを当ててやれば良い。

JS

Popover の開閉という点に関しては、特に JS 無しに挙動が実現できているため、特に必要は無い。

あとは、普通にメニューの機能そのものを実装すれば良いだろう。