fix: avatar list accessibility

[jsomsanith-tlnd]

What is the problem this PR is trying to solve?
Avatar list component is not accessible

(SR = Screen Reader)

1. The semantic is not right. It's a list of elements but it's a succession of divs. SR doesn't announce that as a list. In fact it should announce that as a list of users.

2. On big lists with ellipsis, the ellipsis is a text (example: + 97). But it's not understandable, out of context. And with the previous issue about semantic, the context (which is a list of users) is not here.

What is the chosen solution to this problem?

1. Use ul/li to create the list. Add an aria-label users, so SR

• will announce a list "users",
• tell the index of the focused element,
• the number of elements in the list

2. Add an aria-label with a more complete string (example: +97 more user(s))

[domyen]

Nice this is amazing. According to Chromatic here there's extra space added to the bottom of this component which could affect visual alignment. This usually happens if there's extra whitespace inside of an inline/inline-block element (in this case I think it's the li).

Can you try removing the whitespace from around the li in the code if there is any?

Alternatively a few CSS hacks (which are OK by me):

• set li to display: inline-flex
• set li to font-size:0 which eliminates the whitespace

[kylesuss]

🚀 PR was released in v0.0.23 🚀