# Feature DREAM-1043 - Align Angular-rendered work package tabs with Primer UnderlinePanel component

Project: Stream Design System
Status: in specification
URL: https://community.openproject.org/work_packages/DREAM-1043

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 18.1.0 |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List | a11y report 2026 |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

_No work packages_

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Frontend components and Primer design system |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Accessibility | Yes |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers |  |
| Designer |  |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

**As** a keyboard or screen reader user working with work packages  
**I want to** use the tabs in the work package full view and in the table and graph configuration dialogs the same way as Primer tabs elsewhere  
**so that** they are announced as tabs, can be operated with the arrow keys, and look consistent with the Primer-based work package tabs rendered by Rails.

**Acceptance criteria**

*   The Angular-rendered tab rows (work package full view, table configuration dialog, graph configuration dialog) use the markup and styling of Primer's `UnderlinePanels` component (`Primer::Alpha::UnderlinePanels`).
*   The tab row is a named tab list, each tab is a tab with a selected state, and the tab content is a tab panel labelled by the selected tab.
*   Only the selected tab is in the **Tab** order. **Left**/**Right** move to the previous/next tab (wrapping around), **Home**/**End** to the first/last tab, and the selection follows focus.
*   Disabled tabs can still receive focus, so their reason is shown in a tooltip, but they cannot be selected.
*   Tab counts use the Primer counter.
*   When the tabs do not fit, scroll buttons appear and the selected tab stays fully visible.
*   Tab names are shown in normal case instead of uppercase.

**Technical notes**

*   Primer's `<tab-container>` element only manages panels placed inside it. Here the panels are rendered by the surrounding views, so the markup matches Primer while selection and keyboard handling stay in Angular.
*   Tabs become buttons instead of links: opening a tab in a new browser tab via middle-click is no longer possible. Selecting a tab still updates the URL.
*   The split view tabs are already rendered by Rails (`WorkPackages::Details::TabComponent`, using `UnderlineNav`) and are not affected.

**Permissions and visibility considerations**

*   Unchanged: the same tabs are shown to the same users as before.

**Translation considerations**

*   New screen reader label for the tab list in the work package full view: "Work package details".

**Out of scope**

*   Upgrading `@github/tab-container-element` to 4.x.
*   Changing the Rails-rendered split view tabs.

_Set the_ **To be informed/consulted teams** _field to include all teams necessary to be informed of the changes._