[low] Chrome + Jaws: Selected state of the invite members is not announced. #8671

Action Performed:

1. Using Chrome + Talkback , open URL staging.new.expensify.com
2. Navigate to Setting using Tab key and press Enter to activate.
3. Navigate to any workspace using Tab key and press Enter to activate.
4. Navigate to manage members using Tab key and press Enter to activate.
5. Navigate to invite using using Tab key and press Enter to activate.
6. Navigate to the members using Tab key and press Enter to activate.
7. Listen to the screen reader and observe the issue.

Expected Result:

When a member is selected for invitation, screen reader and other assistive technology should convey the information to the users.

Actual Result:

Selected state of the invite members is not announced by the screen reader.

HTML Code:
<div class="css-1dbjc4n r-1awozwy" style="flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal;"><div class="css-1dbjc4n" style="height: 40px; margin-right: 16px; width: 40px;"><div class="css-1dbjc4n r-633pao"><div class="css-1dbjc4n r-1mlwlqe r-1udh08x r-417010" style="border-radius: 40px; height: 40px; width: 40px;"><div class="css-1dbjc4n r-1niwhzg r-vvn4in r-u6sd8q r-4gszlv r-1p0dtai r-1pi2tsx r-1d2f490 r-u8s1d r-zchlnj r-ipm5af r-13qz1uu r-1wyyakw" style="background-image: url(&quot;https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/avatar_1.png&quot;);"></div><img alt="" draggable="false" src="https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/avatar_1.png" class="css-9pa8cd"></div></div></div><div class="css-1dbjc4n r-13awgt0"><div dir="auto" class="css-901oao css-nfaoni r-1udh08x" style="color: rgb(11, 27, 52); font-family: GTAmericaExp-Regular; font-size: 15px; font-weight: 700; height: 20px; line-height: 20px; text-align: left; text-decoration-line: none; white-space: nowrap;">Enedina Sunday</div><div dir="auto" class="css-901oao css-nfaoni r-1udh08x" style="color: rgb(125, 139, 143); font-family: GTAmericaExp-Regular; font-size: 13px; height: 20px; line-height: 20px; text-align: left; text-decoration-line: none;">06bhrlwc@test.com</div></div><div class="css-1dbjc4n r-1awozwy r-1777fci" style="align-self: center; background-color: rgb(255, 255, 255); border-color: rgb(236, 236, 236); border-radius: 14px; border-width: 1px; height: 28px; margin-left: 8px; width: 28px;"></div></div>

Other Occurrences:

Same issue repro on PRs #8751, #8689, #8494, #8760, #8804, #9093

Workaround:

Yes

Area issue was found in:

Manage members

Failed WCAG checkpoints

4.1.2

User impact:

Screen reader and other assistive technology users are not aware of the selected members.

Suggested resolution:

Ensure the screen reader announce the state of the invite member.

Refer to:
https://www.maxability.co.in/2016/03/08/aria-selected-state/

Platform:

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: v1.1.55-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Issue reported by: Stuti