filebrowser keyboard navigation

Author: devklick

src/components/Button/styles.ts

@@ -55,6 +55,10 @@ function buildStyledButton({
     ":active": {
       backgroundColor: getBackgroundColorActive(props),
     },
+    ":focus-visible": {
+      backgroundColor: getBackgroundColorHover(props),
+      outline: "none",
+    },
     ...radiusStyles({ borderRadius, group: props.group }), // this breaks the return type somehow. Something funky when spreading the emotion type
   } as CSSObject;
 

src/programs/FileBrowser/DirectoryOrFile/DirectoryOrFile.tsx

@@ -55,6 +55,12 @@ function DirectoryOrFile({
     event.preventDefault();
   }
 
+  function handleKeyDown(event: React.KeyboardEvent) {
+    if (event.key === "Enter") {
+      openFSObject(fsObject);
+    }
+  }
+
   return (
     <StyledItem
       selected={selected}
@@ -63,6 +69,9 @@ function DirectoryOrFile({
       onClick={handleClick}
       key={fsObject.path}
       onContextMenu={handleRightClick}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      onFocus={() => setSelected(fsObject.path)}
     >
       {contextMenuOpen && (
         <ContextMenu

src/programs/FileBrowser/DirectoryOrFile/styles.ts

@@ -20,6 +20,11 @@ export const StyledItem = styled.div<{
   border-radius: 10px;
   background-color: ${(props) =>
     props.selected ? props.selectedColor : undefined};
+
+  :focus-visible {
+    background-color: ${(p) => p.selectedColor};
+    outline: none;
+  }
 `;
 
 export const StyledItemName = styled.span``;

src/programs/FileBrowser/MainContent/styles.ts

@@ -5,7 +5,7 @@ interface StyledMainContentProps {
 }
 export const StyledMainContent = styled.div<StyledMainContentProps>`
   grid-area: main-content;
-  padding: 20px;
+  padding: 1%;
   width: 100%;
   height: 100%;
   overflow-y: auto;