Add tabindex to and focus styling to launcher cards.

jupyterlab · Jun 15, 2019 · 774dc2b · 774dc2b
1 parent eaf0848
commit 774dc2b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 9 deletions.
diff --git a/packages/launcher/src/index.tsx b/packages/launcher/src/index.tsx
@@ -185,6 +185,9 @@ export class Launcher extends VDomRenderer<LauncherModel> {
       }
     }
 
+    // The tabindex of cards in each category are separated by 100.
+    let tabIndexStep = 100;
+
     // Now create the sections for each category
     orderedCategories.forEach(cat => {
       const item = categories[cat][0] as ILauncher.IItemOptions;
@@ -203,20 +206,25 @@ export class Launcher extends VDomRenderer<LauncherModel> {
             </div>
             <div className="jp-Launcher-cardContainer">
               {toArray(
-                map(categories[cat], (item: ILauncher.IItemOptions) => {
-                  return Card(
-                    kernel,
-                    item,
-                    this,
-                    this._commands,
-                    this._callback
-                  );
-                })
+                map(
+                  categories[cat],
+                  (item: ILauncher.IItemOptions, tabindex: number) => {
+                    return Card(
+                      kernel,
+                      item,
+                      tabIndexStep + tabindex + 1,
+                      this,
+                      this._commands,
+                      this._callback
+                    );
+                  }
+                )
               )}
             </div>
           </div>
         );
         sections.push(section);
+        tabIndexStep += 100;
       }
     });
 
@@ -338,6 +346,7 @@ export namespace ILauncher {
 function Card(
   kernel: boolean,
   item: ILauncher.IItemOptions,
+  tabindex: number,
   launcher: Launcher,
   commands: CommandRegistry,
   launcherCallback: (widget: Widget) => void
@@ -375,12 +384,22 @@ function Card(
       });
   };
 
+  // With tabindex working, you can now pick a kernel by tabbing around and
+  // pressing Enter.
+  let onkeypress = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      onclick();
+    }
+  };
+
   // Return the VDOM element.
   return (
     <div
       className="jp-LauncherCard"
       title={title}
       onClick={onclick}
+      onKeyPress={onkeypress}
+      tabIndex={tabindex}
       data-category={item.category || 'Other'}
       key={Private.keyProperty.get(item)}
     >

diff --git a/packages/launcher/style/base.css b/packages/launcher/style/base.css
@@ -117,10 +117,19 @@
   border-radius: var(--jp-border-radius);
 }
 
+.jp-LauncherCard:focus:not(:active) {
+  border: 1px solid var(--jp-brand-color1);
+  box-shadow: var(--jp-elevation-z6);
+}
+
 .jp-LauncherCard:hover {
   box-shadow: var(--jp-elevation-z6);
 }
 
+.jp-LauncherCard:active {
+  box-shadow: var(--jp-elevation-z4);
+}
+
 .jp-LauncherCard-icon {
   width: 100%;
   height: var(--jp-private-launcher-card-icon-height);