Prevent Tabs and ScrollView from unwanted cross-axis scrolling du…

…ring 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

@@ -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;
 }
 

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;