BOLGをキーボード操作できるようにした

https://bolg.in の話。今までできなかったんかいって感じだけど。適当にやってるとtabでフォーカスできない要素をつくってしまうという例です。Chromeでしか確認してないのでマネするときは注意。

フォーカスできない要素をフォーカスできるようにする

ブラウザにここ押せるんですよということを教えてあげないとフォーカスしてくれないようなのでどうにかします。spanとかliとかにイベントハンドラほいほい振っているとこういうことになりがち。tabindexとか何か別のいい方法がある気はしています。

- <span @click="openModal">
+ <a href="#" @click.prevent="openModal">

これ、書いてから思ったんだけどoutlineが見えてなかっただけかもしれない。戻してよかったら戻すかも。

親も子もフォーカスできてしまうのでどうにかする

<NuxtLink to="/d/addons/explore">
  <IconButton />
</NuxtLink>

こういう構造にしているところでtabを押すと、NuxtLinkにもIconButtonにもフォーカスが当たるのでtabを連打しないといけないことに気づいた。IconButtonにはフォーカス時のスタイルをつくっているのでそっちにフォーカスしてほしいけど、NuxtLinkにフォーカスしてるときはブラウザが遷移先のURLを左下に出してくれるので捨てがたい。なのでどっちかにtabindex="-1"ってわけにもいかない、という状況。最終的にはIconButton(とその中で使ってるTextButtonコンポーネント)にtoプロパティを渡せるようにしてなんとかしました。

<IconButton to="/d/addons/explore" />

中身はこんな感じ。

<NuxtLink v-if="to" :to="to">
  <slot />
</NuxtLink>
<button v-else @click="emitClick">
  <slot />
</button>

キーボード操作のときだけoutlineを見せる

:focus-visibleを使いました。BOLGにはressっていうCSSリセットが入っていて、これが

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline-width: 0;
}

ってことをしているので、outlineを出したいとこに↓のmixinをincludeしました。

@mixin focus-visible() {
  &:focus-visible {
    outline-width: 1px;
  }
}

一応これでひと通りの操作はできるようになったけど、フォーカス順とかモーダル開いたときの挙動とか、こだわりポイントはもっとありそう。どこまでやるかは悩みどころ。