Tabs: "With Tab Icons" story has duplicated focus styles

[mirka]

What problem does this address?

The Tabs "With Tab Icons And Tooltips" story has duplicated focus styles.

What is your proposed solution?

Ideally, we switch the documented implementation to something that doesn't result in double focus indicators. We shouldn't add overrides to avoid this double focus, if possible.

[ciampo]

Yup, this is caused by the <Button /> styles interfering with Tabs

• The "outer" outline is caused by <Button />'s own focus styles
• the inner outline is smaller than it should be because of more <Button /> styles, especially the icon ones, overriding the Tab styles

It's a tricky one. We'll probably have to add specific style overrides in the Tabs component to make sure that the relevant <Button /> styles don't get applied.

Do you have any other thoughts?

[mirka]

I was hoping to compose it using existing components, without style overrides. For example, this seems to work as expected:

<Tooltip text="WordPress">
	<Tabs.Tab tabId="tab1" aria-label="WordPress">
		<Icon icon={ wordpress } />
	</Tabs.Tab>
</Tooltip>

[ciampo]

That makes a lot of sense, it's so good to start seeing the results of composing smaller, modular components!

I implemented your suggestion in #63297