visibility:hidden;→visibility:visible;をtransitionさせるとfocus()でフォーカスされない

Question

visibility:hidden;→visibility:visible;をtransitionさせるとfocus()でフォーカスされない

「ポップアップをフェードイン・フェードアウトさせる」と

「ポップアップをフォーカスさせる」を組み合わせたいです

トランジションプロパティはtransformやwidth|heightよりopacity(+visibility)がいいです

がvisibilityをtransitionさせるとフォーカスがうまくいきません

（opacity:0;だけだと透明なだけなのでvisibility:hidden;が必要だけどvisibilityをtransitionさせるとfocus()が効かない）

どうすればうまくいきますか

---

確認用コード

<span><button>none</button><div tabindex="-1">none</div></span>
<span><button>opacity</button><div tabindex="-1" class="opacity">opacity</div></span>
<span><button>visibility</button><div tabindex="-1" class="visibility">visibility</div></span>
<span><button>opacity visibility</button><div tabindex="-1" class="opacity visibility">opacity visibility</div></span>
<span><button>opacity transition</button><div tabindex="-1" class="opacity transition">opacity transition</div></span>
<span><button>visibility transition</button><div tabindex="-1" class="visibility transition">visibility transition</div></span><!-- フォーカスされない -->
<span><button>opacity visibility transition</button><div tabindex="-1" class="opacity visibility transition">opacity visibility transition</div></span><!-- 本命 --><!-- フォーカスされない -->

span {
  display: inline-block;
  position: relative;
}

[tabindex="-1"] {
  position: absolute;
  z-index: 1;
  background-color: silver;
}

[tabindex="-1"]:focus {
  outline: medium solid blue;
  background-color: red;
}

.opacity {
  opacity: 0;
}
.visibility {
  visibility: hidden;
}

.transition {
  transition: .5s;
}

.open + .opacity {
  opacity: 1;
}
.open + .visibility {
  visibility: visible;
}

addEventListener('click', event => {
  const target = event.target
  if (target.nodeName.toLowerCase() !== 'button') return
  if (target.className === 'open') {
    target.className = ''
  } else {
    target.className = 'open'
    target.nextSibling.focus()
  }
})

プレビュー

https://output.jsbin.com/kocumugaja

---

コードは説明用に必要箇所だけ抜き出して簡略化していますが実際は

https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/

みたいなもののポップアップ部分をフェードさせたい感じです

（width|heightはautoだとtransitionしないので大きさが不定の場合はシンプルじゃないテクニックが必要（な印象））

（transformは使うとしても補助的に使いたい）

（見た目としてはやっぱりフェードがいい）

---

次のコードを追加してtransitionend時にフォーカスさせてみたけどうまくいきません

（transitionを指定したポップアップを複数表示させるとフォーカスの奪い合いになる）

addEventListener('transitionend', event => {
  const target = event.target
  if (target.tabIndex !== -1) return
  if (getComputedStyle(target).visibility === 'visible') {
    target.focus()
  }
})
// ↓フォーカスの奪い合い確認用
addEventListener('focusin', event => {
  console.log(event.target)
})

Answer 1

visibility:hidden;が必要な理由が、opacity:0;だけだマウスホバーに反応してしまうということなら、pointer-eventsでマウスに反応しないようにすればどうでしょう。

.visibility {
/* visibility: hidden; */
  pointer-events: none;
}
.open + .visibility {
 /* visibility: visible; */
  pointer-events: none;
}

Comments

[_._]

pointer-events
↑これ知りませんでした
noneにしたらクリックや選択がnoneの要素を貫通してその裏にある要素で起こるんですね
pointer-events採用してみます

Answer 2

「visibility: hidden」の要素にはfocusできません。transitionによりラグが発生しているため表示直後はvisibility:visibleが有効になっていないのでしょう。
端的に言えば組み合わせの相性がわるいのでこの方法はやめたほうがいいということですが、どうしてもというのであればsetTimeoutすれば対応可能です

addEventListener('click', ({target})=> {
  if (target.matches(':not(button)')) return false;
  if (target.matches('.open')){
    console.log(target.classList);
    target.classList.remove('open');
  } else {
    target.classList.add('open');
    setTimeout(()=>target.nextElementSibling.focus(),100);
  }
});

Comments

[_._]

どうもありがとうございます
自分でtransitionendの例を出しておきながら
実際は
https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/
のようなものがすでにあって
そのcssのdisplay:none;→display:block;の部分を置き換えるだけでフェードイン/アウトを実現したいなと思っているのですが
cssだけでは無理そうですか？