Revisions: Fix focus ring on the item container

[jarekmorawski]

Hi there! I noticed the focus ring in the Revisions panel is on each item's upper part instead of the whole container. I understand it's structured this way to make it easy for users to navigate to the Apply button using the keyboard, but the whole item is a button and as such should probably be highlighted.

[ramonjd]

Thanks for reporting.

This is due to there being two focusable buttons for each revision item: one to load the styles in the preview, and one for the Apply button. The border is from the former.

gutenberg/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js

Line 164 in 4e6bd4d

<Button

Buttons can't be nested, so the were placed next to each other.

Citing @jasmussen

it’s the “button” that lets you select that particular revision ... I’d also think it the better experience to surround the whole container

So we can try to make the list items focusable when navigating between list items, and then the buttons themselves would be tabbable children (?).

Anyway, I'm sure there'll be a way... 👍🏻

[ramonjd]

Added to the general group of follow up tasks too: #60450

[ramonjd]

I'm not sure if I'll get time to work on this anytime soon, but I had a quick play around adding the following props to the list elements:

						tabIndex={ 0 }
						onKeyDown={ ( event ) => {
							if ( event.key === 'Enter' ) {
								onChange( revision );
							}
						} }

With active/focus styles on them it works as I'd expect, but there are some accessibility concerns, primarily making assigning a keyboard listener to a non-interactive element.