fix description for group not read by screenreaders

[Magnusrm]

Description

Solved by adding both legend and description to an "aria-labelledby" as suggested by designsystemet in digdir/designsystemet#4662 (comment)

Related Issue(s)

• closes Group: Skjermleser leser ikke beskrivelsen på gruppen ved tab navigering #4128

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

• Bug Fixes
  • Improved accessibility for form fieldset components by ensuring screen readers properly recognize relationships between field labels and descriptions.

[coderabbitai]

Warning

Rate limit exceeded

@Magnusrm has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 46 minutes and 12 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 569220da-b463-4910-8407-463d91452b9d

📥 Commits

Reviewing files that changed from the base of the PR and between faf2339 and 3ea2117.

📒 Files selected for processing (1)

• src/app-components/Label/Fieldset.tsx

📝 Walkthrough

Walkthrough

The Fieldset component now properly connects its fieldset container to its legend and description elements via ARIA attributes. The fieldset receives an aria-labelledby attribute referencing both the legend and description by their ids, and the description element is assigned an explicit id.

Changes

Fieldset ARIA Accessibility

Layer / File(s)	Summary
Fieldset aria-labelledby and description id src/app-components/Label/Fieldset.tsx	Fieldset container receives aria-labelledby attribute referencing ${id}-legend and ${id}-description, and Description component receives explicit id attribute ${id}-description for proper ARIA linking.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main fix: ensuring the group description is read by screen readers through proper aria-labelledby wiring.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The PR description includes all required sections: description with context and screenshot, related issue reference, and comprehensive verification/QA checklist completion.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/description-for-group-not-read-by-screenreaders

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/app-components/Label/Fieldset.tsx`:
- Around line 73-77: Fieldset is composing ARIA and element ids from an optional
FieldsetProps.id which can produce "undefined-legend"/duplicate ids; update the
component so it only emits and references ids when a valid id exists (or
generate a stable fallback via React's useId) and build
aria-labelledby/Legend/Descr ids conditionally—i.e., when setting
aria-labelledby, only include `${id}-legend` and `${id}-description` if id is
truthy, and likewise only pass id props to DesignsystemetFieldset.Legend and the
description element when id is present (or use the fallback useId value) so no
"undefined-*" ids are emitted; apply the same conditional handling where ids are
set around lines with DesignsystemetFieldset.Legend and the corresponding
description element.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 829df87d-7539-41b5-9792-ee8a8613b087

📥 Commits

Reviewing files that changed from the base of the PR and between 47c84c4 and faf2339.

📒 Files selected for processing (1)

• src/app-components/Label/Fieldset.tsx

[lassopicasso]

Ser bra ut :) Jeg vet ikke om det CodeRabbit varsler om, er noe du skal se på.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud