Skip to content

[Dream-814] Milestones in the project timeline widget cannot be opened with a keyboard or screen reader - #25437

Open
bsatarnejad wants to merge 4 commits into
release/17.9from
dream-814-milestones-in-the-project-timeline-widget-cannot-be-opened-with-a-keyboard-or-screen-reader
Open

bsatarnejad wants to merge 4 commits into
release/17.9from
dream-814-milestones-in-the-project-timeline-widget-cannot-be-opened-with-a-keyboard-or-screen-reader

Conversation

@bsatarnejad

Copy link
Copy Markdown
Contributor

Ticket

https://community.openproject.org/wp/DREAM-814

What are you trying to accomplish?

Render milestone and sprint as links in the accessible timeline widget. Reveal focused links for sighted keyboard
users and highlight their corresponding visual timeline items.

Screenshots

Screenshot 2026-09-18 at 06 57 30

@bsatarnejad bsatarnejad self-assigned this Sep 18, 2026
@myabc
myabc requested a lite review from Copilot September 18, 2026 17:45
@myabc
myabc marked this pull request as ready for review September 18, 2026 17:45

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

Accessible links do not include the repository’s show-on-focus mixin, so they remain visible and in normal flow.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

Adds keyboard- and screen-reader-accessible links for timeline milestones and sprints, with visual highlighting of focused items.

Changes:

  • Adds accessible milestone and sprint URLs.
  • Highlights corresponding timeline items on focus.
  • Updates tooltip accessibility and related tests/styles.
File summaries
File Description
project-timeline-tooltip.popover.ts Hides tooltip content from assistive technology.
project-timeline-item.builder.ts Builds accessible links for milestones and sprints.
project-timeline-graph.component.ts Adds focus highlighting and item navigation.
project-timeline-graph.component.html Renders accessible timeline links.
project-timeline-graph.component.sass Styles links and highlighted items.
project-timeline-graph.component.spec.ts Tests accessible links and highlighting.
Review details
  • Files reviewed: 6/6 changed files
  • Comments generated: 1
  • Review effort level: Lite

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment on lines +18 to +23
&--accessible-link
top: var(--base-size-8)
left: var(--base-size-8)
padding: var(--base-size-4) var(--base-size-8)
border-radius: var(--borderRadius-default)
background: var(--bgColor-default)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Development

Successfully merging this pull request may close these issues.

2 participants