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

[ndiego]

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.

jumping-around.mp4

Thought @WordPress/meta-design

[ryelle]

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]

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]

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]

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]

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