fix: add focused stylign to tabs

[ahuth]

This PR adds a focus outline to the tabs component, for the SDS accessibility hackday project.

See it live on Chromatic

Keyboard usage of the tabs is actually working as expected:

• Tab onto and off of the active tab
• When focused on the active tab, left and right arrows changes the active tab
• Space changes to the selected tab

[ahuth]

This is currently the same focus outline that buttons have:

I am not a designer, and I'm happy to change this to something else. Figured it made sense for now to keep it simple and match buttons and text inputs.

Note that mui has default focus styles which we're suppressing as part of the theme:

sci-components/packages/components/src/core/styles/common/defaultTheme.ts

Lines 283 to 298 in 9451847

	MuiButtonBase: {
	defaultProps: {
	disableRipple: true,
	},
	},
	MuiLink: {
	defaultProps: {
	underline: "hover",
	},
	},
	MuiTab: {
	defaultProps: {
	disableRipple: true,
	},
	},
	},

We could turn those back on, although it looks weird and would take tweaking colors for both buttons and tabs.

[ehoops-cz]

🤔 hmm... Are we re-doing work that we can just get for free from Mui?

[ahuth]

We definitely are, although I think it would take design and eng work to get back to something that looks reasonable with the defaults for all components.

[ahuth]

Thanks 🙏