feat: Webサイトのツールチップをクリック式のモーダルに変更

[3w36zj6]

cf. #201

ツールチップをホバー式からクリック式のモーダルに変更し、アクセシビリティとユーザビリティを改善しました。

[Copilot]

Pull Request Overview

This PR refactors the tooltip from a hover-triggered popup into a click-activated modal using Alpine.js for better accessibility and user control.

• Imported CloseIcon and restructured the component to wrap the help icon in a button that toggles a full-screen overlay modal
• Replaced group-hover styles with Alpine.js directives (x-data, x-show, transitions, and event handlers)
• Added modal dialog markup with header, close button, and backdrop

Comments suppressed due to low confidence (2)

website/src/components/ui/Tooltip.tsx:126

• Add appropriate ARIA attributes to this dialog container, for example role="dialog" aria-modal="true", so screen readers correctly announce it as a modal window.

<div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">

website/src/components/ui/Tooltip.tsx:95

• There’s new click-to-open modal behavior here but no corresponding tests. Consider adding unit or integration tests to verify that helpOpen toggles on click/keyboard events and that the modal content appears and disappears correctly.

{...{ "x-data": "{ helpOpen: false }" }}

[kimushun1101]

ご対応いただき誠にありがとうございます。
本家ではホバー式ですが、クリック式に変える意図を教えてください。

私の方でも試行錯誤してみたのですが、以下の行を消すことで「ヘルプアイコン」というツールチップ表示を消すことができ、本家に似たようなホバー式通知が実現できると思ったのですが、いかがでしょうか？

https://github.com/typst-jp/typst-jp.github.io/blob/3b53159e01dae22a63b0c396fd470ea66e140527/website/src/components/icons/HelpCircleIcon.tsx#L13

例えば、この対応では問題があったり、後の拡張などのお考えなどがあったりしますでしょうか？

[3w36zj6]

アクセシビリティに配慮したツールチップの設置には、非常に慎重な設計上の検討が求められます。一般に、ツールチップの内容は簡潔で要点を押さえたものであるべきであり、短くない文章をツールチップで表示するのは適切な方法ではありません。また、モバイル環境などではツールチップが画面からはみ出る場合があり、その挙動を細かく制御することは可能ですが、メンテナンスコストに見合わないと考えます。さらに、本家WebサイトのUI/UXはオープンソースではないため、挙動を忠実に再現する必要はない点にもご留意ください。

なお、SVGのtitle要素はアクセシビリティの観点から必須であり、削除はできません¹。

Footnotes

1. https://biomejs.dev/linter/rules/no-svg-without-title/ ↩

[kimushun1101]

ご丁寧な回答ありがとうございました。内容理解しました。
動作は問題ないと思います。