Merge pull request #5097 from penpot/eva-fix-arrow-keys-tabs

🐛  Fix arrow key movement on tabs

frontend/playwright/ui/specs/workspace.spec.js

@@ -177,3 +177,15 @@ test("Bug 7489 - Workspace-palette items stay hidden when opening with keyboard-
     ),
   ).toBeVisible();
 });
+
+test("Bug 8784 - Use keyboard arrow to move inside a text input does not change tabs", async ({
+  page,
+}) => {
+  const workspacePage = new WorkspacePage(page);
+  await workspacePage.setupEmptyFile();
+  await workspacePage.goToWorkspace();
+  await workspacePage.pageName.click();
+  await page.keyboard.press("ArrowLeft");
+
+  await expect(workspacePage.pageName).toHaveText("Page 1");
+});

frontend/src/app/main/ui/ds/tab_switcher.cljs

@@ -175,8 +175,7 @@
 
         class (dm/str class " " (stl/css :tabs))
 
-        props (mf/spread-props props {:class class
-                                      :on-key-down on-key-down})]
+        props (mf/spread-props props {:class class})]
 
     (mf/with-effect [tabs]
       (mf/set-ref-val! tabs-ref tabs))
@@ -188,6 +187,7 @@
                     :tabs tabs
                     :on-ref on-ref
                     :selected selected
+                    :on-key-down on-key-down
                     :on-click on-click}]]
 
      (let [active-tab (get-tab tabs selected)

frontend/src/app/main/ui/ds/tab_switcher.scss

@@ -101,7 +101,17 @@
 }
 
 .tab-panel {
+  --tab-panel-outline-color: none;
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    --tab-panel-outline-color: var(--color-accent-primary);
+  }
+
   display: grid;
   width: 100%;
   height: 100%;
+  outline: $b-1 solid var(--tab-panel-outline-color);
 }