fix aria and minify

src/Components/Buttons/CommanderDamage.tsx

@@ -201,6 +201,7 @@ export const CommanderDamage = ({
     <CommanderDamageContainer
       key={opponentIndex}
       $rotation={player.settings.rotation}
+      aria-label={`Commander damage bar ${player.index}`}
     >
       <CommanderDamageButton
         key={opponentIndex}
@@ -214,6 +215,7 @@ export const CommanderDamage = ({
           e.preventDefault();
         }}
         $backgroundColor={opponent.color}
+        aria-label={`Commander damage. Player ${player.index}, opponent ${opponent.index}`}
       >
         <CommanderDamageTextContainer $rotation={player.settings.rotation}>
           <OutlinedText
@@ -247,6 +249,7 @@ export const CommanderDamage = ({
               e.preventDefault();
             }}
             $backgroundColor={opponent.color}
+            aria-label={`Partner Commander damage. Player ${player.index}, opponent ${opponent.index}`}
           >
             <CommanderDamageTextContainer $rotation={player.settings.rotation}>
               <OutlinedText

src/Components/Buttons/ExtraCounter.tsx

@@ -59,6 +59,7 @@ type ExtraCounterProps = {
   type: CounterType;
   setCounterTotal: (updatedCounterTotal: number, type: CounterType) => void;
   rotation: number;
+  playerIndex: number;
 };
 
 const ExtraCounter = ({
@@ -67,6 +68,7 @@ const ExtraCounter = ({
   setCounterTotal,
   type,
   rotation,
+  playerIndex,
 }: ExtraCounterProps) => {
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const [timeoutFinished, setTimeoutFinished] = useState(false);
@@ -120,6 +122,7 @@ const ExtraCounter = ({
         onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
           e.preventDefault();
         }}
+        aria-label={`Player ${playerIndex} extra counter: ${type}`}
       >
         <IconContainer $rotation={rotation}>
           {Icon}

src/Components/Buttons/LifeCounterButton.tsx

@@ -121,6 +121,7 @@ const LifeCounterButton = ({
         e.preventDefault();
       }}
       style={{ fontSize }}
+      aria-label={`${operation === 'add' ? 'Add' : 'Subtract'} life`}
     >
       <TextContainer
         $rotation={rotation}

src/Components/Buttons/LoseButton.tsx

@@ -46,7 +46,7 @@ type LoseButtonProps = {
 
 export const LoseGameButton = ({ rotation, onClick }: LoseButtonProps) => {
   return (
-    <LoseButton $rotation={rotation} onClick={onClick}>
+    <LoseButton $rotation={rotation} onClick={onClick} aria-label={`Lose Game`}>
       <Skull size="5vmin" color="black" opacity={0.5} />
     </LoseButton>
   );

src/Components/Buttons/SettingsButton.tsx

@@ -40,7 +40,11 @@ type SettingsButtonProps = {
 
 const SettingsButton = ({ onClick, rotation }: SettingsButtonProps) => {
   return (
-    <StyledSettingsButton onClick={onClick} $rotation={rotation}>
+    <StyledSettingsButton
+      onClick={onClick}
+      $rotation={rotation}
+      aria-label={`Settings`}
+    >
       <Cog size="5vmin" color="black" opacity="0.3" />
     </StyledSettingsButton>
   );

src/Components/Counters/ExtraCountersBar.tsx

@@ -132,6 +132,7 @@ const ExtraCountersBar = ({
               )?.value
             }
             setCounterTotal={handleCounterChange}
+            playerIndex={player.index}
           />
         )}
         {Boolean(useCommanderDamage && usePartner) && (
@@ -145,6 +146,7 @@ const ExtraCountersBar = ({
               )?.value
             }
             setCounterTotal={handleCounterChange}
+            playerIndex={player.index}
           />
         )}
         {usePoison && (
@@ -157,6 +159,7 @@ const ExtraCountersBar = ({
                 ?.value
             }
             setCounterTotal={handleCounterChange}
+            playerIndex={player.index}
           />
         )}
         {useEnergy && (
@@ -169,6 +172,7 @@ const ExtraCountersBar = ({
                 ?.value
             }
             setCounterTotal={handleCounterChange}
+            playerIndex={player.index}
           />
         )}
         {useExperience && (
@@ -182,6 +186,7 @@ const ExtraCountersBar = ({
               )?.value
             }
             setCounterTotal={handleCounterChange}
+            playerIndex={player.index}
           />
         )}
       </ExtraCountersGrid>

src/Components/PlayerMenu/Settings.tsx

@@ -183,6 +183,8 @@ const Settings = ({
         type="color"
         value={player.color}
         onChange={handleColorChange}
+        role="button"
+        aria-label="Color picker"
       />
       <TogglesSection $rotation={player.settings.rotation}>
         {player.settings.useCommanderDamage && (
@@ -207,6 +209,9 @@ const Settings = ({
                 />
               }
               onChange={handleSettingsChange}
+              role="checkbox"
+              aria-checked={player.settings.usePartner}
+              aria-label="Partner"
             />
           </CheckboxContainer>
         )}
@@ -232,6 +237,9 @@ const Settings = ({
               />
             }
             onChange={handleSettingsChange}
+            role="checkbox"
+            aria-checked={player.settings.usePoison}
+            aria-label="Poison"
           />
         </CheckboxContainer>
 
@@ -256,6 +264,9 @@ const Settings = ({
               />
             }
             onChange={handleSettingsChange}
+            role="checkbox"
+            aria-checked={player.settings.useEnergy}
+            aria-label="Energy"
           />
         </CheckboxContainer>
 
@@ -280,6 +291,9 @@ const Settings = ({
               />
             }
             onChange={handleSettingsChange}
+            role="checkbox"
+            aria-checked={player.settings.useExperience}
+            aria-label="Experience"
           />
         </CheckboxContainer>
       </TogglesSection>
@@ -293,6 +307,7 @@ const Settings = ({
             padding: '0 4px 0 4px',
           }}
           onClick={handleNewGame}
+          aria-label="Back to start"
         >
           Back to Start
         </Button>
@@ -305,6 +320,9 @@ const Settings = ({
             padding: '0 4px 0 4px',
           }}
           onClick={toggleFullscreen}
+          role="checkbox"
+          aria-checked={document.fullscreenElement ? true : false}
+          aria-label="Fullscreen toggle"
         >
           Fullscreen
         </Button>
@@ -317,6 +335,9 @@ const Settings = ({
             padding: '0 4px 0 4px',
           }}
           onClick={handleWakeLock}
+          role="checkbox"
+          aria-checked={wakeLock.active}
+          aria-label="Keep awake"
         >
           Keep Awake
         </Button>

vite.config.ts

@@ -1,12 +1,13 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react-swc'
+import react from '@vitejs/plugin-react-swc';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
   build: {
+    minify: 'esbuild',
     rollupOptions: {
-      external: ['babel-plugin-macros']
+      external: ['babel-plugin-macros'],
-    }
+    },
-  }
+  },
-})
+});