A11y / Playground Block / Learn - Focus out of sequence/Open in new tab

[joedolson]

Type of feedback

//dev

Description

The element order of .wp-block-wordpress-playground-playground .wordpress-playground-main-container .wordpress-playground-header has been shifted using order: 2, causing it to receive focus before the three controls that visually precede it.

Changing the display order of focusable elements has significant accessibility problems when navigating by keyboard, because the keyboard focus jumps around in unexpected and unpredictable ways. It makes navigating significantly more difficult.

'Open in new tab' can be after the container, but if so it must be there both in the DOM and in the visual order.

Screenshots or screen recording (optional)

First screenshot shows the current visual:

Second screenshot shows the real order of objects, which is the order keyboard navigators and screen reader users will get:

[adamwoodnz]

@jonathanbossenger would you be able to raise this with the Playground team too please? I'm not going to be around for the next week 🙏

[jonathanbossenger]

@brandonpayton, would you be able to look into this as part of our a11y testing of the Playground block?

@joedolson while Brandon is helping us with playground block issues so that we can use it for Learn content, the best place to log playground block issues is in the playground tools repo.

[brandonpayton]

@jonathanbossenger yep, I can look into it.

Changing the display order of focusable elements has significant accessibility problems when navigating by keyboard, because the keyboard focus jumps around in unexpected and unpredictable ways. It makes navigating significantly more difficult.

@joedolson thanks for the report! This is a bit embarrassing as I did that intentionally because I thought it would be good for the link to come first in the focus order for those using assistive technologies, so I placed the link in the section header and changed the order because we wanted it rendered in the section footer.

I can just move the link and let it come last in the focus order since that is where it is displayed. https://github.com/WordPress/playground-tools/issues/344

[joedolson]

Your instincts were good; it probably is helpful for users of assistive technology to know they can open this in a new tab before activating it. However, keeping the focus sequence consistent with the visuals is also important.

And, overall, this is learnable; people who want it in a new tab will learn the location of that option and be able to use it. It's not a significant click distance to reach (as long as you haven't activated playground, anyway.)

[brandonpayton]

Your instincts were good; it probably is helpful for users of assistive technology to know they can open this in a new tab before activating it. However, keeping the focus sequence consistent with the visuals is also important.

Thanks for the feedback, @joedolson. It helps me learn!