fix(tabs): adjust TabPanel focus state

.changeset/cold-impalas-decide.md

@@ -0,0 +1,9 @@
+---
+'@twilio-paste/tabs': patch
+'@twilio-paste/core': patch
+---
+
+[Tabs]
+
+- Added `:focus-visible` styles to TabPanel in order to override the default browser style.
+- Added a `borderRadius20` border-radius to TabPanel to make the focus not so harsh.

packages/paste-core/components/tabs/src/TabPanel.tsx

@@ -1,8 +1,18 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import {Box} from '@twilio-paste/box';
+import type {BoxStyleProps} from '@twilio-paste/box';
 import {TabPrimitivePanel} from '@twilio-paste/tabs-primitive';
 import {TabsContext} from './TabsContext';
 
+export const tabPanelStyles = {
+  borderRadius: 'borderRadius20',
+  _focusVisible: {
+    boxShadow: 'shadowFocus',
+    outline: 'none',
+  },
+} as Partial<BoxStyleProps>;
+
 export interface TabPanelProps {
   id?: string | undefined;
   tabId?: string | undefined;
@@ -12,7 +22,7 @@ export interface TabPanelProps {
 const TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>(({children, ...props}, ref) => {
   const tab = React.useContext(TabsContext);
   return (
-    <TabPrimitivePanel {...(tab as any)} {...props} ref={ref}>
+    <TabPrimitivePanel {...(tab as any)} {...tabPanelStyles} {...props} as={Box} ref={ref}>
       {children}
     </TabPrimitivePanel>
   );