commit 35ea40d93acdd523fc7e6a117944ad600712f265
author prudhvikrishna <prudhvikrishna@google.com> Tue Jul 18 14:37:57 2023 -0700
committer Gopher Robot <gobot@golang.org> Thu Jul 20 18:18:36 2023 +0000
tree a1c8ee9ad163cbd096704577e0e331c5d7b0b9cf
parent 9bc7ea507e11e3e7b5cc7b8c6ce2706f83af39c3

_content: provide keyboard shortcut to avoid focus trap.

added 'Esc' key as shortcut to avoid focus trap for code editor in go   website.
https://screencast.googleplex.com/cast/NjM1MDM3ODI1MDUzNDkxMnwyMDllNGZlNi0yZA

Change-Id: I291505a335ddaa04fc440d2d3052e6b9a891f86f
Reviewed-on: https://go-review.googlesource.com/c/website/+/510875
Reviewed-by: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: Gopher Robot <gobot@golang.org>
Auto-Submit: Jamal Carvalho <jamal@golang.org>

_content/css/styles.css

diff --git a/_content/css/styles.css b/_content/css/styles.css
index 90f5acb..579f7a5 100644
--- a/_content/css/styles.css
+++ b/_content/css/styles.css
@@ -4606,7 +4606,8 @@
   background-color: var(--color-background-playground-input) !important;
 }
 .Playground-outputContainer,
-.Playground-output {
+.Playground-output,
+.Playground-preContainer {
   background: var(--color-background-code);
 }
 .Playground-inputContainer,
@@ -4620,6 +4621,15 @@
   border: var(--border-code);
   resize: vertical;
 }
+.Playground-preContainer {
+  border-bottom: var(--border-code);
+}
+.Playground-preContainer {
+  display: none;
+}
+.Playground-input:focus + .Playground-preContainer {
+  display: block;
+}
 .Playground-controls {
   display: flex;
   flex-wrap: wrap;

_content/index.md

diff --git a/_content/index.md b/_content/index.md
index 6ce2a26..8731f70 100644
--- a/_content/index.md
+++ b/_content/index.md
@@ -151,7 +151,11 @@
       <h2 class="HomeSection-header">Try Go</h2>
     </div>
     <div class="Playground-inputContainer">
-      <textarea class="Playground-input js-playgroundCodeEl" spellcheck="false" aria-label="Try Go">// You can edit this code!
+      <div class="Playground-preContainer">
+        <div style="font-family:Menlo, monospace; font-size: 0.875rem"> Press Esc to move out of the Editor. </div>
+      </div>
+      <textarea class="Playground-input js-playgroundCodeEl" spellcheck="false" aria-label="Try Go" aria-describedby="editor-description" id="code">
+// You can edit this code!
 // Click here and start typing.
 package main
 import "fmt"
@@ -159,6 +163,9 @@
   fmt.Println("Hello, 世界")
 }</textarea>
     </div>
+    <div class="screen-reader-only" id="editor-description" hidden>
+      Press Esc to move out of the Editor.
+    </div>
     <div class="Playground-outputContainer js-playgroundOutputEl">
       <pre class="Playground-output"><noscript>Hello, 世界</noscript></pre>
     </div>

_content/js/site.js

diff --git a/_content/js/site.js b/_content/js/site.js
index eecd9ad..a8edcf1 100644
--- a/_content/js/site.js
+++ b/_content/js/site.js
@@ -209,6 +209,26 @@
     handleNavigationDrawerInactive(header);
   }
 
+  function registerPlaygroundListeners() {
+    const textarea = document.getElementById('code');
+    const preContainer = document.querySelector('.Playground-preContainer');
+
+    textarea.addEventListener('keydown', e => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        textarea.blur();
+      }
+    });
+
+    textarea.addEventListener('blur', () => {
+      preContainer.style.display = 'none';
+    });
+    
+    textarea.addEventListener('focus', () => {
+      preContainer.style.display = 'block';
+    });
+  }
+
   /**
    * Attempts to detect user's operating system and sets the download
    * links accordingly
@@ -344,6 +364,7 @@
 
   window.addEventListener('DOMContentLoaded', () => {
     registerHeaderListeners();
+    registerPlaygroundListeners();
     setDownloadLinks();
     setThemeButtons();
     setVersionSpans();

_content/play.tmpl

diff --git a/_content/play.tmpl b/_content/play.tmpl
index adcc294..9aa1e72 100644
--- a/_content/play.tmpl
+++ b/_content/play.tmpl
@@ -42,8 +42,12 @@
   </div>
   <div class="Playground-inputContainer">
     <div id="wrap">
-    <textarea id="code" name="code" class="Playground-input js-playgroundCodeEl" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Try Go">{{if strings.Contains .URL "/play/p/"}}Loading share...
-{{else}}// You can edit this code!
+    <div class="Playground-preContainer">
+        <div style="font-family:Menlo, monospace; font-size: 0.875rem"> Press Esc to move out of the Editor. </div>
+    </div>
+    <textarea id="code" name="code" class="Playground-input js-playgroundCodeEl" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Try Go" aria-describedby="editor-description">{{if strings.Contains .URL "/play/p/"}}Loading share...
+{{else}}
+// You can edit this code!
 // Click here and start typing.
 package main
 
@@ -52,6 +56,9 @@
 func main() {
 	fmt.Println("Hello, 世界")
 }{{end}}</textarea>
+    <div class="screen-reader-only" id="editor-description" hidden>
+      Press Esc to move out of the Editor.
+    </div>
     </div>
   </div>
   <div class="Playground-outputContainer js-playgroundOutputEl">