feat(tab): make tabs interactive with keyboard

Add `tabIndex` to tabs so they can be interacted with using the
keyboard. Add a disabled tab to docs.

Author: scharinger

packages/core/src/Tab/index.tsx

@@ -144,6 +144,7 @@ export function TabBase<T>({
   onSelect,
   markerOffset = 'right',
   children,
+  onKeyDown,
   ...props
 }: TabBaseProps<T>): JSX.Element {
   const onClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {
@@ -154,12 +155,29 @@ export function TabBase<T>({
     onSelect(id)
   }, [selected, disabled, id, onSelect])
 
+  const handleKeyDown = useCallback<React.KeyboardEventHandler<BaseElement>>(
+    event => {
+      onKeyDown?.(event)
+
+      if (selected || disabled) {
+        return
+      }
+
+      if (event.key === 'Enter') {
+        onSelect(id)
+      }
+    },
+    [selected, disabled, id, onSelect]
+  )
+
   return (
     <TabBaseContainer
       disabled={disabled}
       onClick={onClick}
       selected={selected}
       markerOffset={markerOffset}
+      tabIndex={disabled ? undefined : 0}
+      onKeyDown={handleKeyDown}
       {...props}
     >
       <TabBaseMarker offset={markerOffset} selected={selected} />

packages/docs/src/mdx/coreComponents/Tab.mdx

@@ -16,6 +16,7 @@ import {
 import {
   HomeIcon,
   SystemAccessoriesIcon,
+  AdaptiveIcon,
 } from 'practical-react-components-icons'
 
 # Tab
@@ -70,6 +71,12 @@ export const VTABS = [
   },
   {
     id: '2',
+    label: 'About',
+    icon: AdaptiveIcon,
+    disabled: true,
+  },
+  {
+    id: '3',
     label: 'Contact',
     icon: SystemAccessoriesIcon,
   },
@@ -132,6 +139,7 @@ export const DemoComponent = ({}) => {
                 icon={tab.icon}
                 selected={tab.id === selectedVTab}
                 onSelect={setSelectedVTab}
+                disabled={tab.disabled}
               />
             ))}
           </VerticalTabContainer>