TypeCellOS / TypeCellOS/BlockNote

Comment thread actions: hover-only controls and unlabeled buttons in ThreadsSideba

オープン 初心者向け
#2,824 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

a11y
主要言語
TypeScript
スター
10.2k
フォーク
772
平均マージ
3日 11時間
マージ済み PR(30日)
17

説明

What’s broken?

In the comments sidebar, each thread has emoji and options buttons in the comment header. Two issues:

Image
  1. Hover-only controls
    These buttons only appear on mouse hover. Without hovering first, they are not reachable by keyboard (Tab).

  2. Unlabeled buttons
    If buttons are made visible via hover, Tab can reach them but the screen reader announces only bouton with no accessible name:

What did you expect to happen?

Make action buttons keyboard-accessible, always visible in sidebar, or shown on :focus-within, not only :hover.

Add aria-label on emoji and options buttons (e.g. "Add reaction", "Comment options").

Steps to reproduce

Try to reach this icon using only the keyboard.

It doesn’t work unless the icon has first been hovered with the mouse.

BlockNote version

0.51.4

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

コメントサイドバーの実装から始め、各スレッドのコメントヘッダーと、その絵文字ボタンおよびオプションボタンに焦点を当てます。マウスホバーなしでキーボードからコントロールに到達できること、またスクリーンリーダーが「リアクションを追加」や「コメントのオプション」のような意味のあるラベルを読み上げることを確認してください。サイドバーで両方の要件が機能すれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react, typescript
領域
accessibility, frontend
issue の種類
バグ
難易度
2/5
見積もり時間
1〜3時間
活発さ
静か
明瞭さ
明確に書かれている
初心者へのやさしさ
72/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。