fix(avatars): status ring styling and accessibility

[jzempel]

Description

This PR addresses two problems with the Avatar component:

• missing box-shadow status ring (due to stricter & reference with styled-components v7)
• problematic statusLabel accessibility structure detailed in the image below

Detail

Checklist

• 👌 design updates will be Garden Designer approved (add the designer as a reviewer)
• 🌐 demo is up-to-date (npm start)
• ⬅️ renders as expected with reversed (RTL) direction
• ⚫ renders as expected in dark mode
• 🤘 renders as expected with Bedrock CSS (?bedrock)
• 💂‍♂️ includes new unit tests. Maintain existing coverage (always >= 96%)
• ♿ tested for WCAG 2.1 AA accessibility compliance
• 📝 tested in Chrome, Firefox, Safari, and Edge

[ze-flo]

Isn't data-icon-status needed?

react-components/packages/avatars/src/styled/StyledStatusIndicatorBase.ts

Lines 57 to 64 in 220a8ef

	&[data-icon-status='transfers'] {
	transform: scale(${props.theme.rtl ? -1 : 1}, 1);
	}
	/* stylelint-disable-next-line selector-no-qualifying-type */
	&[data-icon-status='away'] circle {
	display: none; /* [1] */
	}

[jzempel]

Yes, good catch