Use 'ESC' to close keyboard help docs when focused (#45)

This does not work for reference docs due to the keydown event happening in an iframe

Author: microbit-grace

webapp/src/container.tsx

@@ -697,6 +697,12 @@ export class SideDocs extends data.Component<SideDocsProps, SideDocsState> {
             || this.state.docsUrl != nextState.docsUrl;
     }
 
+    protected handleOnKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {
+        if (ev.key == "Escape") {
+            this.collapse();
+        }
+    }
+
     renderCore() {
         const { sideDocsCollapsed, docsUrl } = this.state;
         const isRTL = pxt.Util.isUserLanguageRtl();
@@ -713,7 +719,7 @@ export class SideDocs extends data.Component<SideDocsProps, SideDocsState> {
             <button id="sidedocstoggle" role="button" aria-label={sideDocsCollapsed ? lf("Expand the side documentation") : lf("Collapse the side documentation")} className="ui icon button large" onClick={this.toggleVisibility}>
                 <sui.Icon icon={`icon inverted chevron ${showLeftChevron ? 'left' : 'right'}`} />
             </button>
-            <div id="sidedocs">
+            <div id="sidedocs" onKeyDown={this.handleOnKeyDown}>
                 <div id="sidedocsframe-wrapper">
                     {this.renderContent(url, isBuiltIn, lockedEditor)}
                 </div>