fix(ux): A11Y: correct description of People tab

Stefan Latsarevichrequested to merge
s.latsarevich/k3k-web-frontend:2154-merge-num-and-content-into-one into main

fix(MenuTabs): correct A11Y description of People tab

  • Used presentation role to deliver intention of visible numeric value next to the (en) label "People", though this role have not removed number from A11Y Tree, it still got pronounced, therefore aria-hidden attribute is used.

  • With number being only visually meaningful we have to deliver missing message to visually impared people, for this we created container span that hold explanation of visual numeric value.

  • Since in the conference there can be at least one participant, we created two separate translations that pluralize message.

  • We connect to the explanation via aria-describedby attribute which causes NVDA to pronounce it after element tab resulting in a string like "People, tab, You are the only participant in the conference., 2 of 3" instead of "People You are the only participant in the conference., tab, 2 of 3"

Since this implementation doesn’t fully align with the acceptance criteria, I’d like to hear your thoughts on the approach. One issue with the acceptance criteria is that it doesn’t account for pluralization, so while addressing that, I opted for a different way to convey the message that we are the only ones in the room.

Closes #2154

Merge request reports