fix(Tabs): prevent tablist role from stealing focus (#7905)

* fix(tabs): remove default tablist outlines * fix(Tabs): prevent tablist role from stealing focus Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 1, 2021 · 69d79ef · 69d79ef
1 parent 0cb4b30
commit 69d79ef
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 0 deletions.
diff --git a/packages/components/src/components/tabs/_tabs.scss b/packages/components/src/components/tabs/_tabs.scss
@@ -453,6 +453,7 @@
       padding: 0;
       overflow: auto hidden;
       list-style: none;
+      outline: 0;
       transition: max-height $duration--fast-01 motion(standard, productive);
 
       // hide scrollbars

diff --git a/packages/react/src/components/Tabs/Tabs.js b/packages/react/src/components/Tabs/Tabs.js
@@ -274,6 +274,7 @@ export default class Tabs extends React.Component {
     ) {
       const currentScrollLeft = this.state.tablistScrollLeft;
       tab?.tabAnchor?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      tab?.tabAnchor?.focus();
       const newScrollLeft = this.tablist.current.scrollLeft;
       if (newScrollLeft > currentScrollLeft) {
         this.tablist.current.scrollLeft += this.OVERFLOW_BUTTON_OFFSET;