Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Attachments: remove button stays invisible on keyboard focus and on touch screens

オープン 初心者向け
  • 何か問題がありますか？
#507 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@HardMax71 がすでに取り組んでいます。

2026年10月2日 から。

  • #508 @HardMax71 による — オープン

評価

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

調査の方向性

packages/elements/src/attachments.tsx の参照されている AttachmentRemove の箇所から始め、常に表示されるリストバリアントとグリッドおよびインラインの各バリアントを比較します。また、packages/elements/src/queue.tsx の QueueItemAction も確認します。キーボードフォーカス時およびタッチスクリーン上で削除/アクションコントロールを視覚的に識別でき、既存のリストの動作を維持できれば完了です。

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

説明

In the grid and inline variants AttachmentRemove is opacity-0 and only becomes visible through group-hover:opacity-100 (attachments.tsx#L345, #L351).

  • Keyboard: Tab moves focus to the button, but it stays invisible, focus ring included, so a keyboard user cannot see what is focused.
  • Touch: Tailwind v4 wraps hover variants in @media (hover: hover), so on a phone or tablet the button never becomes visible. It still takes taps at its invisible position.

Repro (registry main 6a9d5b1, Tailwind 4.1):

<Attachments variant="inline">
  <Attachment data={file} onRemove={() => {}}>
    <AttachmentPreview />
    <AttachmentInfo />
    <AttachmentRemove />
  </Attachment>
</Attachments>

Press Tab until the remove button has focus: nothing is visible. On a phone (or Chrome DevTools device mode) the button never shows.

Expected: the button is visible when it has keyboard focus and on touch screens. The list variant already shows it all the time.

QueueItemAction (queue.tsx#L129) uses the same hover-only pattern.

主要言語
TypeScript
スター
2.5k
フォーク
291
平均マージ
20分
マージ済み PR（30日）
3

環境構築

はじめの一歩

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

vercel/ai-elements のほかの issue

vercel/ai-elements の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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