search

sveltejs / sites

Monorepo for the sites in the Svelte ecosystem
https://svelte.dev
MIT License
286 stars 123 forks source link

REPL user menu is inaccessible #494

Closed brunnerh closed 1 year ago

brunnerh commented 1 year ago

This: image (/src/routes/(authed)/repl/[id]/UserMenu.svelte)

The menu can only be used via mouse and lacks semantic roles.

Implementing a proper menu is non-trivial, though. Especially getting all the keyboard interactions and focus management right.

User name and avatar should probably be a button that only opens the menu on click. That change alone would go a long way.

geoffrich commented 1 year ago

Thanks for the callout, I'm working on a fix.

I'll probably opt for a simple disclosure pattern with a button, since ARIA menu usually isn't the right pattern for website navigation like this.

geoffrich commented 1 year ago

Opened an implementation in https://github.com/sveltejs/svelte/pull/8831, feedback welcome. It's in draft, but only because it's waiting on a site-kit release

brunnerh commented 1 year ago

Looks good, also appreciate that it fixes the vertical alignment of name & icon, that has been bugging me for a while 😄.

One note, I have moved from :focus to :focus-visible for most scenarios, that way you usually do not get stuck with an unnecessary focus style when clicking a button (since focus remains unlike hover).