x/playground: "Press Esc to move out of the Editor."

[rsc]

When I use play.golang.org today, clicking anywhere in the text box makes a notice box appear at the top that says "Press Esc to move out of the Editor." If I click on the bar itself, it goes away. If I click on a different browser window, the bar goes away. When I click back to that window, the bar comes back. This is incredibly distracting.

I assume the bar has been added as part of accessibility work, but it seems like this specific implementation cannot possibly be required to be accessible. I have never seen a bar like that in any other text box I have ever used on any web site, including for example Gmail, and I am sure plenty of accessibility effort has gone into Gmail.

We should revert the CL that introduced this flickery bar and find a better way.

/cc @jamalc

[jimmyfrasche]

Something extra is needed for text boxes that override the default behavior of the tab key for moving focus out of the text box.

Having a notice before you enter the textbox lets keyboard/screen reader users know that a special method is required to escape the text box.

A lot of similar components use an aria live region for this so a screen reader will say something but this is incorrect as sighted users who do not use the mouse, for whatever reason, will not be informed.

In this case, the flicker could be avoided by using visibility: hidden on the message so that it takes up the same amount of vertical space whether it's displayed or not. That would help keyboard users. But, for low vision or blind screen reader users, the message won't be delivered to the screen reader until after the virtual cursor moves past where the message is so they'll never get the message. Similarly, there's a screen reader only copy of the message after the textarea which the virtual cursor won't visit until after they've figured out how to escape on their own. So a live region would need to be used in tandem with the banner.

However, this is all very complex with a lot of moving parts when there is a gordian knot cutting solution: just always show the banner before the textarea. No javascript necessary, everyone wins.

[rsc]

For what it's worth, the notice is not "before you enter the textbox". It appears above the box after you enter the box. It's not even clear to me whether screen readers would read this text since it appears before the current cursor. Perhaps they still will.

I agree that a simple, small unobtrusive note above the textbox in ordinary text (on the plain white background, not in its own box) that is always displayed would be preferable to the flickery box.

[seankhliao]

on mobile, the banner seems to always be there taking up screen estate with no way to dismiss it, even though there's no esc key available to press