search

WordPress / wporg-theme-directory

12 stars 6 forks source link

Sidebar jumps around when selecting style variations and patterns in the Theme Previewer #130

Closed ndiego closed 4 weeks ago

ndiego commented 4 weeks ago

Related to #126

This is not necessarily a bug, but the behavior felt odd. When you click on a style variation or a pattern in the sidebar of the Theme Previewer, it jumps around depending on how far down the sidebar you have scrolled. I would expect the sidebar to not change position at all.

https://github.com/WordPress/wporg-theme-directory/assets/4832319/1a3ac210-a11f-4a47-9b3b-94f361796144

Thought @WordPress/meta-design

ryelle commented 4 weeks ago

I think this has to do with the fact that the entire ul element is focused/focusable, so when it gets focus (which happens with both keyboard and mouse), the browser assumes it needs to be in view, and it fills the screen.

I don't know if there's a way to avoid that and still keep the accessibility expectation that the whole list is focusable.

ndiego commented 4 weeks ago

I think this has to do with the fact that the entire ul element is focused/focusable, so when it gets focus (which happens with both keyboard and mouse), the browser assumes it needs to be in view, and it fills the screen.

Gotcha, not the end of the world. Just a bit jarring.

StevenDufresne commented 4 weeks ago

I also noticed this, it's disorienting.

Do you think preventScroll would help here? https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#preventscroll

jasmussen commented 4 weeks ago

It makes you lose your place, that can't be great for accessibility, the focus rectangle can scroll out of view too. It would be good to look at ways to address this; does the ul element need to be focused on every click?

ryelle commented 4 weeks ago

The list element needs to be focusable because of the semantics of a listbox. I can look into preventScroll, that might help.