Fixing help text rendered in bold by default #3915

olemartinorg · 2025-12-17T14:50:29Z

Description

This forces the help text to use font-weight: 400. It turns out the label styling overrides the default font weight in some components, and it all seems to depend on the render hierarchy. Labels are still a bit complex, so instead of rewriting this to something easier, I guess this override (with a test) can do the trick as well.

Related Issue(s)

closes help text for radio-buttons #728

Verification/QA

Manual functionality testing
- I have tested these changes manually
- Creator of the original issue (or service owner) has been contacted for manual testing (or will be contacted when released in alpha)
- No testing done/necessary
Automated tests
- Unit test(s) have been added/updated
- Cypress E2E test(s) have been added/updated
- No automatic tests are needed here (no functional changes/additions)
- I want someone to help me make some tests
UU/WCAG (follow these guidelines until we have our own)
- I have tested with a screen reader/keyboard navigation/automated wcag validator
- No testing done/necessary (no DOM/visual changes)
- I want someone to help me perform accessibility testing
User documentation @ altinn-studio-docs
- Has been added/updated
- No functionality has been changed/added, so no documentation is needed
- I will do that later/have created an issue
Support in Altinn Studio
- Issue(s) created for support in Studio
- This change/feature does not require any changes to Altinn Studio
Sprint board
- The original issue (or this PR itself) has been added to the Team Apps project and to the current sprint board
- I don't have permissions to do that, please help me out
Labels
- I have added a kind/* and backport* label to this PR for proper release notes grouping
- I don't have permissions to add labels, please help me out

Summary by CodeRabbit

New Features
- Help text now supports toggling between component-specific and general help through an improved interface.
Style
- Enhanced help text typography with refined font styling.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

…ing overrides the default font weight in some components, and it all seems to depend on the render hierarchy. Labels are still a bit complex, so instead of rewriting this to something easier, I guess this override (with a test) can do the trick as well.

coderabbitai · 2025-12-17T14:50:47Z

📝 Walkthrough

Walkthrough

This PR addresses a styling inconsistency where help text for radio-button components appeared bold while other components displayed normal font weight. Changes include a CSS font-weight fix, updates to test page object selectors, and comprehensive test revisions validating the corrected behavior with multi-button help text interactions.

Changes

Cohort / File(s)	Summary
CSS styling fix `src/app-components/HelpText/Helptext.module.css`	Added `.helpTextContent span { font-weight: 400; }` rule to normalize font-weight for span elements within help text content.
Test page object updates `test/e2e/pageobjects/app-frontend.ts`	Added new `alertOpen` selector property to `AppFrontend.helpText` to track help text popover open state.
E2E integration test revisions `test/e2e/integration/frontend-test/components.ts`	Renamed test case, added layout interception to set Norwegian help text for RadioButtons and Checkboxes components, reworked assertion flow from simple visibility checks to multi-button interactions (component-specific help via first button, general help via second button), updated DOM selectors to use `alertOpen`, and added font-weight validation.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

test/e2e/integration/frontend-test/components.ts: Requires careful validation of the refactored multi-button interaction flow, new assertion patterns, and content verification logic across multiple component types (RadioButtons, Checkboxes) to ensure correct help text display behavior.
Interaction pattern changes: Verify that the shift from single-button to dual-button help text interactions (component-specific vs. general help) is properly implemented and all edge cases are covered.

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: fixing help text that was rendering in bold by applying a font-weight CSS override.
Description check	✅ Passed	The PR description follows the template with all required sections completed: description of changes, linked issue reference, and comprehensive verification/QA checklist with appropriate items checked.
Linked Issues check	✅ Passed	The changes directly address issue #728 by adding CSS rule forcing font-weight 400 on help text spans and updating E2E tests to validate this styling, ensuring help text appears consistently non-bold across components.
Out of Scope Changes check	✅ Passed	All changes are within scope: CSS fix for help text font weight, E2E test updates to verify the fix, and page object selector addition to support testing. No unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch bug/radio-helptext-font-weight

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f7fca44 and c744ea3.

📒 Files selected for processing (3)

src/app-components/HelpText/Helptext.module.css (1 hunks)
test/e2e/integration/frontend-test/components.ts (2 hunks)
test/e2e/pageobjects/app-frontend.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Avoid using any type or type casting (as type) in TypeScript code; improve typing by avoiding casts and anys when refactoring
Use objects for managing query keys and functions, and queryOptions for sharing TanStack Query patterns across the system for central management

Files:

test/e2e/pageobjects/app-frontend.ts
test/e2e/integration/frontend-test/components.ts

{**/*.module.css,**/*.{ts,tsx}}

📄 CodeRabbit inference engine (CLAUDE.md)

Use CSS Modules for component styling and leverage Digdir Design System components when possible

Files:

test/e2e/pageobjects/app-frontend.ts
src/app-components/HelpText/Helptext.module.css
test/e2e/integration/frontend-test/components.ts

🧠 Learnings (2)

📚 Learning: 2025-11-25T12:53:54.399Z

Learnt from: CR
Repo: Altinn/app-frontend-react PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T12:53:54.399Z
Learning: Applies to **/*.test.{ts,tsx} : Use `renderWithProviders` from `src/test/renderWithProviders.tsx` when testing components that require form layout context

Applied to files:

test/e2e/integration/frontend-test/components.ts

📚 Learning: 2025-11-25T12:53:54.399Z

Learnt from: CR
Repo: Altinn/app-frontend-react PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T12:53:54.399Z
Learning: Applies to src/layout/*/{config,Component,index,config.generated}.{ts,tsx} : Layout components must follow standardized structure with `config.ts`, `Component.tsx`, `index.tsx`, and `config.generated.ts` files

Applied to files:

test/e2e/integration/frontend-test/components.ts

🧬 Code graph analysis (1)

test/e2e/integration/frontend-test/components.ts (2)

test/e2e/pageobjects/app-frontend.ts (1)

component (420-420)

src/features/expressions/expression-functions.ts (1)

component (427-463)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: Analyze (javascript)
GitHub Check: Install
GitHub Check: Type-checks, eslint, unit tests and SonarCloud

🔇 Additional comments (5)

src/app-components/HelpText/Helptext.module.css (1)

40-42: LGTM — straightforward fix for inherited bold styling.

The descendant selector ensures all spans inherit normal font weight regardless of label hierarchy, which aligns with the PR objective to make radio-button help text match other components.

test/e2e/integration/frontend-test/components.ts (3)

375-383: Good setup for testing both component-level and option-level help text.

The layout interception correctly configures custom Norwegian help text for both RadioButtons and Checkboxes components, enabling validation of distinct help text sources.

398-406: Font-weight assertions validate the CSS fix correctly.

The pattern of checking font-weight: '400' on spans within the alert content directly verifies the bug fix. Note that .find('span') yields the first match—this works here since the CSS rule applies uniformly to all spans.

411-423: RadioButtons help text validation mirrors Checkboxes pattern.

This directly addresses the original issue (#728) where radio-button help text appeared bold. The test now confirms both component types render help text with normal font weight.

test/e2e/pageobjects/app-frontend.ts (1)

66-66: New selector is appropriate for detecting open popover state.

The :popover-open pseudo-class is well-supported across current browsers: Chrome 114+, Firefox 122+, and Safari 17+. Since this feature has worked across the latest devices and browser versions since April 2024, it's suitable for modern Cypress test environments.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

sonarqubecloud · 2025-12-17T14:59:48Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

JamalAlabdullah

Looks Good 👍

olemartinorg added kind/bug Something isn't working backport This PR should be cherry-picked onto older release branches labels Dec 17, 2025

JamalAlabdullah approved these changes Dec 24, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fixing help text rendered in bold by default #3915

Fixing help text rendered in bold by default #3915

Uh oh!

olemartinorg commented Dec 17, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Dec 17, 2025 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Uh oh!

sonarqubecloud bot commented Dec 17, 2025

Uh oh!

JamalAlabdullah left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Fixing help text rendered in bold by default #3915

Are you sure you want to change the base?

Fixing help text rendered in bold by default #3915

Uh oh!

Conversation

olemartinorg commented Dec 17, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue(s)

Verification/QA

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Pre-merge checks and finishing touches

Uh oh!

sonarqubecloud bot commented Dec 17, 2025

Quality Gate passed

Uh oh!

JamalAlabdullah left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

olemartinorg commented Dec 17, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Dec 17, 2025 •

edited

Loading