fix: checkbox invalid message to match figma kit

[riddhybansal]

Closes #18033

CheckboxGroup component renders the invalidText at the different position from the figma library.
With orientation="horizontal", invalidText shows at the right of the Checkboxs, and I expected it to be shown at the bottom.

Changelog

Changed

• Seperated the container of error message from the flex container of radio buttons and hence modified the classes

Testing / Reviewing

Go to checkbox and check if invalid message is rendered correctly at bottom

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	7c78489
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/673db5288a2d2f000863d494
😎 Deploy Preview	https://deploy-preview-18057--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	7c78489
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/673db5289edd3c0008b24c6f
😎 Deploy Preview	https://deploy-preview-18057--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	7c78489
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/673db5281332eb00089711c4
😎 Deploy Preview	https://deploy-preview-18057--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 82.21%. Comparing base (126c4ed) to head (7c78489).
Report is 25 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #18057      +/-   ##
==========================================
+ Coverage   82.10%   82.21%   +0.11%     
==========================================
  Files         404      404              
  Lines       14107    14200      +93     
  Branches     4397     4513     +116     
==========================================
+ Hits        11582    11674      +92     
- Misses       2362     2363       +1     
  Partials      163      163              

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

---

🚨 Try these New Features:

• Flaky Tests Detection - Detect and resolve failed and flaky tests
• JS Bundle Analysis - Avoid shipping oversized bundles

[guidari]

Hey Riddhi, It is looking good! Just one thing.
I think we should keep the invalid and readonly message inside the fieldset. If you test with VO in the current Storybook, you’ll notice that they are grouped together, which helps the screen reader user understand that the message is part of the same group label.
We can also confirm that with Raghu if needed.

[riddhybansal]

Hey Riddhi, It is looking good! Just one thing. I think we should keep the invalid and readonly message inside the fieldset. If you test with VO in the current Storybook, you’ll notice that they are grouped together, which helps the screen reader user understand that the message is part of the same group label. We can also confirm that with Raghu if needed.

Oh I see what you are saying !!

[riddhybansal]

Hey @guidari Look at this found an alternative way to fix that bug . Lemme know what do you think about it ? We can modify the test case if its a good approach to look from accessibility pov.

[guidari]

LGTM! 🚀

[alisonjoseph]

This does technically fix the bug, however I think it would be preferable if we just update the styles vs. changing the underlying html structure. I believe you should be able to add a inline-size (width) of 100% to the invalid or warn text when its horizontal and it will display correctly below the checkboxes.

[carbon-automation]

Hey there! v11.71.0 was just released that references this issue/PR.