[DREAM-955] Give table controls accessible tooltips by myabc · Pull Request #26381 · opf/openproject

myabc · 2026-10-28T00:23:29Z

Note

This PR is stacked on #26380 (DREAM-945, row headers). Please review/merge that PR first.

Ticket

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

What are you trying to accomplish?

tl;dr for humans: Lets keyboard users read the same work package table hints as pointer users.

For example, focusing the details icon shows “Open details view.” A spent-time link keeps its visible value as its name and adds “Show spent time for this work package” as a description. Duplicate ID and person/group-name hints are removed.

Screenshots

Open details view tooltip	Open context menu tooltip

What approach did you choose and why?

Creates native Primer tooltips alongside their controls so rows and fields own their lifetime, with a guard against opening a tooltip after removal. Applies this to table actions and display fields, and to shared principal links.

Hints for dev review

Tab to the details icon, then press Escape: the tooltip closes while focus and selection remain. Start with tooltip-helper.ts and accessible_tooltips_spec.rb for the label/description behavior.

AI involvement

Directed – I specified the requirements and AI implemented most of it; I validated via testing rather than a full line-by-line review.

Merge checklist

Added/updated tests
Tested major browsers (Chrome, Firefox, Edge, ...)

myabc · 2026-10-29T01:04:19Z

+    const { link, tooltip } = mount();
+    link.focus();
+    await waitFor(() => expect(tooltip.matches(':popover-open')).toBe(true));
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));


fireEvent

github-actions · 2026-10-29T01:54:51Z

Warning

Flaky specs

rspec ./spec/features/work_packages/sorting/manual_sorting_spec.rb[1:5:3]

🤖 Ask Copilot to investigate

Copy the prompt below into a new comment on this PR to delegate the investigation to GitHub Copilot. It will look into the flakiness and open a separate pull request with you as reviewer.

@copilot The following spec(s) are flaky in CI (first seen on PR #26381, linked for reference only):

- `rspec ./spec/features/work_packages/sorting/manual_sorting_spec.rb[1:5:3]`

Treat this as a standalone task, unrelated to PR #26381. Create a new branch from origin/dev and open a new pull request targeting dev — do not stack it on PR #26381 or reuse that branch.

Follow the playbook in docs/development/testing/handling-flaky-tests/README.md to find the root cause and fix the underlying race — do not skip, delete, or weaken the spec to make it pass; disabling is a last resort per the playbook, and only with a bug ticket. Verify the fix by running the spec(s) repeatedly (e.g. `script/bulk_run_rspec --run-count 10`).

If you cannot reproduce the flake or are not confident in a fix after reasonable investigation, do not fabricate a change or skip the spec to force CI green. Instead, leave the pull request in draft and document what you tried, the suspected cause, and any leads in its description, then assign @myabc to take over.

Once the fix is verified, title the PR after the spec(s) it fixes, and use the PR description to explain the root cause, how the change resolves it, and the before/after results. Label the PR `flaky-spec`, assign @myabc, and request a review from @myabc.
On every commit, set @myabc as the sole co-author with a `Co-authored-by:` trailer (use their GitHub no-reply email so it links to their account), so it is traceable who dispatched the fix.

Copilot

🟢 Approval recommended

No active review issues remain for the keyboard-accessible tooltip changes.

No open issues 🎉

What changed in this PR

Makes work package table hints available to keyboard users through Primer tooltips, building on the row-header accessibility work in #26380.

Changes:

Adds shared tooltip handling that distinguishes accessible labels from descriptions and guards against showing removed tooltips.
Updates table actions, display fields, and principal links while removing redundant ID and name hints.
Adds coverage for keyboard dismissal, focus preservation, rerendering, and existing navigation behavior.

File	Description
`spec/support/pages/work_packages/work_packages_table.rb`	Finds focused controls by accessible name.
`spec/features/work_packages/table/semantic_id_navigation_follow_ups_spec.rb`	Uses accessible naming for details-link assertions.
`spec/features/work_packages/table/keyboard_selection_spec.rb`	Checks tooltip dismissal preserves focus and selection.
`spec/features/work_packages/table/cell_interaction_spec.rb`	Verifies focus enters the context menu.
`spec/features/work_packages/table/accessible_tooltips_spec.rb`	Covers tooltip semantics and keyboard and pointer interactions.
`spec/features/work_packages/display_fields/spent_time_display_spec.rb`	Tests labeled time logging and refreshed values.
`spec/features/work_packages/details/query_groups/relation_query_group_keyboard_spec.rb`	Covers unlink hints and replacement controls.
`frontend/src/app/shared/helpers/tooltip-helper.ts`	Adds shared tooltip creation and dismissal helpers.
`frontend/src/app/shared/helpers/tooltip-helper.spec.ts`	Tests tooltip semantics, interactions, and lifecycle handling.
`frontend/src/app/shared/components/principal/principal-renderer.service.ts`	Adds descriptive tooltips and removes redundant linked-name hints.
`frontend/src/app/shared/components/principal/principal-renderer.service.spec.ts`	Tests principal hint behavior and preserved hover-card attributes.
`frontend/src/app/shared/components/fields/display/field-types/wp-spent-time-display-field.module.ts`	Describes spent-time values and labels logging controls.
`frontend/src/app/shared/components/fields/display/field-types/wp-id-display-field.module.ts`	Appends the updated link-builder fragment.
`frontend/src/app/shared/components/fields/display/field-types/wp-id-display-field.module.spec.ts`	Verifies ID links have no redundant tooltip.
`frontend/src/app/shared/components/fields/display/field-types/work-display-field.module.ts`	Adds descriptive tooltips to derived work values.
`frontend/src/app/shared/components/fields/display/field-types/table-tooltip-display-fields.spec.ts`	Tests field descriptions, rerendering, routing, and time logging.
`frontend/src/app/shared/components/fields/display/field-types/linked-work-package-display-field.module.ts`	Appends linked work packages with their tooltip fragments.
`frontend/src/app/shared/components/fields/display/field-types/compound-progress-display-field.module.ts`	Describes derived progress and removes native container titles.
`frontend/src/app/features/work-packages/components/wp-table/table-actions/table-actions.service.ts`	Allows actions to return document fragments.
`frontend/src/app/features/work-packages/components/wp-table/table-actions/table-action.ts`	Extends the action contract to support fragments.
`frontend/src/app/features/work-packages/components/wp-table/table-actions/actions/unlink-table-action.ts`	Labels unlink controls through tooltips.
`frontend/src/app/features/work-packages/components/wp-table/table-actions/actions/details-table-action.ts`	Returns the details link with its tooltip.
`frontend/src/app/features/work-packages/components/wp-table/table-actions/actions/context-menu-table-action.ts`	Labels context-menu controls through tooltips.
`frontend/src/app/features/work-packages/components/wp-fast-table/handlers/context-menu/context-menu-entry.spec.ts`	Tests tooltip dismissal when opening the menu.
`frontend/src/app/features/work-packages/components/wp-fast-table/handlers/context-menu/context-menu-click-handler.ts`	Hides the control’s tooltip before opening the menu.
`frontend/src/app/features/work-packages/components/wp-fast-table/builders/ui-state-link-builder.ts`	Returns anchors with tooltip fragments and omits redundant hints.
`frontend/src/app/features/work-packages/components/wp-fast-table/builders/ui-state-link-builder.spec.ts`	Tests tooltip naming, descriptions, and preserved routing.
`frontend/src/app/features/work-packages/components/wp-fast-table/builders/table-action-renderer.ts`	Accepts fragment-based action output.
`frontend/src/app/features/work-packages/components/wp-fast-table/builders/table-action-renderer.spec.ts`	Tests repeated action tooltips and preserved unlink behavior.

_{Review effort: Balanced}

github-actions · 2026-10-30T22:12:46Z

Warning

Flaky specs

rspec ./spec/features/projects/lists/filters_spec.rb[1:18:1:1]

🤖 Ask Copilot to investigate

Copy the prompt below into a new comment on this PR to delegate the investigation to GitHub Copilot. It will look into the flakiness and open a separate pull request with you as reviewer.

@copilot The following spec(s) are flaky in CI (first seen on PR #26381, linked for reference only):

- `rspec ./spec/features/projects/lists/filters_spec.rb[1:18:1:1]`

Treat this as a standalone task, unrelated to PR #26381. Create a new branch from origin/dev and open a new pull request targeting dev — do not stack it on PR #26381 or reuse that branch.

Follow the playbook in docs/development/testing/handling-flaky-tests/README.md to find the root cause and fix the underlying race — do not skip, delete, or weaken the spec to make it pass; disabling is a last resort per the playbook, and only with a bug ticket. Verify the fix by running the spec(s) repeatedly (e.g. `script/bulk_run_rspec --run-count 10`).

If you cannot reproduce the flake or are not confident in a fix after reasonable investigation, do not fabricate a change or skip the spec to force CI green. Instead, leave the pull request in draft and document what you tried, the suspected cause, and any leads in its description, then assign @myabc to take over.

Once the fix is verified, title the PR after the spec(s) it fixes, and use the PR description to explain the root cause, how the change resolves it, and the before/after results. Label the PR `flaky-spec`, assign @myabc, and request a review from @myabc.
On every commit, set @myabc as the sole co-author with a `Co-authored-by:` trailer (use their GitHub no-reply email so it links to their account), so it is traceable who dispatched the fix.

github-actions · 2026-11-02T16:06:23Z

Deploying openproject with ⚡ PullPreview

Field	Value
Latest commit	`fbfb8e9`
Job	`deploy`
Status	✅ Deploy successful
Preview URL	https://pr-26381-dream-955-table-too-ip-2-31-174-75.my.opf.run:443

View logs

Adds Primer tooltips to table actions, value links and principal names while preserving their actual anchors and row identities. Keeps visible text as the link name and supplies icon labels or additional descriptions. Suppresses redundant browser titles and guards pending native focus events after their owner is removed. Hides the context-menu button tooltip when the menu is requested, so the tooltip cannot swallow an Escape meant for the pending menu. Covers accessible names, navigation, async time-entry links and tooltip lifecycle with real-browser tests. https://community.openproject.org/wp/DREAM-955

Pins accessible names and descriptions in real work package tables while preserving navigation, selection and explicit destructive activation. Keeps keyboard acceptance aligned with tooltip-first Escape handling and the new computed names, including after embedded-table refreshes. https://community.openproject.org/wp/DREAM-955

myabc added this pull request to stack #26336 October 28, 2026 00:31

github-actions Bot added the ai: Directed 🪄 A human specified the requirements and AI implemented most of it; They validated via testing. label Oct 28, 2026

myabc added DO NOT MERGE javascript Pull requests that update Javascript code labels Oct 28, 2026

myabc force-pushed the feature/dream-955-table-tooltips branch from 878cd52 to 3a6b43a Compare October 28, 2026 01:26

This was referenced Oct 28, 2026

[AGILE-476] Add accessible read-only sprint tables #26382

Draft

[DREAM-885] Treegrid semantics (ARIA roles, states and row model) for the work package table #26288

Merged

myabc removed this pull request from stack #26336 October 28, 2026 19:25

myabc added this pull request to stack #26434 October 28, 2026 19:48

myabc removed this pull request from stack #26434 October 28, 2026 19:49

myabc added this pull request to stack #26435 October 28, 2026 20:25

myabc force-pushed the feature/dream-955-table-tooltips branch from 3a6b43a to 071f328 Compare October 29, 2026 00:22

myabc commented Oct 29, 2026

View reviewed changes

myabc force-pushed the feature/dream-955-table-tooltips branch from 071f328 to 5afc82a Compare October 29, 2026 01:09

myabc force-pushed the feature/dream-955-table-tooltips branch from 5afc82a to bfbb5c6 Compare October 29, 2026 01:40

myabc force-pushed the feature/dream-955-table-tooltips branch from bfbb5c6 to d4ea73f Compare October 29, 2026 02:57

myabc marked this pull request as ready for review October 29, 2026 02:58

Copilot AI balanced review requested due to automatic review settings October 29, 2026 02:58

myabc removed the DO NOT MERGE label Oct 29, 2026

myabc requested a review from a team October 29, 2026 02:58

Copilot started reviewing on behalf of myabc October 29, 2026 03:00

View session

Copilot AI reviewed Oct 29, 2026

View reviewed changes

HDinger approved these changes Oct 29, 2026

View reviewed changes

myabc force-pushed the feature/dream-955-table-tooltips branch from d4ea73f to 269cde8 Compare October 29, 2026 14:39

myabc force-pushed the feature/dream-955-table-tooltips branch from 269cde8 to b3ab9c7 Compare October 30, 2026 03:07

myabc force-pushed the feature/dream-955-table-tooltips branch 3 times, most recently from ab6f019 to 93f3819 Compare October 30, 2026 11:54

myabc force-pushed the feature/dream-955-table-tooltips branch from 93f3819 to d952c0c Compare October 30, 2026 12:53

myabc force-pushed the feature/dream-955-table-tooltips branch from d952c0c to 02bd372 Compare October 30, 2026 21:58

myabc force-pushed the feature/dream-955-table-tooltips branch 2 times, most recently from 364d12e to fd0bf41 Compare October 31, 2026 00:32

myabc removed this pull request from stack #26435 November 2, 2026 15:14

myabc force-pushed the feature/dream-955-table-tooltips branch from fd0bf41 to 353a40d Compare November 2, 2026 15:18

myabc added this pull request to stack #26557 November 2, 2026 15:18

myabc added the pullpreview label Nov 2, 2026

Base automatically changed from feature/dream-945-row-headers to release/18.0 November 3, 2026 17:12

myabc force-pushed the feature/dream-955-table-tooltips branch from 353a40d to fbfb8e9 Compare November 3, 2026 17:12

myabc added feature and removed pullpreview labels Nov 3, 2026

myabc added this to the 18.0.x milestone Nov 3, 2026

myabc force-pushed the feature/dream-955-table-tooltips branch from fbfb8e9 to 1dd91f4 Compare November 3, 2026 21:24

myabc added 2 commits November 3, 2026 23:47

myabc force-pushed the feature/dream-955-table-tooltips branch from 1dd91f4 to a56b423 Compare November 3, 2026 23:49

Navigation Menu

Repository navigation

[DREAM-955] Give table controls accessible tooltips - #26381

[DREAM-955] Give table controls accessible tooltips#26381
myabc wants to merge 2 commits into
release/18.0from
feature/dream-955-table-tooltips

myabc commented Oct 28, 2026 •

edited

Loading

Uh oh!

myabc Oct 29, 2026

Uh oh!

github-actions Bot commented Oct 29, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

github-actions Bot commented Oct 30, 2026

Uh oh!

github-actions Bot commented Nov 2, 2026 •

edited

Loading

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

Conversation

myabc commented Oct 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Ticket

What are you trying to accomplish?

Screenshots

What approach did you choose and why?

Hints for dev review

AI involvement

Merge checklist

Uh oh!

myabc Oct 29, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Oct 29, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

github-actions Bot commented Oct 30, 2026

Uh oh!

github-actions Bot commented Nov 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying openproject with ⚡ PullPreview

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

myabc commented Oct 28, 2026 •

edited

Loading

github-actions Bot commented Nov 2, 2026 •

edited

Loading