From 3305eec3d3501453069471b0c688fc6daf3a1ba3 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Wed, 28 Feb 2024 22:32:41 +0100
Subject: [PATCH] Prevent `Tabs` and `ScrollView` from unwanted cross-axis
 scrolling during keyboard navigation #499

Use the `clip` value for `overflow` to prevent the content from unwanted
scrolling on the cross axis during keyboard navigation.
---
 src/components/ScrollView/ScrollView.scss | 8 ++++++--
 src/components/Tabs/Tabs.scss             | 7 ++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/ScrollView/ScrollView.scss b/src/components/ScrollView/ScrollView.scss
index e036ee99..21212b6b 100644
--- a/src/components/ScrollView/ScrollView.scss
+++ b/src/components/ScrollView/ScrollView.scss
@@ -20,6 +20,9 @@
 //
 // 7. Hide content overflowing in the other direction because scrollbars would be unreachable under
 //    scrolling shadows.
+//
+// 8. Use the `clip` value for `overflow` to prevent the content from unwanted scrolling on the
+//    cross axis during keyboard navigation.
 
 @use "../../styles/tools/accessibility";
 @use "../../styles/tools/caret";
@@ -99,7 +102,7 @@ $_arrow-outer-spacing: spacing.of(4);
 
 .isRootVertical .viewport {
     height: 100%;
-    overflow-x: hidden; // 7.
+    overflow-x: clip; // 7., 8.
     overflow-y: auto; // 2.
 }
 
@@ -180,12 +183,13 @@ $_arrow-outer-spacing: spacing.of(4);
 
 .isRootHorizontal .viewport {
     overflow-x: auto; // 2.
-    overflow-y: hidden; // 5., 7.
+    overflow-y: clip; // 5., 7., 8.
 }
 
 .isRootHorizontal .content {
     display: inline-flex; // 4.
     min-width: 100%;
+    overflow: clip; // 8.
     vertical-align: top;
 }
 
diff --git a/src/components/Tabs/Tabs.scss b/src/components/Tabs/Tabs.scss
index 853866fb..3f724a22 100644
--- a/src/components/Tabs/Tabs.scss
+++ b/src/components/Tabs/Tabs.scss
@@ -1,4 +1,5 @@
-// 1. Decorative bottom border.
+// 1. Use the `clip` value to prevent the content from unwanted vertical scrolling during keyboard navigation.
+// 2. Decorative bottom border.
 
 @use "../../styles/tools/reset";
 @use "theme";
@@ -11,10 +12,10 @@
     min-width: 100%;
     padding-right: theme.$padding-x;
     padding-left: theme.$padding-x;
-    overflow-y: hidden;
+    overflow-y: clip; // 1.
     white-space: nowrap;
 
-    // 1.
+    // 2.
     &::after {
         content: "";
         position: absolute;