2021-01-17
みすポータルにWICG/focus-visibleとcsstools/postcss-focus-visibleをいれた
code:css
button:focus:not(:focus-visible), a:focus:not(:focus-visible) {
@apply outline-none !important;
}
するとアクセシビリティを確保しつつ見た目をいい感じにできる
PolyfillはSafari対応のため必要
それはそうとしてVoiceOverの扱いに慣れてなくて混乱してしまう
追記: *:focus:not(:focus-visible)のほうがいいのでは?
i18n対応してればaria-labelの指定とかが楽になってアクセシビリティに良いんじゃないかと思ったが、よく考えるとaria-labelledbyを使えばいい
useOpaqueIdentifierがかなり欲しい、というかOpaqueなオブジェクトとして(Refみたいに)扱えてほしい、適当にやりたいので
コンポーネント内でid={o('hoge')}とかやったらグローバルなpostfixが付くみたいな
#日記