feat: image alts

src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx

@@ -75,6 +75,7 @@ function ModuleButton({
           </Text>
 
           <img
+            alt={unlock.cost.type}
             src={asset(`icons/currencies/${unlock.cost.type}.webp`)}
             style={{
               width: 12,
@@ -86,6 +87,7 @@ function ModuleButton({
       )}
 
       <img
+        alt={unlock.type}
         src={
           unlock.type === 'vehicle'
             ? tankIcon(unlock.id)

src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx

@@ -158,6 +158,7 @@ export function Characteristics() {
                   }}
                 >
                   <img
+                    alt={thisShell.name}
                     width={16}
                     height={16}
                     src={asset(`icons/shells/${thisShell.icon}.webp`)}

src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx

@@ -69,6 +69,7 @@ export function TechTreeSection() {
       >
         <Flex direction="column" align="center">
           <img
+            alt={ancestor.name}
             src={asset(`icons/tanks/big/${id}.webp`)}
             width={64}
             height={64}
@@ -88,6 +89,7 @@ export function TechTreeSection() {
             <Flex gap="2" align="center">
               <Flex gap="1" align="center">
                 <img
+                  alt="XP"
                   src={asset('icons/currencies/xp.webp')}
                   width={16}
                   height={16}
@@ -102,6 +104,7 @@ export function TechTreeSection() {
 
               <Flex gap="1" align="center">
                 <img
+                  alt="Silver"
                   src={asset('icons/currencies/silver.webp')}
                   width={16}
                   height={16}
@@ -136,6 +139,7 @@ export function TechTreeSection() {
       highlight
     >
       <img
+        alt={tank.nation}
         src={asset(`flags/scratched/${tank.nation}.webp`)}
         style={{
           position: 'absolute',

src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx

@@ -110,6 +110,7 @@ export function Options() {
                 }}
               >
                 <img
+                  alt={thisShell.name}
                   width={16}
                   height={16}
                   src={asset(`icons/shells/${thisShell.icon}.webp`)}
@@ -135,6 +136,7 @@ export function Options() {
               }}
             >
               <img
+                alt="Calibrated Shells"
                 width={16}
                 height={16}
                 src={asset('icons/equipment/103.webp')}
@@ -157,6 +159,7 @@ export function Options() {
               }}
             >
               <img
+                alt="Enhanced Armor"
                 width={16}
                 height={16}
                 src={asset('icons/equipment/110.webp')}

src/app/tools/tankopedia/[id]/components/QuickInputs/components/QuickEquipmentButton.tsx

@@ -15,6 +15,7 @@ export function QuickEquipmentButton({
   return (
     <Button variant="ghost" {...props}>
       <img
+        alt={`Equipment ${equipment}`}
         style={{ opacity: active ? 1 : 0.5 }}
         src={asset(`icons/equipment/${equipment}.webp`)}
         width={24}

src/app/tools/tankopedia/[id]/components/Title.tsx

@@ -38,6 +38,7 @@ export function Title() {
           >
             <Flex align="center" gap="2">
               <img
+                alt={protagonist.tank.name}
                 src={
                   TREE_TYPE_ICONS[protagonist.tank.treeType][
                     protagonist.tank.class

src/app/tools/tankopedia/[id]/components/Videos.tsx

@@ -1,4 +1,4 @@
-import { Flex, Heading, Link, Separator } from '@radix-ui/themes';
+import { Flex, Heading, Link } from '@radix-ui/themes';
 import { use } from 'react';
 import PageWrapper from '../../../../../components/PageWrapper';
 import { videoDefinitions } from '../../../../../core/blitzkit/videos';
@@ -15,8 +15,7 @@ export function Videos() {
 
   return (
     <PageWrapper>
-
-      <Flex direction="column" gap="4" mt="4" align="start">
+      <Flex direction="column" gap="4" align="start">
         <Heading size="6">Review videos</Heading>
 
         <Flex gap="3" wrap="wrap">
@@ -27,6 +26,7 @@ export function Videos() {
               target="_blank"
             >
               <img
+                alt="Video thumbnail"
                 src={`https://i.ytimg.com/vi/${video}/hqdefault.jpg`}
                 style={{
                   aspectRatio: '16 / 9',

src/app/tools/tankopedia/components/TankSearch/components/Options/index.tsx

@@ -57,6 +57,7 @@ export function Options() {
             }
           >
             <img
+              alt={type}
               src={TREE_TYPE_IMAGES[type]}
               style={{ width: '1em', height: '1em' }}
             />
@@ -124,6 +125,7 @@ export function Options() {
             }
           >
             <img
+              alt={type}
               src={TREE_TYPE_ICONS.researchable[type]}
               style={{ width: '1em', height: '1em' }}
             />

src/app/tools/tankopedia/components/TankSearch/index.tsx

@@ -910,6 +910,7 @@ export function TankSearch({
                   }}
                 >
                   <img
+                    alt={tank.name}
                     className={styles.flag}
                     src={asset(`flags/scratched/${tank.nation}.webp`)}
                     style={{
@@ -938,6 +939,7 @@ export function TankSearch({
                     className={styles.listingImage}
                   >
                     <img
+                      alt={tank.name}
                       src={tankIcon(tank.id)}
                       style={{
                         objectFit: 'contain',
@@ -960,6 +962,7 @@ export function TankSearch({
                   >
                     <Flex align="center" justify="center" gap="1">
                       <img
+                        alt={tank.name}
                         src={
                           (tank.treeType === 'collector'
                             ? TANK_ICONS_COLLECTOR