test(button-group): add a11y, visual tests

[dancormier]

This PR adds visual and accessibility tests for the s-btn-group component.

Note
When constructing these tests, I realized we had used -- to construct the radio modifier class (.s-btn-group--radio) instead of __. -- is reserved for denoting child elements of a component. This PR resolves that by changing the class to .s-btn-group__radio, which will result in a (easy to address) breaking change in the one place we use it: stacks-editor.

@giamir since we'll need to update Core to support the new button group design, would this be a good opportunity to also include the minor class syntax breaking change noted above?

In the button group redesign implementation, the radio modifierons-btn-group` no longer provides any unique styling. Consumers should remove any references to this modifier, but including it will not affect anything materially.

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	0d1f2de
🔍 Latest deploy log	https://app.netlify.com/sites/stacks/deploys/65e1c8c4a7f53700085c5e9c
😎 Deploy Preview	https://deploy-preview-1346--stacks.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.

[giamir]

Somehow the button group radio in the docs is now broken for me (cannot even focus on it). I haven't investigated further though.

For the tests I can see that the setup for the a11y and the visual tests is pretty similar. I would recommend to create something like button-group.test.setup.ts so that there is no need to duplicate many line of codes. You could also tests the form variations in the a11y tests if you want which probably makes sense (???).
If you go with the .setup.ts file approach we may want to add the *.setup.ts in this tsconfig to avoid creating unnecessary type for the production build.

I understand that we are introducing a small breaking change here both in Stacks Classic and Stacks Editor (which will depend on consumers upgrading the stacks classic css they use in their page).
Do you feel comfortable merging this change as part of v 2.1.0 or shall we wait for a future v2.2.0? I am asking because I would like to don't rush this through if possible due to enterprise release fixes we need to ship.

Apart from those minor things, the rest looks good.
Thanks @dancormier for adding the tests 🎉

[giamir]

@giamir since we'll need to update Core to support the #1630, would this be a good opportunity to also include the minor class syntax breaking change noted above?

Yep, I think that makes sense. Let's make sure to call it out in the release notes.

Class should be removed all together.

[giamir]

Few changes to make before we are able to merge this one.
Will circle back here when you finish the cleanup. :)
Thanks

[dancormier]

@giamir I've updated this PR with your suggested changes. Since your last review I:

• Removed all references to s-btn-group--radio and s-btn-group__radio
• Abstracted most button group test code to button-group.test.setup.ts
• Removed all but one form test (tests that wrap a button with form element)
• Added tests for buttons with badges
• Simplified the children tested

Note

The default, form, and radio test images render identically. This is as intended to test those unique children within the button group.

[giamir]

Outstanding work. Reads much better than before and great catch on those a11y failures. 🎉

I took the liberty to remove an unnecessary eslint-disable rule from the test setup.
Good to be merged :)