Merge branch 'main' of https://github.com/nand2tetris/web-ide into fe…

…at/compiler

components/src/table.tsx

@@ -58,7 +58,6 @@ const TableRow = ({
           style={{
             flex: "1",
             textAlign: "right",
-            color: "black",
             padding: "3px",
             ...rounded("none"),
             ...(highlight

package.json

@@ -28,6 +28,7 @@
     "prebuild": "npm run check",
     "build": "cross-env CI=true npm run build -w projects && cross-env CI=true npm run build -w runner && cross-env CI=true npm run build -w simulator && cross-env CI=true npm run build -w cli && cross-env CI=true npm run build -w components && cross-env CI=true npm run build -w web && cross-env CI=true npm run build -w extension",
     "build:extension": "cross-env CI=true npm run build -w extension",
+    "watch": "concurrently -k --restart-tries 3 \"npm run build -w components -- -w\" \"npm run build -w projects -- -w\" \"npm run build -w runner -- -w\" \"npm run build -w simulator -- -w\"",
     "test:ci": "cross-env CI=true npm test -w simulator && cross-env CI=true npm test -w components && cross-env CI=true npm test -w web",
     "pretest": "npm run build",
     "test": "npm run test:ci",
@@ -51,6 +52,7 @@
     "npm": ">=7"
   },
   "devDependencies": {
+    "concurrently": "^9.0.1",
     "cross-env": "^7.0.3",
     "shx": "^0.3.4"
   }

web/src/pico/pico.scss

@@ -49,6 +49,7 @@
     --text-color: white;
     --mark-background-color: rgb(30, 74, 109);
     --compiler-err-color: rgb(69, 25, 22);
+    --code-color: rgb(180, 180, 180);
 
     .outline {
       color: var(--light-grey);

web/src/shell/tab.scss

@@ -63,12 +63,8 @@ label[role="tab"],
 }
 
 [role="tab"] [type="radio"] {
-  /* Leave the radio button focusable, but not visible. Copied from .screen-reader-text */
-  clip: rect(1px, 1px, 1px, 1px);
-  position: absolute !important;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
+  opacity: 0; // keep the radio button focusable, but not visible, to allow switching tabs with the arrow keys
+  margin-inline: -7px; // offset the gap created by the invisible radio button (7px value was adjusted experimentally)
 }
 
 [role="tab"][aria-selected="true"] {