Update skiplink implementation (#10535)

* Update skiplink implementation

* Create one skiplink to the left side bar

* Update skiplink docstrings

* Make createSkiplLink a private method

* Add missing space and correct skiplink

packages/application-extension/style/base.css

@@ -7,27 +7,3 @@
 #jp-MainLogo {
   width: calc(var(--jp-private-sidebar-tab-width) + var(--jp-border-width));
 }
-
-.jp-skiplink {
-  position: absolute;
-  top: -100em;
-}
-
-.jp-skiplink:focus-within {
-  position: absolute;
-  z-index: 10000;
-  top: 0;
-  left: 46%;
-  margin: 0 auto;
-  padding: 1em;
-  width: 15%;
-  box-shadow: var(--jp-elevation-z4);
-  border-radius: 4px;
-  background: var(--jp-layout-color0);
-  text-align: center;
-}
-
-.jp-skiplink:focus-within a {
-  text-decoration: underline;
-  color: var(--jp-content-link-color);
-}

packages/application/src/shell.ts

@@ -396,12 +396,12 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
     }
 
     // Skip Links
-    const skipLinkWidgetHandler = (this._skipLinkWidgetHandler = new Private.SkipLinkWidgetHandler(
+    const skipLinkWidget = (this._skipLinkWidget = new Private.SkipLinkWidget(
       this
     ));
 
-    this.add(skipLinkWidgetHandler.skipLinkWidget, 'top', { rank: 0 });
-    this._skipLinkWidgetHandler.show();
+    this.add(skipLinkWidget, 'top', { rank: 0 });
+    this._skipLinkWidget.show();
 
     // Wire up signals to update the title panel of the simple interface mode to
     // follow the title of this.currentWidget
@@ -1394,7 +1394,7 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
   private _vsplitPanel: Private.RestorableSplitPanel;
   private _topHandler: Private.PanelHandler;
   private _menuHandler: Private.PanelHandler;
-  private _skipLinkWidgetHandler: Private.SkipLinkWidgetHandler;
+  private _skipLinkWidget: Private.SkipLinkWidget;
   private _titleWidgetHandler: Private.TitleWidgetHandler;
   private _bottomPanel: Panel;
   private _mainOptionsCache = new Map<Widget, DocumentRegistry.IOpenOptions>();
@@ -1733,80 +1733,56 @@ namespace Private {
     private _lastCurrent: Widget | null;
   }
 
-  export class SkipLinkWidgetHandler {
+  export class SkipLinkWidget extends Widget {
     /**
-     * Construct a new skipLink widget handler.
+     * Construct a new skipLink widget.
      */
     constructor(shell: ILabShell) {
-      const skipLinkWidget = (this._skipLinkWidget = new Widget());
-      const skipToFilterFiles = document.createElement('a');
-      skipToFilterFiles.href = '#';
-      skipToFilterFiles.tabIndex = 1;
-      skipToFilterFiles.text = 'Skip to Filter Files';
-      skipToFilterFiles.className = 'skip-link';
-      skipToFilterFiles.addEventListener('click', this);
-      skipLinkWidget.addClass('jp-skiplink');
-      skipLinkWidget.id = 'jp-skiplink';
-      skipLinkWidget.node.appendChild(skipToFilterFiles);
+      super();
+      this.addClass('jp-skiplink');
+      this.id = 'jp-skiplink';
+      this._shell = shell;
+      this._createSkipLink('Skip to left side bar');
     }
 
     handleEvent(event: Event): void {
       switch (event.type) {
         case 'click':
-          this._focusFileSearch();
+          this._focusLeftSideBar();
           break;
       }
     }
 
-    private _focusFileSearch() {
-      const input = document.querySelector(
-        '#filename-searcher .bp3-input'
-      ) as HTMLInputElement;
-      input.focus();
-    }
-
     /**
-     * Get the input element managed by the handler.
+     * Handle `after-attach` messages for the widget.
      */
-    get skipLinkWidget(): Widget {
-      return this._skipLinkWidget;
-    }
-
-    /**
-     * Dispose of the handler and the resources it holds.
-     */
-    dispose(): void {
-      if (this.isDisposed) {
-        return;
-      }
-      this._isDisposed = true;
-      this._skipLinkWidget.node.removeEventListener('click', this);
-      this._skipLinkWidget.dispose();
+    protected onAfterAttach(msg: Message): void {
+      super.onAfterAttach(msg);
+      this.node.addEventListener('click', this);
     }
 
     /**
-     * Hide the skipLink widget.
+     * A message handler invoked on a `'before-detach'`
+     * message
      */
-    hide(): void {
-      this._skipLinkWidget.hide();
+    protected onBeforeDetach(msg: Message): void {
+      this.node.removeEventListener('click', this);
+      super.onBeforeDetach(msg);
     }
 
-    /**
-     * Show the skipLink widget.
-     */
-    show(): void {
-      this._skipLinkWidget.show();
+    private _focusLeftSideBar() {
+      this._shell.expandLeft();
     }
+    private _shell: ILabShell;
 
-    /**
-     * Test whether the handler has been disposed.
-     */
-    get isDisposed(): boolean {
-      return this._isDisposed;
+    private _createSkipLink(skipLinkText: string): void {
+      const skipLink = document.createElement('a');
+      skipLink.href = '#';
+      skipLink.tabIndex = 1;
+      skipLink.text = skipLinkText;
+      skipLink.className = 'skip-link';
+      this.node.appendChild(skipLink);
     }
-
-    private _skipLinkWidget: Widget;
-    private _isDisposed: boolean = false;
   }
 
   export class TitleWidgetHandler {

packages/application/style/base.css

@@ -95,3 +95,4 @@ body {
 @import './buttons.css';
 @import './sidepanel.css';
 @import './titlepanel.css';
+@import './skiplink.css';

packages/application/style/skiplink.css

@@ -0,0 +1,29 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+|
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+.jp-skiplink {
+  position: absolute;
+  top: -100em;
+}
+
+.jp-skiplink:focus-within {
+  position: absolute;
+  z-index: 10000;
+  top: 0;
+  left: 46%;
+  margin: 0 auto;
+  padding: 1em;
+  width: 15%;
+  box-shadow: var(--jp-elevation-z4);
+  border-radius: 4px;
+  background: var(--jp-layout-color0);
+  text-align: center;
+}
+
+.jp-skiplink:focus-within a {
+  text-decoration: underline;
+  color: var(--jp-content-link-color);
+}

packages/filebrowser/src/browser.ts

@@ -188,7 +188,6 @@ export class FileBrowser extends Widget {
       forceRefresh: true
     });
     this._filenameSearcher.addClass(FILTERBOX_CLASS);
-    this._filenameSearcher.id = 'filename-searcher';
 
     this.layout.removeWidget(this._filenameSearcher);
     this.layout.removeWidget(this.crumbs);