[mjmjsachi]

【Snow Monkey のバージョン】20.0.1
【Snow Monkey Blocks のバージョン】19.1.0
【ブラウザ】Chrome

### 実現したかったこと
Snow Monkey Blocks の「パネル」ブロックのフォーカスを可視化したい

### 試したこと
CSSで次のように書くとアウトラインが表示されました。

.smb-panels__item a:focus::after {
outline: solid;
}

• .smb-panels__item は div要素なのでそのままではフォーカスが当たらない
• .smb-panels__item内の a要素は高さ・幅が0なのでフォーカスが当たっても見えない
• a::after にフォーカスリングを表示させた

フォーカスリングではなく、:hover とスタイルを合わせたい場合は
outline〜 を box-shadow〜 に書き換えると良いかと思います。

♥ 2

いいねをした人:

[キタジマ タカシ]

あ、疑似要素ってデフォルトだとフォーカスリングが出ないってことですかね、知らなかった…！ これは本体に取り込んだほうが良いと思うので、確認して取り込みます！

♥ 1

いいねをした人:

[mjmjsachi]

あ！こちらはパネルブロックの「リンク設定」で「リンクを表示：OFF」にしている場合のものでした。
「リンクを表示：ON」にしてリンクテキストを記入した場合は、ちゃんとフォーカスが表示されます。

疑似要素になっている影響か、項目ブロックのバナースタイルでもフォーカスリングが見えない状況のようです。
パネル・バナーともお気に入りのブロックなので、ご確認いただけるとうれしいです！

♥ 1

いいねをした人:

[キタジマ タカシ]

デフォルトの見た目に合わせたい + 設定によって内側にずらさないとフォーカスリングが途切れてしまうときがある、ので、デフォルトは下記の CSS でいきたいと思います！

.smb-panels__item__action > a:focus:after {
  outline: 1px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

項目ブロックのほうも確認します！

♥ 2

いいねをした人:

[キタジマ タカシ]

v19.2.0 で変更を入れました！

♥ 1

いいねをした人:

[mjmjsachi]

本体への取り込みありがとうございます！
これからも Snow Monkey のお世話になります！！！

♥ 1

いいねをした人:

[投稿者]

投稿