test(user-card): add a11y and visual tests

[ttaylor-stack]

SPARK-160

Added a11y and visual tests for the User Card component

After running the a11y tests, there are accessibility errors in additional bling due to the title not being sufficient for screen readers, so I've updated the component to add the aria-label

[changeset-bot]

⚠️ No Changeset found

Latest commit: 50689a9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	50689a9
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/698c5311cdcb0a00086236fa
😎 Deploy Preview	https://deploy-preview-2169--stacks-svelte.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 project configuration.

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	50689a9
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/698c53114dcb48000835b80f
😎 Deploy Preview	https://deploy-preview-2169--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 project configuration.

[mukunku]

Hey Tavian, just wanted to ask if these tests were AI written? I will spend a bit extra energy reviewing the tests if that's the case.

[ttaylor-stack]

Hey Tavian, just wanted to ask if these tests were AI written? I will spend a bit extra energy reviewing the tests if that's the case.

Partially, I had AI create them and then went through each and made some changes

[mukunku]

Thanks for the clarification Tavian, that helps 🙏🏾

I noticed the following visual tests looked a bit odd. Could you confirm these are correct?

• User Card Dark Large Looks like it's not wrapping correctly?
  • Docs link: https://deploy-preview-2169--stacks.netlify.app/product/components/user-cards/#large
  • Similar thing for the Small Large Test?
• Large New Contributor Maybe it's fine but I feel like it should all be in one line, seems like the container size is restricting everything to a new line which may not be the intended test case for this test?
  • Similar thing for Large Original Poster, Large User Badges
  • This is not the case for the regular size
• For Large Recognized Member the order of items in the markup doesn't seem to be exactly correct. The icon is missing also but not as big a deal I think:

  Docs	Test

  Same for the medium and small sizes too: I think the "recognized member" is meant to be on the bottom.

[ttaylor-stack]

Thanks for the clarification Tavian, that helps 🙏🏾

I noticed the following visual tests looked a bit odd. Could you confirm these are correct?

* [User Card Dark Large](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-large.ico) Looks like it's not wrapping correctly?
  
  * Docs link: https://deploy-preview-2169--stacks.netlify.app/product/components/user-cards/#large
  * Similar thing for the [Small Large Test?](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-sm-large.ico)

* [Large New Contributor](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-lg-new-contributor.ico) Maybe it's fine but I feel like it should all be in one line, seems like the container size is restricting everything to a new line which may not be the intended test case for this test?
  
  * Similar thing for [Large Original Poster](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-lg-original-poster.ico), [Large User Badges](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-lg-with-badges.ico)
  * This is not the case for [the regular size](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-new-contributor.ico)

* For [Large Recognized Member](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-lg-recognized-member.ico) the order of items in the markup doesn't seem to be exactly correct. The icon is missing also but not as big a deal I think:
    
    
    
    Docs
    
    
    Test
    
    
    
    <img alt="{9F2F1E33-DECE-4A05-9348-E56B15B577B3}" width="153" height="135" src="https://private-user-images.githubusercontent.com/4502154/547773002-1283be5b-f9f0-453d-83ab-7ec51d6d4926.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzA3Mzk5MjIsIm5iZiI6MTc3MDczOTYyMiwicGF0aCI6Ii80NTAyMTU0LzU0Nzc3MzAwMi0xMjgzYmU1Yi1mOWYwLTQ1M2QtODNhYi03ZWM1MWQ2ZDQ5MjYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDIxMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAyMTBUMTYwNzAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZWFhNzU2YTIwOTYwNGY2NzNhMjM1ZmRjODc0YjIzODI4ZjQzYTc2NGY4YzlkYzk4NzI4ODRmZmQxNTk2ZjlmNCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.KhwjbJC-x5wzvLyShwWjgy1BWM0T7FcUi3LAcC-RCUQ">
    
    <img alt="image" width="150" height="128" src="https://private-user-images.githubusercontent.com/4502154/547773690-1c1f3619-1148-4748-b294-626920f7c3f3.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzA3Mzk5MjIsIm5iZiI6MTc3MDczOTYyMiwicGF0aCI6Ii80NTAyMTU0LzU0Nzc3MzY5MC0xYzFmMzYxOS0xMTQ4LTQ3NDgtYjI5NC02MjY5MjBmN2MzZjMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDIxMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAyMTBUMTYwNzAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzllYjRmNjgyMWQ0YmRiYzQwNWUzN2MxYTBjYzFlODQxMjI0Zjk2YzExYjRkNGUyMjg4NmUwMThmODIzMWJlYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.KyOMR0niqWyBayFehu5FhXae9lMh16hOqqrJ7Xxu9Z8">
    
    
       
    Same for the [medium](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-recognized-member.ico) and [small](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-sm-recognized-member.ico) sizes too: I think the "recognized member" is meant to be on the bottom.

I'll fix those now

[mukunku]

Thanks for the changes, Tavian. Everything looks good to me now!