Merge pull request #552 from NBISweden/dev/shortcuts

Add shortcuts for save and search focus
NBISweden · Aug 5, 2022 · 40783bb · 40783bb
2 parents 926f435 + cc03327
commit 40783bb
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 8 deletions.
diff --git a/frontend/src/components/QuickAdd.tsx b/frontend/src/components/QuickAdd.tsx
@@ -11,10 +11,12 @@ export const QuickAdd = ({
   addIssueActivity,
   toastList,
   onToastListUpdate,
+  issueInputRef,
 }: {
   addIssueActivity: (pair: IssueActivityPair) => void;
   toastList: ToastMsg[];
   onToastListUpdate: (newToast: ToastMsg) => void;
+  issueInutRef: React.RefObject<HTMLInputElement>;
 }) => {
   const [activities, setActivities] = useState<IdName[]>([]);
   const [issue, setIssue] = useState<Issue>(null);
@@ -204,7 +206,6 @@ export const QuickAdd = ({
 
   const suggestionsRef = useRef(null);
   useEscaper(suggestionsRef, handleHideAutocomplete);
-  const issueInputRef = useRef(null);
 
   const handleInputToAutocompleteFocus = (event: any) => {
     event.preventDefault();
@@ -254,6 +255,7 @@ export const QuickAdd = ({
       <div className="row">
         <input
           id="input-issue"
+          aria-keyshortcuts="ctrl+a"
           ref={issueInputRef}
           autoComplete="off"
           className={getSearchClasses()}

diff --git a/frontend/src/pages/Help.tsx b/frontend/src/pages/Help.tsx
@@ -86,10 +86,10 @@ export const Help = () => {
         </p>
         <p className="help-info">
           Favourite rows can be given a custom name by editing the text area
-          next to the issue number. The custom name is only saved after clicking
-          on the <b>"Save Changes"</b> button. The original names of the rows
-          can be seen after hovering over the text area. When unfavouriting a
-          row, the custom name is reset to the original name.
+          next to the issue number. The custom name is saved after switching the
+          focus to another element on the page, or clicking away. The original
+          names of the rows can be seen after hovering over the text area. When
+          unfavouriting a row, the custom name is reset to the original name.
         </p>
         <Row
           key={1}
@@ -228,6 +228,19 @@ export const Help = () => {
             className="weektravel-img"
           />
         </div>
+        <h2 className="help-subtitle">Keyboard shortcuts</h2>
+        <p className="help-info">
+          The following keyboard shortcuts are currently available when
+          navigating on the spreadsheet:
+        </p>
+        <ul className="help-info">
+          <li>
+            <b>Ctrl + S</b> - Save changes
+          </li>
+          <li>
+            <b>Ctrl + A</b> - Switch the focus to the issue search component
+          </li>
+        </ul>
         <h2 className="help-subtitle">Known limitations</h2>
         <h3 className="help-h3">Double time entries</h3>
         <p className="help-info">

diff --git a/frontend/src/pages/Report.tsx b/frontend/src/pages/Report.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import {
   format as formatDate,
@@ -651,6 +651,8 @@ export const Report = () => {
 
   if (context.user === null) return <></>;
 
+  const issueInputRef = useRef(null);
+
   // Main content
   return (
     <>
@@ -680,7 +682,18 @@ export const Report = () => {
           />
           <HeaderUser username={context.user ? context.user.login : ""} />
         </header>
-        <main className="spreadsheet">
+        <main
+          className="spreadsheet"
+          onKeyDown={(e) => {
+            if (e.key.toLowerCase() === "s" && e.ctrlKey) {
+              e.preventDefault();
+              handleSave();
+            } else if (e.key.toLowerCase() === "a" && e.ctrlKey) {
+              e.preventDefault();
+              issueInputRef.current.focus();
+            }
+          }}
+        >
           {favorites && favorites.length > 0 && (
             <DragDropContext onDragEnd={onDragEnd}>
               <section className="favorites-container">
@@ -858,6 +871,7 @@ export const Report = () => {
                 addIssueActivity={addIssueActivityHandler}
                 toastList={toastList}
                 onToastListUpdate={handleToastListUpdate}
+                issueInputRef={issueInputRef}
               ></QuickAdd>
             </div>
             {toastList.length > 0 && (
@@ -869,7 +883,11 @@ export const Report = () => {
                   <p role="status">⚠ You have unsaved changes</p>
                 )}
               </div>
-              <button className="basic-button save-button" onClick={handleSave}>
+              <button
+                className="basic-button save-button"
+                aria-keyshortcuts="ctrl+s"
+                onClick={handleSave}
+              >
                 Save changes
               </button>
             </div>