Revisions: Fix focus ring on the item container #66642

Activity

1. jarekmorawski

   added

   [Feature] HistoryHistory, undo, redo, revisions, autosave.History, undo, redo, revisions, autosave.

   [Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).Changes that impact accessibility and need corresponding review (e.g. markup changes).

   [Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended

   on Oct 31, 2024
2. ramonjd commented on Nov 4, 2024

   

   ramonjd

   on Nov 4, 2024

   Member

   More actions

   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... 👍🏻
3. ramonjd commented on Nov 4, 2024

   

   ramonjd

   on Nov 4, 2024

   Member

   More actions

   Added to the general group of follow up tasks too: #60450
4. ramonjd commented on Nov 4, 2024

   

   ramonjd

   on Nov 4, 2024

   Member

   More actions

   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.
5. github-actions

   assigned

   ramonjd

   on Nov 6, 2024
6. github-actions

   added

   [Status] In ProgressTracking issues with work in progressTracking issues with work in progress

   on Nov 6, 2024
7. ramonjd

   closed this as completedin #66780on Nov 7, 2024