feat!(FilledTag): 閉じるボタンはrole="button"でマークアップする #423
Conversation
knokmki612
added
the
breaking-change
This comment was marked as resolved.
This comment was marked as resolved.
|
コンフリクトを解決しました。お手数をおかけしますが改めてレビューをお願いします。 |
| @@ -61,7 +61,7 @@ import html from "./html"; | |||
| <Story name="Closable"> | |||
| {html` <div class="jumpu-filled-tag"> | |||
| デフォルト | |||
| <button /> | |||
| <div role="button" aria-label="閉じる" /> | |||
There was a problem hiding this comment.
div要素の空要素はよしとするべきでしょうか？
仕様書には明確にだめとは書いてないように思えますが、あまり見なかったので気になって確認したいところです。
明確な理由があればよいです。
There was a problem hiding this comment.
https://validator.w3.org/nu/#textarea に以下を入力すると valid です。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>test</title>
</head>
<div role="button" aria-label="閉じる"></div>
</html>There was a problem hiding this comment.
https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element のコンテントモデルをみればdiv要素になにが含められるかが分かりますが、フローコンテントが含められます。
そして空の要素というのは空のテキストノードともいえるはずなので、おそらくOKです。
ちなみにbr要素はコンテントモデルなし
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element
ただしNothingコンテントモデルであることと終端タグが必要かどうかとは必ずしも一致しないようです
https://html.spec.whatwg.org/multipage/dom.html#the-nothing-content-model
There was a problem hiding this comment.
まあ、空要素といっても終了タグ（終端？）が省略されているケースが気になっただけで、
よく考えたら空要素のまま運用するわけだから、問題なかったですよね。
お騒がせしました。
There was a problem hiding this comment.
終了タグ（終端？）が省略されているケースが気になっただけ
それはHTML仕様違反だと思います
以下のTag omission in text/html にあるとおりです
https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element
JSXならそれはよしなにしてくれるはずですが、この箇所がどういう取り扱いだったかすこし定かでないです。
There was a problem hiding this comment.
https://tuqulore.github.io/jumpu-ui/?path=/docs/status-filledtag--docs#closable などをみると、ドキュメントにはそのまま閉じタグが省略されているので、これは修正したほうがよさそうです
#37 での議論を反映します