chore: add a11y addon for storybook in form component

[phlipsterit]

Description

Added the accessibility add-on to storybook of form-component library

With this add on, with get an additional panel with shows accessibility validations and errors

Also took the liberty to add two more things :

• Added autodocs, so each story gets a doc-page which lists properties and all the stories :

• Hooked up mock function to onClick on button story, so we get actions triggered by user in control-panel

• Related issues are connected (if applicable)
• Your code builds clean without any errors or warnings
• Manual testing done (required)
• Relevant automated test added (if you find this hard, leave it and we'll help out)

Summary by CodeRabbit

• New Features

  • Added accessibility auditing to Storybook for form components
  • Enabled automatic documentation generation for component stories
  • Integrated Chromatic for visual regression testing
  • Improved interactive component stories with a default click handler

• Chores

  • Updated Storybook and related development dependencies to support these features

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a9272737-e777-45bc-b459-807ce7703db9

📥 Commits

Reviewing files that changed from the base of the PR and between f884d4a and f4c81a2.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (1)

• libs/form-component/package.json

---

📝 Walkthrough

Walkthrough

Storybook config for the form-component library adds accessibility and Chromatic addons, preview parameters enable autodocs, package.json is updated for the addon and storybook version, and Button stories receive a default onClick handler via Storybook's test fn.

Changes

Storybook addon and preview setup

Layer / File(s)	Summary
Storybook addon configuration and package updates libs/form-component/.storybook/main.ts, libs/form-component/package.json	The .storybook addons array is reformatted and expanded to include @storybook/addon-a11y and @chromatic-com/storybook; @storybook/addon-a11y is added to devDependencies at 10.2.16, and the storybook npm script is updated to 10.2.16.
Preview parameters and Button story defaults libs/form-component/.storybook/preview.tsx, libs/form-component/src/app-components/Button/Button.stories.tsx	Preview parameters gains tags: ['autodocs']; Button stories import fn from storybook/test and set meta.args.onClick to fn().

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Altinn/altinn-studio#18749: Both PRs modify libs/form-component Storybook configuration files and devDependencies.

Suggested labels

kind/chore

Poem

🐰 I hopped into stories, small and spry,
Added a11y so none pass by,
Auto-docs now show the way,
A click handler to brighten the day,
Stories flourish — hooray, hi-fi!

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description covers the main changes with supporting images, but the manual testing checkbox remains unchecked, which is marked as required.	Complete the manual testing verification or provide documentation of testing performed to satisfy the required checklist item.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change—adding the a11y addon to Storybook for the form component library.
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.

_{✏️ 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 chore/a11y-storybook-form-component

---

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 `@libs/form-component/package.json`:
- Line 32: Update Storybook dependency pinning to a single fixed version: change
the dependency entry for "`@storybook/addon-a11y`" from "^10.2.16" to "10.2.16"
and update the root "storybook" dependency from "^10.2.11" to "10.2.16" so all
`@storybook/`* packages are consistently pinned to 10.2.16; modify the
package.json entries for "`@storybook/addon-a11y`" and "storybook" accordingly and
run your package manager to lock the changes.

🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e0840065-4c43-46b6-9c68-6ca2729a1739

📥 Commits

Reviewing files that changed from the base of the PR and between 69ad7f0 and f884d4a.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (4)

• libs/form-component/.storybook/main.ts
• libs/form-component/.storybook/preview.tsx
• libs/form-component/package.json
• libs/form-component/src/app-components/Button/Button.stories.tsx

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.84%. Comparing base (97894a6) to head (f4c81a2).
⚠️ Report is 83 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #18818      +/-   ##
==========================================
+ Coverage   95.71%   95.84%   +0.12%     
==========================================
  Files        2587     3018     +431     
  Lines       33007    39575    +6568     
  Branches     4080     4849     +769     
==========================================
+ Hits        31593    37931    +6338     
- Misses       1069     1230     +161     
- Partials      345      414      +69     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[lassopicasso]

Very nice features to the storybook 👏