[High] Keyboard: Edit button is not accessible using keyboard.

[Stutikuls]

Action Performed:

1. Using Chrome browser, open the URL staging.new.expensify.com/r/85021985
2. Navigate to the Chat box using Tab key. 3. Send any emoji in the chat.
3. Check whether the edit button is accessible or not after sending the emoji.

Expected Result:

All the interactive elements must be operable by the keyboard. User should be able to accessible 'Edit' button by using Enter key.

Actual Result:

Edit button is not accessible using keyboard.

Other occurrences
Same issue also repro on #7849 -sent/received images is not accessible using keyboard.

Workaround:

Yes

Area issue was found in:

Chat Box

Failed WCAG checkpoints

2.1.1

User impact:

The keyboard users are not able to use the Edit button functionality as mouse users.

Suggested resolution:

Markup the Edit as native button and ensure all the keyboard event handlers are implemented to access it using the keyboard.

Refer to:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/button/button.html

Platform:

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

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

7580.-1.-Edit.button.is.not.accessible.using.keyboard.mp4

[melvin-bot]

@Stutikuls, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.