Avatar: rework accessibility

[ianmcburnie]

I verified there's no existing issue for this bug.

• There are no existing issues

Current behavior

The avatar's accessibility label appears to be conveying signed in status & username, but I could argue that it should just simply convey that this a user profile pic, and what type of pic it is (i.e. signed-out, default, custom or ebay). This would create parity with what is onscreen.

Also, for custom image we have an image inside of an image, which doesn't seem right:

<div class="avatar" role="img" aria-label="Signed-in as Doggy">
    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt="profile pic"/>
</div>

Emptying the alt text would solve the problem.

Expected behavior

I wouldn't expect username to be conveyed in the alt text, as that is not displayed onscreen inside of the image (it is sometimes displayed adjacent as text). I like the way that GitHub employs a tooltip to display the username (and other details) when the avatar is inside of a link,

I would also expect that user's own sign in status can be deduced in the same way a sighted user does it: the presence of the signed out profile pic or not.

I think these changes will help make the avatar more flexible so that it can be used for the current user (which typically also used to deduce sign in status), for other users avatars (where no sign in status is needed) and when placed inside of interactive containers (e.g. buttons & links).

Skin version

Current