Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
rsc opened this issue Jul 23, 2023 · 3 comments
Open

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

rsc opened this issue Jul 23, 2023 · 3 comments
Labels
NeedsFix The path to resolution is known, but the work has not been done.
Milestone

Comments

@rsc
Copy link
Contributor

rsc commented Jul 23, 2023

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

@rsc rsc added the NeedsFix The path to resolution is known, but the work has not been done. label Jul 23, 2023
@rsc rsc added this to the Unreleased milestone Jul 23, 2023
@jimmyfrasche
Copy link
Member

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
Copy link
Contributor Author

rsc commented Jul 23, 2023

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 seankhliao changed the title playground: "Press Esc to move out of the Editor." x/playground: "Press Esc to move out of the Editor." Jul 24, 2023
@seankhliao
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
NeedsFix The path to resolution is known, but the work has not been done.
Projects
None yet
Development

No branches or pull requests

3 participants