Better presentation of collapsed read receipts for screen reader users

[pvagner]

Your use case

What would you like to do?

After recent refactor of read receipts this part of the app is verry accessible to screen reader users. Collapsed read receipts group is reported as button to assistive tools and expanded group works similar to a popup menu with roving tabIndex and great keyboard navigation.
I would like to improve it a little bit more so the button reported to screen reader users when the group is collapsed would have meaningfull accessible name and would include state suggesting activating it pops up a menu.
The accessible name should be reported:

• When no one has read the message: not applicable since read receipt group is not displayed.
• When only one user has read the message: "%{displayName}s read"
• When two users have read a message: "%{displayName1}s and %{displayName2}s read"
• When three users have read a message: "%{displayName1}s, %{displayName2}s and %{displayName3}s read"
• When more than three users have read: "%{displayName1}s, %{displayName2}s and %{number}d others read"

"%{displayName}s" placeholders should be filled with display names of the users that have read the message ordered from most recent to earliest.

Why would you like to do it?

It's nice to have, polishes the experience even further, clearly duplicates the feature non screen reader users already have that they are getting brief information without expanding the read receipts group. And also it might be consistent with element-android when implemented like this.

How would you like to achieve it?

An aria-level and aria-haspopup properties should be used on the element with role=button.

Have you considered any alternatives?

No response

Additional context

No response

[pvagner]

Playing more with this using the tooltip text for the accessibility purposes might be a compromise to avoid code duplication.