fix: tabindex option

kufu · Apr 28, 2020 · 1e54e00 · 1e54e00
1 parent 3f46409
commit 1e54e00
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -10,6 +10,8 @@ storiesOf('Tooltip', module).add('all', () => (
     <dt>Default</dt>
     <dd>
       <LightTooltip message="LightBalloon">LightTooltip</LightTooltip>
+    </dd>
+    <dd>
       <DarkTooltip message="DarkBalloon">DarkTooltip</DarkTooltip>
     </dd>
     <dt>horizontal & vertical</dt>

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -11,6 +11,7 @@ type Props = {
   ellipsisOnly?: boolean
   horizontal?: BalloonProps['horizontal']
   vertical?: BalloonProps['vertical']
+  tabIndex?: number
 }
 
 const tooltipFactory: (balloonTheme: BalloonTheme) => FC<Props> = balloonTheme => ({
@@ -21,6 +22,7 @@ const tooltipFactory: (balloonTheme: BalloonTheme) => FC<Props> = balloonTheme =
   ellipsisOnly = false,
   horizontal = 'left',
   vertical = 'bottom',
+  tabIndex = 0,
 }) => {
   const themes = useTheme()
   const [isVisible, setIsVisible] = useState(false)
@@ -72,8 +74,11 @@ const tooltipFactory: (balloonTheme: BalloonTheme) => FC<Props> = balloonTheme =
       ref={ref}
       onMouseOver={overAction}
       onTouchStart={overAction}
+      onFocus={overAction}
       onMouseOut={outAction}
       onTouchEnd={outAction}
+      onBlur={outAction}
+      tabIndex={tabIndex}
     >
       {isVisible && (
         <StyledBalloon horizontal={horizontal} vertical={vertical} className={className}>