Improved focus styles

src/components/applications/file-explorer/FileExplorer.jsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { useVirtualRoot } from "../../../hooks/virtual-drive/VirtualRootContext.js";
 import styles from "./FileExplorer.module.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowUp, faCaretLeft, faCaretRight, faCog, faDesktop, faFile, faFileLines, faFolder, faHouse, faImage, faSearch } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUp, faCaretLeft, faCaretRight, faCog, faDesktop, faFile, faFileLines, faFolder, faHouse, faImage, faPlus, faSearch } from "@fortawesome/free-solid-svg-icons";
 
 import { VirtualFile } from "../../../features/virtual-drive/virtual-file.js";
 import { useWindowsManager } from "../../../hooks/windows/WindowsManagerContext.js";
@@ -77,6 +77,9 @@ export function FileExplorer({ startPath }) {
 				<button title="Up" tabIndex={0} className={styles["Icon-button"]} onClick={() => { changeDirectory(".."); }}>
 					<FontAwesomeIcon icon={faArrowUp}/>
 				</button>
+				<button title="New" tabIndex={0} className={styles["Icon-button"]}>
+					<FontAwesomeIcon icon={faPlus}/>
+				</button>
 				<input
 					value={path}
 					type="text"

src/components/applications/file-explorer/FileExplorer.module.css

@@ -46,7 +46,7 @@
 	transition: all 200ms ease-in-out;
 }
 
-.Icon-button:hover::after, .Icon-button:focus::after {
+.Icon-button:hover::after, .Icon-button:focus-visible::after {
 	background-color: rgba(255, 255, 255, 10%);
 	transform: scale(150%);
 }
@@ -102,7 +102,7 @@
 	transition: background-color 100ms ease-in-out;
 }
 
-.Nav-button:hover, .Nav-button:focus {
+.Nav-button:hover, .Nav-button:focus-visible {
 	background-color: rgba(255, 255, 255, 10%);
 }
 
@@ -139,7 +139,7 @@
 }
 
 .File-button:hover, .Folder-button:hover,
-.File-button:focus, .Folder-button:focus {
+.File-button:focus-visible, .Folder-button:focus-visible {
 	background-color: rgba(255, 255, 255, 10%);
 }
 

src/components/applications/settings/Settings.jsx

@@ -8,6 +8,7 @@ import { SettingsManager } from "../../../features/settings/settings.js";
 import { VirtualRoot } from "../../../features/virtual-drive/virtual-root.js";
 import { StorageManager } from "../../../features/storage/storage.js";
 import { round } from "../../../features/math/round.js";
+import { Button } from "../../utils/Button.jsx";
 
 /**
  * @param {object} props 
@@ -61,7 +62,7 @@ function StorageTab({ virtualRoot }) {
 		</div>
 		<div className={styles["Option"]}>
 			<p className={styles["Label"]}>Manage data</p>
-			<button title="Reset" className={`${styles.Button} ${styles["Button-red"]}`}>Reset</button>
+			<Button className={`${styles.Button} ${styles["Button-red"]}`}>Reset</Button>
 		</div>
 	</>);
 }

src/components/applications/settings/Settings.module.css

@@ -36,7 +36,7 @@
 	transition: background-color 100ms ease-in-out;
 }
 
-.Tab-button:hover, .Tab-button:focus {
+.Tab-button:hover, .Tab-button:focus-visible {
 	background-color: rgba(255, 255, 255, 10%);
 }
 
@@ -113,7 +113,7 @@
 	cursor: pointer;
 }
 
-.Button:hover, .Button:focus {
+.Button:hover, .Button:focus-visible-visible {
 	background-color: var(--hover-color);
 }
 

src/components/task-bar/TaskBar.module.css

@@ -28,7 +28,7 @@
 	z-index: -1;
 }
 
-.Task-bar button:hover, .Task-bar button:focus {
+.Task-bar button:hover, .Task-bar button:focus-visible {
 	background-color: var(--task-bar-button-hover-color);
 }
 
@@ -95,7 +95,7 @@
 	-webkit-transform: translateX(-50%);
 }
 
-.App-icon:hover::after, .App-icon:focus::after {
+.App-icon:hover::after, .App-icon:focus-visible::after {
 	width: 100%;
 }
 

src/components/utils/Button.jsx

@@ -0,0 +1,18 @@
+import styles from "./Button.module.css";
+
+/**
+ * @param {object} props 
+ */
+export function Button(props) {
+	const { className = "", children } = props;
+
+	return (
+		<button
+			className={`${className} ${styles.Button}`}
+			tabIndex={0}
+			{...props}
+		>
+			{children}
+		</button>
+	);
+}

src/components/utils/Button.module.css

@@ -0,0 +1,8 @@
+.Button {
+	color: var(--foreground-color-a);
+	background: none;
+	border: none;
+	outline: none;
+	transition: background-color 100ms ease-in-out;
+	cursor: pointer;
+}

src/components/utils/DropdownButton.module.css

@@ -14,7 +14,7 @@
 	cursor: pointer;
 }
 
-.Button:hover, .Button:focus {
+.Button:hover, .Button:focus-visible {
 	background-color: rgba(255, 255, 255, 5%);
 }
 
@@ -42,7 +42,7 @@
 	cursor: pointer;
 }
 
-.Dropdown > button:hover, .Dropdown > button:focus {
+.Dropdown > button:hover, .Dropdown > button:focus-visible {
 	background-color: rgba(255, 255, 255, 5%);
 }
 

src/components/windows/Window.module.css

@@ -92,7 +92,7 @@
 	outline: none;
 }
 
-.Header button:hover, .Header button:focus {
+.Header button:hover, .Header button:focus-visible {
 	background-color: var(--header-button-hover-color);
 }