feat: image alts

src/app/tools/compare/page.tsx

@@ -815,6 +815,7 @@ export default function Page() {
                                     ] as const
                                   ).map((module, index) => (
                                     <img
+                                      alt={module}
                                       width={24}
                                       height={24}
                                       src={asset(
@@ -901,6 +902,10 @@ export default function Page() {
                                   <Flex direction="column" justify="center">
                                     {provisions.map((provision, index) => (
                                       <img
+                                        alt={
+                                          awaitedProvisionDefinitions[provision]
+                                            .name
+                                        }
                                         key={provision}
                                         src={asset(
                                           `/icons/provisions/${provision}.webp`,
@@ -1089,6 +1094,11 @@ export default function Page() {
                                   <Flex direction="column" justify="center">
                                     {consumables.map((consumable, index) => (
                                       <img
+                                        alt={
+                                          awaitedConsumableDefinitions[
+                                            consumable
+                                          ].name
+                                        }
                                         key={consumable}
                                         src={asset(
                                           `/icons/consumables/${consumable}.webp`,
@@ -1186,6 +1196,7 @@ export default function Page() {
                                 }}
                               >
                                 <img
+                                  alt={thisShell.name}
                                   width={16}
                                   height={16}
                                   src={asset(

src/app/tools/session/page.tsx

@@ -435,6 +435,7 @@ export default function Page() {
                   >
                     <Link href={`/tools/tankopedia/${tank.id}`}>
                       <img
+                        alt={tank.name}
                         draggable={false}
                         src={tankIcon(tank.id)}
                         style={{

src/app/tools/statistics/components/Day.tsx

@@ -71,6 +71,7 @@ export function Day({ offset }: DayProps) {
               }}
             >
               <img
+                alt="Tank icon"
                 draggable={false}
                 src={tankIcon(tank.id)}
                 style={{

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

src/commands/link.tsx

@@ -86,6 +86,7 @@ export const verifyCommand = new Promise<CommandRegistry>((resolve) => {
                 }}
               >
                 <img
+                  alt="avatar"
                   src={
                     interaction.user.avatarURL({ extension: 'png' }) ??
                     'https://i.stack.imgur.com/l60Hf.png'
@@ -139,6 +140,7 @@ export const verifyCommand = new Promise<CommandRegistry>((resolve) => {
                 }}
               >
                 <img
+                  alt="accounts linked"
                   src="https://i.imgur.com/jIcRgog.png"
                   style={{
                     width: 16,
@@ -160,6 +162,7 @@ export const verifyCommand = new Promise<CommandRegistry>((resolve) => {
               >
                 {clanAccountInfo?.clan ? (
                   <img
+                    alt="clan emblem"
                     style={{
                       width: 64,
                       height: 64,

src/commands/rating.tsx

@@ -142,6 +142,7 @@ export const ratingCommand = new Promise<CommandRegistry>((resolve) => {
                 }}
               >
                 <img
+                  alt={`League ${league.name}`}
                   style={{
                     width: 64,
                     height: 64,

src/commands/replay.tsx

@@ -271,6 +271,7 @@ async function playerListing(
         }}
       >
         <img
+          alt={tank.name}
           src={await iconPng(tankIcon(tank.id))}
           style={{
             width: 32,

src/commands/research.tsx

@@ -280,6 +280,7 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                   }}
                 >
                   <img
+                    alt="XP icon"
                     src={await iconPng(asset('icons/currencies/xp.webp'))}
                     width={16}
                     height={16}
@@ -305,6 +306,7 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                   }}
                 >
                   <img
+                    alt="Silver icon"
                     src={await iconPng(asset('icons/currencies/silver.webp'))}
                     width={16}
                     height={16}
@@ -330,6 +332,7 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                   }}
                 >
                   <img
+                    alt="Silver icon"
                     src={await iconPng(asset('icons/currencies/silver.webp'))}
                     width={16}
                     height={16}
@@ -390,6 +393,7 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                       }}
                     >
                       <img
+                        alt="Tank icon"
                         src={await tankIconPng(id)}
                         style={{
                           height: 100,
@@ -414,6 +418,7 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                         }}
                       >
                         <img
+                          alt={tank.name}
                           src={TANK_ICONS[tank.class]}
                           width={16}
                           height={16}
@@ -447,6 +452,7 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                         }}
                       >
                         <img
+                          alt="XP icon"
                           src={await iconPng(asset('icons/currencies/xp.webp'))}
                           width={16}
                           height={16}
@@ -474,6 +480,7 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                           }}
                         >
                           <img
+                            alt="Free XP icon"
                             src={await iconPng(
                               asset('icons/currencies/free-xp.webp'),
                             )}
@@ -501,6 +508,7 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                         }}
                       >
                         <img
+                          alt="Silver icon"
                           src={await iconPng(
                             asset('icons/currencies/silver.webp'),
                           )}
@@ -529,6 +537,7 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                         }}
                       >
                         <img
+                          alt="Silver icon"
                           src={await iconPng(
                             asset('icons/currencies/silver.webp'),
                           )}

src/components/Breakdown/components/Row.tsx

@@ -69,6 +69,7 @@ export function Row({
       >
         {type === 'tank' && tankType !== undefined && (
           <img
+            alt={tankType}
             src={TREE_TYPE_ICONS[treeType ?? 'researchable'][tankType]}
             style={{ width: 16, height: 16 }}
           />

src/components/Breakdown/components/RowStat.tsx

@@ -48,6 +48,7 @@ export function RowStat({
       >
         {percentile === undefined && delta !== undefined && delta !== 0 && (
           <img
+            alt={delta > 0 ? 'Increase' : 'Decrease'}
             src={
               (delta ?? 0) > 0
                 ? 'https://i.imgur.com/qbjiXa1.png'

src/components/DeltaCaret.tsx

@@ -5,6 +5,7 @@ interface DeltaCaretProps {
 export function DeltaCaret({ delta }: DeltaCaretProps) {
   return (
     <img
+      alt={delta > 0 ? 'Increase' : 'Decrease'}
       style={{
         width: 16,
         height: 16,

src/components/Flag.tsx

@@ -13,7 +13,7 @@ export function Flag({ nation }: FlagProps) {
         overflow: 'hidden',
       }}
     >
-      <img src={asset(`flags/circle/${nation}.webp`)} alt={nation} />
+      <img alt={nation} src={asset(`flags/circle/${nation}.webp`)} />
     </div>
   );
 }

src/components/Leaderboard/components/Item.tsx

@@ -90,6 +90,7 @@ export function Item({
           }}
         >
           <img
+            alt={deltaPosition > 0 ? 'Increase' : 'Decrease'}
             style={{
               width: 8,
               height: 8,
@@ -139,6 +140,7 @@ export function Item({
         )}
         {deltaScore !== 0 && deltaScore !== undefined && (
           <img
+            alt={deltaScore > 0 ? 'Increase' : 'Decrease'}
             style={{
               width: 8,
               height: 8,

src/components/ModuleButtons/GenericTankComponentButton.tsx

@@ -25,6 +25,7 @@ export function GenericTankComponentButton({
         }}
       >
         <img
+          alt={icon}
           draggable={false}
           src={icon}
           style={{

src/components/SmallTankIcon.tsx

@@ -18,6 +18,7 @@ export function SmallTankIcon({ id, size = HEIGHT }: SmallTankIconProps) {
       }}
     >
       <img
+        alt={`Tank ${id}`}
         src={asset(`icons/tanks/small/${id}.webp`)}
         style={{
           transform: `scale(${(size / HEIGHT) * 100}%)`,

src/components/Tanks/components/Item/index.tsx

@@ -43,6 +43,7 @@ export function Item({ tankType, name, treeType }: ItemProps) {
       >
         {tankType && (
           <img
+            alt={tankType}
             src={TREE_TYPE_ICONS[treeType][tankType]}
             style={{ width: 14, height: 14 }}
           />
@@ -61,6 +62,7 @@ export function Item({ tankType, name, treeType }: ItemProps) {
       {/* {image && (
         // TODO: remove hardcoded dimensions when satori fixes non-width unloadable images
         <img
+          alt={name}
           src={image}
           width={106}
           height={32}

src/components/TitleBar.tsx

@@ -28,6 +28,7 @@ export default function TitleBar({ title, image, description }: TitleBarProps) {
       >
         {image && (
           <img
+            alt={title}
             style={{ width: 32, height: 32, objectFit: 'contain' }}
             src={image}
           />