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;