Improve tabIndex on CharacterGrid

components/CharacterUnit/index.tsx

@@ -286,7 +286,11 @@ const CharacterUnit = ({
   }
 
   const image = (
-    <div className="CharacterImage" onClick={openSearchModal}>
+    <div
+      className="CharacterImage"
+      onClick={openSearchModal}
+      tabIndex={gridCharacter ? gridCharacter.position * 7 : 0}
+    >
       <img
         alt={character?.name[locale]}
         className="grid_image"
@@ -314,8 +318,9 @@ const CharacterUnit = ({
             flb={character.uncap.flb || false}
             ulb={character.uncap.ulb || false}
             uncapLevel={gridCharacter.uncap_level}
-            editable={editable}
             transcendenceStage={gridCharacter.transcendence_step}
+            position={gridCharacter.position}
+            editable={editable}
             updateUncap={passUncapData}
             updateTranscendence={passTranscendenceData}
             special={character.special}

components/SummonUnit/index.tsx

@@ -244,6 +244,7 @@ const SummonUnit = ({
             ulb={gridSummon.object.uncap.ulb || false}
             flb={gridSummon.object.uncap.flb || false}
             uncapLevel={gridSummon.uncap_level}
+            position={gridSummon.position}
             updateUncap={passUncapData}
             special={false}
           />

components/TranscendencePopover/index.tsx

@@ -5,10 +5,15 @@ import classNames from 'classnames'
 import TranscendenceStar from '~components/TranscendenceStar'
 import './index.scss'
 
-interface Props {
+interface Props
+  extends React.DetailedHTMLProps<
+    React.DialogHTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > {
   className?: string
   open: boolean
   stage: number
+  onOpenChange?: (open: boolean) => void
   sendValue?: (stage: number) => void
 }
 
@@ -16,6 +21,8 @@ const TranscendencePopover = ({
   className,
   open: popoverOpen,
   stage,
+  tabIndex,
+  onOpenChange,
   sendValue,
 }: Props) => {
   const { t } = useTranslation('common')
@@ -52,8 +59,15 @@ const TranscendencePopover = ({
     setCurrentStage(newStage)
   }
 
+  function handleKeyPress(event: React.KeyboardEvent<HTMLDivElement>) {
+    console.log(`Key pressed, ${event.key}`)
+    if (event.key === 'Escape') {
+      if (onOpenChange) onOpenChange(false)
+    }
+  }
+
   return (
-    <div className={classes}>
+    <div className={classes} onKeyPress={handleKeyPress} tabIndex={tabIndex}>
       <TranscendenceStar
         className="Interactive Base"
         editable={true}

components/TranscendenceStar/index.tsx

@@ -4,12 +4,16 @@ import classnames from 'classnames'
 import TranscendenceFragment from '~components/TranscendenceFragment'
 import './index.scss'
 
-interface Props {
+interface Props
+  extends React.DetailedHTMLProps<
+    React.DialogHTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > {
   className?: string
   stage: number
   editable: boolean
   interactive: boolean
-  onClick?: () => void
+  onStarClick?: () => void
   onFragmentClick?: (newStage: number) => void
   onFragmentHover?: (newStage: number) => void
 }
@@ -21,7 +25,8 @@ const TranscendenceStar = ({
   interactive,
   stage,
   editable,
-  onClick,
+  tabIndex,
+  onStarClick,
   onFragmentClick,
   onFragmentHover,
 }: Props) => {
@@ -52,8 +57,8 @@ const TranscendenceStar = ({
   }, [stage])
 
   function handleClick() {
-    if (onClick) {
-      onClick()
+    if (onStarClick) {
+      onStarClick()
     }
   }
 
@@ -81,6 +86,7 @@ const TranscendenceStar = ({
       className={starClasses}
       onClick={editable ? handleClick : () => {}}
       onMouseLeave={interactive ? handleMouseLeave : () => {}}
+      tabIndex={tabIndex}
     >
       <div className="Fragments">
         {[...Array(NUM_FRAGMENTS)].map((e, i) => {

components/UncapIndicator/index.tsx

@@ -9,6 +9,7 @@ interface Props {
   type: 'character' | 'weapon' | 'summon'
   rarity?: number
   uncapLevel?: number
+  position: number
   transcendenceStage?: number
   editable: boolean
   flb: boolean
@@ -81,7 +82,8 @@ const UncapIndicator = (props: Props) => {
         stage={props.transcendenceStage}
         editable={props.editable}
         interactive={false}
-        onClick={() => togglePopover(true)}
+        onStarClick={() => togglePopover(true)}
+        tabIndex={props.position * 7 + i + 1}
       />
     )
   }
@@ -94,7 +96,8 @@ const UncapIndicator = (props: Props) => {
         empty={props.uncapLevel != null ? i >= props.uncapLevel : false}
         key={`star_${i}`}
         index={i}
-        onClick={toggleStar}
+        onStarClick={toggleStar}
+        tabIndex={props.position * 7 + i + 1}
       />
     )
   }
@@ -107,7 +110,8 @@ const UncapIndicator = (props: Props) => {
         empty={props.uncapLevel != null ? i >= props.uncapLevel : false}
         key={`star_${i}`}
         index={i}
-        onClick={toggleStar}
+        onStarClick={toggleStar}
+        tabIndex={props.position * 7 + i + 1}
       />
     )
   }
@@ -119,7 +123,8 @@ const UncapIndicator = (props: Props) => {
         empty={props.uncapLevel != null ? i >= props.uncapLevel : false}
         key={`star_${i}`}
         index={i}
-        onClick={toggleStar}
+        onStarClick={toggleStar}
+        tabIndex={props.position * 7 + i + 1}
       />
     )
   }
@@ -129,7 +134,9 @@ const UncapIndicator = (props: Props) => {
       <TranscendencePopover
         open={popoverOpen}
         stage={props.transcendenceStage ? props.transcendenceStage : 0}
+        onOpenChange={togglePopover}
         sendValue={sendTranscendenceStage}
+        tabIndex={props.position * 7 + 7 + 1}
       />
     ) : (
       ''

components/UncapStar/index.tsx

@@ -3,13 +3,17 @@ import classnames from 'classnames'
 
 import './index.scss'
 
-interface Props {
+interface Props
+  extends React.DetailedHTMLProps<
+    React.DialogHTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > {
   empty: boolean
   special: boolean
   flb: boolean
   ulb: boolean
   index: number
-  onClick: (index: number, empty: boolean) => void
+  onStarClick: (index: number, empty: boolean) => void
 }
 
 const UncapStar = (props: Props) => {
@@ -23,10 +27,12 @@ const UncapStar = (props: Props) => {
   })
 
   function clicked() {
-    props.onClick(props.index, props.empty)
+    props.onStarClick(props.index, props.empty)
   }
 
-  return <li className={classes} onClick={clicked}></li>
+  return (
+    <li className={classes} tabIndex={props.tabIndex} onClick={clicked}></li>
+  )
 }
 
 UncapStar.defaultProps = {

components/WeaponUnit/index.tsx

@@ -548,6 +548,7 @@ const WeaponUnit = ({
             ulb={gridWeapon.object.uncap.ulb || false}
             flb={gridWeapon.object.uncap.flb || false}
             uncapLevel={gridWeapon.uncap_level}
+            position={gridWeapon.position}
             updateUncap={passUncapData}
             special={false}
           />