feat: add ability to focus actions

GIP-RECIA · Apr 18, 2023 · 19d9d34 · 19d9d34
1 parent 471d87f
commit 19d9d34
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 28 deletions.
diff --git a/client/src/assets/scss/editor.scss b/client/src/assets/scss/editor.scss
@@ -13,12 +13,14 @@ tldraw-editor {
     border-bottom-left-radius: $border-radius;
     background-color: var(--colors-panel);
     border: 1px solid var(--colors-panelContrast);
+    border-top: 0px;
 
     div {
       display: flex;
     }
 
-    .sharing-item {
+    button.sharing-item,
+    input.sharing-item {
       width: fit-content;
       min-width: $height;
       height: $height;
@@ -31,10 +33,13 @@ tldraw-editor {
       font-size: var(--fontSizes-1);
       font-family: var(--fonts-ui);
       color: var(--colors-text);
+      background: none;
+      outline: none;
+      border: 1px solid var(--colors-panel);
       user-select: none;
     }
 
-    a.sharing-item-enabled {
+    button.sharing-item-enabled {
       width: fit-content;
       min-width: $height;
       height: $height;
@@ -48,19 +53,28 @@ tldraw-editor {
       font-family: var(--fonts-ui);
       color: white;
       background-color: var(--colors-selected);
+      outline: none;
+      border: 1px solid var(--colors-panel);
       user-select: none;
     }
 
     input.input-join {
-      border: none;
-      outline: none;
       width: 280px;
       text-align: center;
+      outline: none;
+      border: 1px solid var(--colors-panel);
     }
 
-    .sharing-item:hover,
+    button.sharing-item:hover,
+    input.sharing-item:hover,
+    button.sharing-item:focus,
     input.input-join:focus {
       background-color: var(--colors-hover);
     }
+
+    button.sharing-item-enabled:focus {
+      color: var(--colors-selected);
+      background-color: var(--colors-hover);
+    }
   }
 }
diff --git a/client/src/components/Editor.tsx b/client/src/components/Editor.tsx
@@ -128,27 +128,30 @@ function Editor({
       <ToastContainer />
       <div className="sharing-container">
         {nextcloudUrl && !nextcloudSaveHide && userApi && !wantJoinRoom && (
-          <a
+          <button
+            type="button"
             className={`sharing-item${saveOnNextcloudState ? "-enabled" : ""}`}
             onClick={() => setSaveOnNextcloudState(!saveOnNextcloudState)}
             title={t("sharingItem.nextcloudSave") as string}
           >
             <FontAwesomeIcon icon={faCloud} />
-          </a>
+          </button>
         )}
         {wsUrl && !room && (
           <div>
             {!noShare && !readOnly && !wantJoinRoom && (
-              <a
+              <button
+                type="button"
                 className="sharing-item"
                 onClick={() => setRoom(uuidv4())}
                 title={t("sharingItem.generateRoom") as string}
               >
                 <FontAwesomeIcon icon={faUsers} />
-              </a>
+              </button>
             )}
             {!noShare && !readOnly && !wantJoinRoom && (
-              <a
+              <button
+                type="button"
                 className="sharing-item"
                 onClick={() => {
                   setUseLocalDoc(true);
@@ -157,16 +160,27 @@ function Editor({
                 title={t("sharingItem.shareCurrentPage") as string}
               >
                 <FontAwesomeIcon icon={faShareNodes} />
-              </a>
+              </button>
             )}
             {!noJoin && !wantJoinRoom && (
-              <a
+              <button
+                type="button"
                 className="sharing-item"
                 onClick={() => setWantJoinRoom(true)}
                 title={t("sharingItem.joinRoom") as string}
               >
                 <FontAwesomeIcon icon={faArrowRightToBracket} />
-              </a>
+              </button>
+            )}
+            {!noJoin && wantJoinRoom && (
+              <button
+                type="button"
+                className="sharing-item"
+                onClick={resetStates}
+                title={t("sharingItem.closeJoinRoom") as string}
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </button>
             )}
             {!noJoin && wantJoinRoom && (
               <input
@@ -181,45 +195,39 @@ function Editor({
                 autoFocus
               ></input>
             )}
-            {!noJoin && wantJoinRoom && (
-              <a
-                className="sharing-item"
-                onClick={resetStates}
-                title={t("sharingItem.closeJoinRoom") as string}
-              >
-                <FontAwesomeIcon icon={faXmark} />
-              </a>
-            )}
             {!noJoin && joinRoom && uuidValidate(joinRoom) && (
-              <a
+              <button
+                type="button"
                 className="sharing-item"
                 onClick={joinRoomHandler}
                 title={t("sharingItem.joinRoom") as string}
               >
                 <FontAwesomeIcon icon={faArrowRightToBracket} />
-              </a>
+              </button>
             )}
           </div>
         )}
         {wsUrl && room && (
           <div>
             {!noShare && (
-              <a
+              <button
+                type="button"
                 className="sharing-item"
                 onClick={() => navigator.clipboard.writeText(room)}
                 title={t("sharingItem.roomId") as string}
               >
                 {room}
-              </a>
+              </button>
             )}
             {!noLeave && (
-              <a
+              <button
+                type="button"
                 className="sharing-item"
                 onClick={resetStates}
                 title={t("sharingItem.leaveRoom") as string}
               >
                 <FontAwesomeIcon icon={faArrowRightFromBracket} />
-              </a>
+              </button>
             )}
           </div>
         )}