feat: add skiplink

packages/application-extension/src/index.tsx

@@ -972,44 +972,6 @@ const JupyterLogo: JupyterFrontEndPlugin<void> = {
   }
 };
 
-class SkipLinkWidget extends Widget {
-
-  constructor (){
-    super();
-
-    this.addClass("jp-skiplink");
-    this.a = document.createElement("a");
-    this.node.appendChild(this.a);
-  }
-
-  readonly a: HTMLAnchorElement;
-}
-
-const skipLink: JupyterFrontEndPlugin<void> = {
-  id: '@jupyterlab/application-extension:skip-link',
-  autoStart: true,
-  requires: [ILabShell],
-  activate: (app: JupyterFrontEnd, shell: ILabShell) => {
-    const skipLinkWidget = new SkipLinkWidget();
-
-    skipLinkWidget.a.href = "#";
-    skipLinkWidget.a.text = "Skip to Content";
-    skipLinkWidget.a.tabIndex = 1;
-    skipLinkWidget.a.className = "skip-to-content";
-    skipLinkWidget.a.addEventListener('focus', e => {
-      skipLinkWidget.node.classList.toggle("jp-skiplink--focus", true)
-    })
-    skipLinkWidget.a.addEventListener('blur', e => {
-      skipLinkWidget.node.classList.toggle("jp-skiplink--focus", false)
-    })
-    // skipLinkWidget.node.tabIndex = 1;
-
-    skipLinkWidget.id = 'jp-skiplink';
-
-    shell.add(skipLinkWidget, 'top', { rank: 0 });
-  }
-};
-
 /**
  * Export the plugins as default.
  */
@@ -1022,7 +984,6 @@ const plugins: JupyterFrontEndPlugin<any>[] = [
   notfound,
   busy,
   sidebar,
-  skipLink,
   shell,
   status,
   info,

packages/application-extension/style/base.css

@@ -29,5 +29,5 @@
 
 .jp-skiplink--focus a {
   text-decoration: underline;
-  color: #106ba3;
+  color: var(--jp-content-link-color);
 }

packages/application/src/shell.ts

@@ -336,6 +336,31 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
       rootLayout.insertWidget(2, this._menuHandler.panel);
     }
 
+    // Skip Links
+    const skipLinkWidget = (this._skipLinkWidget = new Widget());
+    const skipToFilterFiles = document.createElement('a');
+    const toggleSkipLink = (toShow: boolean) => {
+      skipLinkWidget.node.classList.toggle('jp-skiplink--focus', toShow);
+    };
+    skipToFilterFiles.href = '#';
+    skipToFilterFiles.tabIndex = 1;
+    skipToFilterFiles.text = 'Skip to Filter Files';
+    skipToFilterFiles.className = 'skip-to-content';
+    skipToFilterFiles.addEventListener('focus', e => toggleSkipLink(true));
+    skipToFilterFiles.addEventListener('blur', e => toggleSkipLink(false));
+    skipToFilterFiles.addEventListener('click', e => {
+      const input = document.querySelector(
+        '#filename-searcher .bp3-input'
+      ) as HTMLInputElement;
+      console.log('awesome', input);
+      input.focus();
+    });
+    skipLinkWidget.addClass('jp-skiplink');
+    skipLinkWidget.id = 'jp-skiplink';
+    skipLinkWidget.node.appendChild(skipToFilterFiles);
+    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
     this.currentChanged.connect((sender, args) => {
@@ -1210,6 +1235,7 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
   private _headerPanel: Panel;
   private _topHandler: Private.PanelHandler;
   private _menuHandler: Private.PanelHandler;
+  private _skipLinkWidget: Widget;
   private _titleWidget: Widget;
   private _bottomPanel: Panel;
   private _mainOptionsCache = new Map<Widget, DocumentRegistry.IOpenOptions>();

packages/filebrowser/src/browser.ts

@@ -182,6 +182,7 @@ 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);