Access menus through keyboard navigation

nextcloud / spreed

🗨️ Nextcloud Talk – chat, video & audio calls for Nextcloud

https://nextcloud.com/talk

GNU Affero General Public License v3.0

1.63k stars 435 forks source link

Open PVince81 opened 3 years ago

PVince81 commented 3 years ago

Reported by @jancborchardt

[x] It doesn’t seem possible to get into any of the menus with only the keyboard: conversation menu in the navigation, menu next to "Start call" button, nor menu for participants
[ ] It’s not possible to reply to messages using the keyboard only: https://github.com/nextcloud/spreed/issues/3986
[ ] It’s not possible to switch tabs in the sidebar with keyboard only (enter key not working there)
[ ] avatar menu keyboard / focus not working: https://github.com/nextcloud/nextcloud-vue/issues/613

PVince81 commented 3 years ago

make participant list is tab-abble:
- have aria-label also contain state icon information (so no need to tab over non-clickable call icons like phone, video, etc)
- see if avatar context menu is accessible

PVince81 commented 3 years ago

[ ] need to autofocus search box in emoji box after opening
[ ] emoji picker not keyboard friendly and not screen reader friendly (search box as too generic label, one doesn't know that we are in the emoji picker)

PVince81 commented 3 years ago

[ ] hitting enter on a conversation link in the left nav bar should jump to the "new message" field (only clicking the link makes it jump)

PVince81 commented 3 years ago

Actions menu don't work directly, only the second time: https://github.com/nextcloud/nextcloud-vue/issues/1760

jancborchardt commented 3 years ago

Also cc @ma12-co on this btw for accessibility. :)

PVince81 commented 3 years ago

three dots menus can now be open by keyboard, just tab there, hit enter and then use the arrow keys. fixed through https://github.com/nextcloud/nextcloud-vue/pull/1761

PVince81 commented 3 years ago

seems the tabs can be selected with the keyboard, but you need to use the arrow keys, not tab

when tabbing, at first I thought it was focussing on the second tab due to the bad border:

(I've highlighted the section element in the right panel)

but in fact, it's focussing on the panel below the tabs... so maybe we need to hide that border or change it to something less confusing