Blue border for Tab component in some cases

[shizy818]

What package(s) are you using?

• carbon-components 10.39.0
• carbon-components-react 7.39.0

Detailed description

Describe in detail the issue you're having.

Tab 1 can be selected and has a blue border.

Tab 2 does not has the border.

The diffenence seems that attribute tabindex=0 is added for some tabs.

What did you expect to happen? What happened instead? What would you like to
see changed?

I expect the tab behavior are consistent.

What browser are you working in?

Firefox

Steps to reproduce the issue

1. https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/react/examples/codesandbox
2. Paste following Code in index.js

import React from 'react';
import { render } from 'react-dom';
import { Tabs, Tab, Button } from 'carbon-components-react';

const App = () => (
<div>
  <Tabs>
    <Tab
      href="#"
      id="tab-1"
      label="Tab label 1"
    >
      <div className="some-content">
        <p>Content for first tab goes here.</p>
      </div>
    </Tab>
    <Tab
      href="#"
      id="tab-2"
      label="Tab label 2"
    >
      <div className="some-content">
        <p>Content for second tab goes here.</p>
        <Button>With a button</Button>
      </div>
    </Tab>
    <Tab
      href="#"
      id="tab-3"
      label='Tab label 3'
    >
      <div className="some-content">
        <p>Content for third tab goes here.</p>
      </div>
    </Tab>
  </Tabs>
</div>
);

render(<App />, document.getElementById('root'));

Additional information

• Screenshots or code
• Notes

[tay1orjones]

In this case when a tab doesn't contain interactive content, focus should be applied to the tab container. This was implemented as part of #7894. Hopefully this is helpful to show this is intentional behavior, we can always reopen this if there's a remaining problem