画像ブロック：画像ホバー時にLightboxのボタンがズレる

[t-hamano]

Lightboxを有効化している画像ブロックでは、キーボードアクセシビリティのために、画像ブロックにホバーした時に拡大ボタンが表示されます。通常は、ちょうど画像の右上に位置しますが、これがズレてしまうようです。

この辺りのソースを見る限り、figureタグのサイズからこのボタンの位置を動的に決定しているように見えますが、Arkheでこれが起こる原因としては、

• ブロックに display:block が適用されている（＝ブロックが幅100%になる）
• デフォルトの位置が左右中央揃えである

の二点が関係していると思います。

対策方法としては、以下どちらかが考えられると思います。

ホバー時にこのボタンを表示しない

:focus、:hover時はopacity:0 のままで、キーボードのタブキー移動時（:focus-visible）のみボタンを表示する、というアプローチです。

この辺りのCSSをオーバーライドする必要があると思います。

ブロックの display:block をやめる

display:block から display:table table に変える事で、ブロックのfigureタグは幅100%ではなく画像と同一になるので、ズレは発生しなくなるようです。つまり、テーマの以下のCSSを消し、コアのデフォルトスタイルを活かす方法です。

このアプローチは、テーマをカスタマイズしている既存ユーザーへの影響が大きいかもしれません。