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

Open Beginner friendly
  • Is something wrong?
#464 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
csharp
Domain
accessibility, frontend

Research direction

Find the web TaskDetailPage component and its existing Vitest tests; the issue does not name their file paths. Read how the page loads tasks and renders the title h1, then run the relevant tests. Done means the heading receives focus once after a successful initial load, stays unfocused during later updates, and is not targeted when loading fails.

Written by the indexing model from the issue text.

Description

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.
Dominant language
C#
Stars
1
Forks
0
Avg merge
2h 2m
Merged PRs (30d)
98

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from nevridge/TaskFlow

All issues in nevridge/TaskFlow

Similar issues

More C# issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.