Accessibility improvement: Add a role, label, and voiceover to the "close" X button

[arielgreen]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Expected Result:

The "close" X should have a role, label, and voiceover

Actual Result:

There is no role, label, or voiceover to the "close" X button

Action Performed:

1. Turn on Screen Reader or Voiceover
2. Launch the Expensify.cash app or website
3. Swipe or click into any menu that has an X "close" button. For example:

• ( + ) > New Chat > X
• ( + ) > Request Money > X
• ( + ) > New Group > X
• tap avatar icon > X
• tap search 🔍 icon > X

4. Notice that the X "Close" button doesn't have a role, label, or voiceover component.

Platform:

• Windows/JAWS/Chrome
• MACOs/Voiceover/Safari
• Android/Talkback
• iOS/Voiceover
• MacWebapp/Voiceover

Notes/Photos/Videos:

Video - https://user-images.githubusercontent.com/37308300/119419108-7dcc8000-bcc7-11eb-9036-bb53c6e951b7.mp4

Upwork job link - https://www.upwork.com/jobs/~013b962eb299963c76

View all open jobs on Upwork

[parasharrajat]

@michaelhaxhiu There are couple of good reasons we want things to be accessible. Here the brief information how web will tackle this https://necolas.github.io/react-native-web/docs/accessibility/.

And https://reactnative.dev/docs/0.63/accessibility for native devices.

[michaelhaxhiu]

Upwork job posted here for $250 - https://www.upwork.com/jobs/~013b962eb299963c76

[dklymenk]

Proposal

Should be as simple as adding

accessibilityRole="button"
accessibilityLabel="close"

here

https://github.com/Expensify/Expensify.cash/blob/c85ded0f70fd744ac67e53816c311b060ac68af9/src/components/HeaderWithCloseButton.js#L76-L79

and since IOU modal doesn't use the HeaderWithCloseButton component also add that here
https://github.com/Expensify/Expensify.cash/blob/8b979de2cf00deafbba85c5c139f6d78cd1fd3f2/src/pages/iou/IOUModal.js#L294-L297

But that's just the basics. Since we don't hardcode stings I'll also need to add "close" to translations in a similar way it was done in this PR.

Here is how it's going to work on android for example (don't forget to turn on the sound):

3102.mp4

EDIT: Added an android video example.

[stitesExpensify]

Looks good to me!

[michaelhaxhiu]

Looks good to me too!

@dklymenk going to hire you in Upwork and assign this GH to you. BTW - you have a great avatar pic btw, love south park.

[dklymenk]

Submitted a PR

[michaelhaxhiu]

Set a reminder for my self to pay @dklymenk on June 10 (to allow 7 days for any potential regression discoveries/fixes).

[iwiznia]

Found a regression here, please hold on payment

[michaelhaxhiu]

Awaiting your thumbs up to pay the contributor @iwiznia

[iwiznia]

This is the new PR #3525 and it was already merged.