IconButton: ツールチップの表現方法 about jumpu-ui HOT 5 CLOSED

ツールチップを表示しないことが考えにくいのであれば

表示しなくてもいい場合も一般的にある話しなので、data-labelの有無で機能の切り替えということにはできないでしょうか？ @knokmki612

from jumpu-ui.

擬似要素としてツールチップを表現しているのを、 role="tooltip" によって表現したほうが、同じような属性に同じような値をつける冗長さを避けられるかもしれません。

参考: https://www.w3.org/TR/wai-aria-1.2/#tooltip

before

<button class="icon-button" aria-label="Twitter" data-label="Twitter">    
  <i class="fab fa-twitter"></i>
</button>

after

<button class="icon-button" aria-describedby="tooltip">    
  <i class="fab fa-twitter"></i>
  <span id="tooltip" role="tooltip">Twitter</span>
</button>

from jumpu-ui.

実際の利用について思うことなんですが、
毎回id名は自分で考えてマークアップするような使い方になりますか？

個人的に考えることが多くなるなあという印象でした。
確かに記述といしてはafterのほうが良いとは思いますが、悩みます。

from jumpu-ui.

idの名前付けを毎回考えるのが大変なので、それが解決できればafter案でよいのではという話になった。

Math.round(Math.random() * Number.MAX_SAFE_INTEGER など衝突しない値を生成して楽にidを生成、参照できる工夫をしてafterへ変更する

やること

• id生成のスクリプトを用意する
• after案に変更する

from jumpu-ui.

@knokmki612 マークアップを変更しました。

from jumpu-ui.