Repository navigation
feat(tabs): make the pathway detail tabs read as clickable - #1016
Merged
Merged
Conversation
The resting tabs were plain text with no border or background, so they read as labels rather than controls, and Tailwind v4's preflight left them with the arrow cursor. * cursor-pointer, and a light neutral-50 background on hover, so a resting tab responds like a control. * The selected tab is semibold. Each tab reserves its semibold width with a hidden copy of its label, so switching tabs doesn't nudge the others sideways; the copy is aria-hidden, keeping one accessible name. The look at rest is unchanged. The UI kit's tab list is updated to match. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Expected version change and release notes🚨 WARNING: This PR is not expected to trigger a new versionTo trigger a version bump, use at least one conventional commit message in this branch. See: https://www.conventionalcommits.org/en/v1.0.0/ |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://proud-glacier-0f640931e-1016.westus2.2.azurestaticapps.net |
Contributor
There was a problem hiding this comment.
🟢 Approval recommended
The narrowly scoped changes have no identified blocking correctness or accessibility issues, though browser appearance and layout stability remain unverified.
No open issues 🎉
What changed in this PR
This PR makes the shared pathway detail tabs easier to recognize as clickable controls, addressing #1015 while preserving keyboard behavior and focus styling.
Changes:
- Adds pointer cursors, rounded top corners, inactive-tab hover backgrounds, and semibold selected labels.
- Reserves label width to prevent tabs shifting when selection changes, with a test ensuring accessible names remain unchanged.
- Updates the design reference to match the component styles.
| File | Description |
|---|---|
src/components/Tabs.tsx |
Adds interaction styling and hidden semibold labels to stabilize tab widths. |
src/components/Tabs.test.tsx |
Verifies hidden label copies do not duplicate accessible names. |
docs/design/tpr-ui-kit.html |
Aligns tab styles and class annotations with the component. |
Review effort: Balanced
AlexAxthelm
approved these changes
Oct 26, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
closes #1015
The tabs on a pathway's page (At a glance, Overview, Timeseries, Scope & Granularity) are easy to miss as controls. Resting tabs are plain text with no border or background, and hovering one showed the arrow cursor, not the hand: Tailwind v4 no longer gives buttons a pointer cursor.
This keeps the tabs looking the same at rest and makes them respond like controls:
neutral-50) for tabs that aren't selected, on top of the existing hover underline and text colour.Colours, spacing, the underline, the focus ring and keyboard behaviour are unchanged.
Detail worth reviewing
Bold text is wider, so a semibold selected tab would nudge the tabs after it a few pixels sideways on every switch. Each tab reserves its semibold width with an invisible, zero-height copy of its label. The copy is
aria-hidden, so screen readers still hear each label once; a new test checks that.Design reference
docs/design/tpr-ui-kit.html: the tab list's CSS and class tags match the new styles. The kit already hadcursor: pointer, so the app had fallen behind it.Checks
npx vitest run: 1350 passing, including the new test.npm run lint,npm run format:check: clean.🤖 Generated with Claude Code