[Avatar]: When a "link" displays the same in HCM when default and disabled

[Westbrook]

Description

Both the default and disabled variants of the Avatar leverage a yellow outline when delivered in HCM.

Feels like this would be related to the fact that <a> elements can't be disabled, so we'd need to delivery synthetic rules to this effect rather than relying on native rules as we might have with a <button>.

Steps to reproduce

1. Go to https://opensource.adobe.com/spectrum-css/avatar.html
2. Turn on high contrast mode
3. Observe both active and disabled avatars have yellow outlines (or the outline appropriate to your version of HCM when a link is active)

Expected behavior

Likely that the disabled Avatar uses the disabled text color, which is green in other contexts.

Screenshots

[Westbrook]

@jnurthen do you have any suggestions in this area?

[jnurthen]

If it is disabled it should probably not be rendered as a link. The fact that it takes keyboard focus and changes the hover style is just as much of an issue as the high contrast colour. I don't see any need to change the high contrast colour unless the other issues are also addressed.

[pfulton]

@Westbrook @jnurthen Spectrum CSS can remove the link markup from the disabled examples, but downstream consumers would also need to update their markup for this. Does that make sense for us to do, @Westbrook?

[Westbrook]

Sounds like a good path here, then there'd be no interactive border and no focus acceptance. Ship it!

[pfulton]

Tracking this in Jira via CSS-627

[pfulton]

Closed via #2265 - should be available starting in @spectrum-css/avatar@6.0.58