bug: The MessageOptions (triple dot when hovering over a message) requires reverse tabbing for accessibility to select menu items

[tedderple]

Describe the bug

A clear and concise description of what the bug is.

Accessibility issue on selecting MessageOptions for accessibility keyboard-only users

See screen cap of demo app: https://github.com/GetStream/stream-chat-react/assets/24303946/5f005942-0167-469b-bea7-985b82bc4416

We are seeing the same issue in our product that leverages Stream-chat-react

To Reproduce Use demo app provided here: https://getstream.io/chat/demos/team/

Steps to reproduce the behavior:

1. Hover over the MessageOptions (...) when the message is at the top of the page
2. Use keyboard navigation to navigate through the options ---> this works fine
3. Do the same for a message at the bottom of the chat and the options stack upwards
4. This then is difficult for accessibility users to navigate to because it requires navigating backwards for keyboard-only accessibility users

Expected behavior I believe that when MessageOptions opens, the focus should start at the first top item of the list

Screenshots

If applicable, add screenshots to help explain your problem. https://github.com/GetStream/stream-chat-react/assets/24303946/5f005942-0167-469b-bea7-985b82bc4416

Package version

• stream-chat-react: My company uses "[email protected]", but issue seen on your demo app too
• stream-chat-css:
• stream-chat-js:

Desktop (please complete the following information):

• OS: MacOS
• Browser: Seen on Chrome
• Version 122.0.6261.94