Move focus to the task title when the task details page opens

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

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

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

評価

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

調査の方向性

Web の TaskDetailPage コンポーネントと既存の Vitest テストを見つけてください。issue にはそれらのファイルパスが記載されていません。ページがタスクを読み込み、タイトル h1 を描画する方法を確認してから、該当するテストを実行してください。初回読み込みが成功した後に見出しが一度だけフォーカスを受け、その後の更新中はフォーカスされず、読み込みに失敗した場合はフォーカス対象にならないことが完了条件です。

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

説明

Follow-up to #404 (merged in #462). Found during that run (deferred question Q5 in the implementation notes). Not groomed. Web only.

Problem

TaskDetailPage (/tasks/:id) does not move focus on mount. Arriving from a journal row, the Tasks page or the back link, the keyboard and screen reader user starts at the top of the document, or wherever the previous page left focus, and must tab past the back link and the page header to reach the task title. With #404 the detail page is now reached from every journal row, so this happens more often.

Change

On first load of a task (not on refetch or edit), move focus to the page heading (the task title h1), so it is announced and keyboard users start at the content. Give the heading tabIndex={-1}. Do not steal focus back after edits, status changes or note actions. Do not scroll the page beyond what focus does.

Acceptance criteria

  1. Opening /tasks/:id focuses the task title heading once the task has loaded.
  2. Focus stays where it is during refetches, edits and note actions.
  3. A task that fails to load or is not found does not focus a missing element.
  4. The back link, and the focus return to the journal row from #404, are unchanged.
  5. Vitest tests for 1 to 3.

Out of scope

  • Other pages.
  • Changes to the back-link rule.
主要言語
C#
スター
1
フォーク
0
平均マージ
2時間 2分
マージ済み PR（30日）
98

環境構築

はじめの一歩

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

nevridge/TaskFlow のほかの issue

nevridge/TaskFlow の issue をすべて見る

似ている issue

C# の issue をもっと見る

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

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