[med] Keyboard Navigation: Chat: Focus order through messages is reversed bottom-to-top

[ogumen]

Action Performed:

Prerequisites:

• User has created personal account and is logged into same.
• User at least 1 chat session in history with several messages.

1. Using Chrome, open https://staging.new.expensify.com
2. Tab through the contents of the chat window and note in what order the elements are focused.

Expected Result:

The focus should follow the standard reading order of top-down, left-to-right.

Actual Result:

All of the elements in the chat window are focused in reverse order (bottom-up, left-to-right), making keyboard navigation very confusing. The same occurs with the reading order and scroll direction when the container has many messages (down moves up, up moves down).

HTML:
<div class="css-1dbjc4n r-13awgt0" style="transform: translateX(0px);"><div class="css-1dbjc4n r-13awgt0"><div class="css-1dbjc4n r-13awgt0"><div class="css-1dbjc4n r-1p0dtai r-1d2f490 r-6dt33c r-u8s1d r-zchlnj r-ipm5af" style="display: flex;"><div class="css-1dbjc4n r-13awgt0 r-1d5kdc7" style="background-color: rgb(242, 242, 242);"><div class="css-1dbjc4n r-13awgt0"><div class="css-1dbjc4n r-13awgt0 r-1udh08x" style="background-color: rgb(255, 255, 255); padding-bottom: 0px; padding-top: 0px;"><div class="css-1dbjc4n r-1777fci" id="drag-area" style="border-bottom-width: 1px; border-color: rgb(236, 236, 236); display: flex; height: 65px; padding-right: 20px;"><div class="css-1dbjc4n r-1awozwy r-18u37iz" style="padding-left: 20px;"><div class="css-1dbjc4n r-1awozwy r-13awgt0 r-18u37iz" style="justify-content: space-between; -webkit-box-pack: justify;"><div tabindex="0" class="css-1dbjc4n r-1awozwy r-1loqt21 r-13awgt0 r-18u37iz r-1otgn73">...</div>

Workaround:

No workaround

Area issue was found in:

Chat page

Failed WCAG checkpoints

2.4.3

User impact:

Users will be very confused by the inconsistent and shifting focus direction.

Suggested resolution:

Ensure that the DOM order for the elements matches the visual order. Do not use scripting to reverse the normal reading/focus order. The best option is to give users a way of selecting how they would like to read the chat history and adjust the visual elements accordingly.
https://a11y-guidelines.orange.com/en/web/components-examples/chatbot/
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

Platform:

Where is this issue occurring?

• Web

Version Number:
**Reproducible in staging?:**Yes
Reproducible in production?:
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:

Bug5187583_Keyboard_Navigation-Chat-Focus_order_through_messages_is_reversed_bottom-to-top.mp4

View all open jobs on GitHub