Android build v1.1.6

src/components/SpellBars.tsx

@@ -40,6 +40,7 @@ export const SpellButton = memo(function SpellButton({
   iconStyle,
   resourceName,
   disabled,
+  focusable = true,
   onCast,
   emptyKeyPrefix = 'empty',
 }: {
@@ -48,6 +49,7 @@ export const SpellButton = memo(function SpellButton({
   iconStyle: ControllerIconStyle
   resourceName: string
   disabled?: boolean
+  focusable?: boolean
   onCast: (spell: Spell) => void
   emptyKeyPrefix?: string
 }) {
@@ -61,9 +63,11 @@ export const SpellButton = memo(function SpellButton({
   return (
     <button
       className="spell"
+      data-controller-nav={focusable ? undefined : 'skip'}
       disabled={disabled}
       key={spell.id}
       onClick={() => onCast(spell)}
+      tabIndex={focusable ? undefined : -1}
       title={spell.description}
       type="button"
     >
@@ -95,6 +99,7 @@ export const SpellBar = memo(function SpellBar({
   canCast,
   onCast,
   className = 'spell-bar six-slots vertical-spell-bar',
+  focusable = true,
 }: {
   spells: SpellSlot[]
   bindings: Record<string, string>
@@ -104,6 +109,7 @@ export const SpellBar = memo(function SpellBar({
   canCast: boolean
   onCast: (spell: Spell) => void
   className?: string
+  focusable?: boolean
 }) {
   return (
     <div className={className}>
@@ -119,6 +125,7 @@ export const SpellBar = memo(function SpellBar({
           <SpellButton
             binding={bindings[`ability${slotIndex + 1}`]}
             disabled={!canCast || resource < spell.cost || spell.remaining > 0}
+            focusable={focusable}
             iconStyle={iconStyle}
             key={spell.id}
             onCast={onCast}