Accessibility issues regarding interactive elements

[Bookie0]

There are some severe issues from an accessibility standpoint regarding almost all interactive elements such as buttons, inputs, and dropdown items.

First of all, since for some reason you guys are using div instead of a proper button for interactive elements, you can't tab into them. This is not good for keyboard users. If you are set on using divs, make sure to at least add tabIndex to them so they can be accessed with a keyboard. But preferably, change it to a real button lol. Make sure to also add a nice :focus state.

Next, items in the dropdown should also be accessible by keyboard. In the "Editor options" dropdown, only the "Documentation" and "Send Feedback" items can be tab-able because they are links, while the rest of the items are not. Once you make the other items focusable, you should probably be able to use the top/bottom arrow keys to navigate them, because tab should be used to jump to another element that isn't in the dropdown.

Next, the project title input, while focusable, does not have any styles indicating that it is focusable apart from highlighting the text inside. You should add least add a border around the input. It's also not clear that you can even edit the name of the project in the first place, but that's another issue.

Finally, interactive icons should have aria-labels for screen readers. You could alternatively include tooltips on hover which would make the icon's significance clearer.

[Bookie0]

[Bookie0]

this is still an issue...

[Bookie0]

Helloooooo!!!