From 97cd218796b6c44c335c07e7167a9f1daea6c3b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 4 May 2024 16:28:12 -0500
Subject: [PATCH] feat: image alts

---
 src/app/tools/compare/page.tsx                        | 11 +++++++++++
 src/app/tools/session/page.tsx                        |  1 +
 src/app/tools/statistics/components/Day.tsx           |  1 +
 .../components/Characteristics/components/Modules.tsx |  2 ++
 .../[id]/components/Characteristics/index.tsx         |  1 +
 .../[id]/components/Model/TechTreeSection.tsx         |  4 ++++
 .../[id]/components/Model/components/Options.tsx      |  3 +++
 .../QuickInputs/components/QuickEquipmentButton.tsx   |  1 +
 src/app/tools/tankopedia/[id]/components/Title.tsx    |  1 +
 src/app/tools/tankopedia/[id]/components/Videos.tsx   |  6 +++---
 .../TankSearch/components/Options/index.tsx           |  2 ++
 .../tools/tankopedia/components/TankSearch/index.tsx  |  3 +++
 src/commands/link.tsx                                 |  3 +++
 src/commands/rating.tsx                               |  1 +
 src/commands/replay.tsx                               |  1 +
 src/commands/research.tsx                             |  9 +++++++++
 src/components/Breakdown/components/Row.tsx           |  1 +
 src/components/Breakdown/components/RowStat.tsx       |  1 +
 src/components/DeltaCaret.tsx                         |  1 +
 src/components/Flag.tsx                               |  2 +-
 src/components/Leaderboard/components/Item.tsx        |  2 ++
 .../ModuleButtons/GenericTankComponentButton.tsx      |  1 +
 src/components/SmallTankIcon.tsx                      |  1 +
 src/components/Tanks/components/Item/index.tsx        |  2 ++
 src/components/TitleBar.tsx                           |  1 +
 25 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx
index ee2e3fd3f..8fac4e87f 100644
--- a/src/app/tools/compare/page.tsx
+++ b/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(
diff --git a/src/app/tools/session/page.tsx b/src/app/tools/session/page.tsx
index 860cabe5d..532700f6f 100644
--- a/src/app/tools/session/page.tsx
+++ b/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={{
diff --git a/src/app/tools/statistics/components/Day.tsx b/src/app/tools/statistics/components/Day.tsx
index b5959aac9..f7d48b4b5 100644
--- a/src/app/tools/statistics/components/Day.tsx
+++ b/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={{
diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx
index 6fb26be21..8277acf3c 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx
+++ b/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)
diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
index 49f89d61d..6f8ccd968 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
+++ b/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`)}
diff --git a/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx
index 302fe9389..efc575ed3 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx
+++ b/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',
diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
index e60949ebf..848802e1d 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
+++ b/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')}
diff --git a/src/app/tools/tankopedia/[id]/components/QuickInputs/components/QuickEquipmentButton.tsx b/src/app/tools/tankopedia/[id]/components/QuickInputs/components/QuickEquipmentButton.tsx
index 865102b24..45952d955 100644
--- a/src/app/tools/tankopedia/[id]/components/QuickInputs/components/QuickEquipmentButton.tsx
+++ b/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}
diff --git a/src/app/tools/tankopedia/[id]/components/Title.tsx b/src/app/tools/tankopedia/[id]/components/Title.tsx
index ef7510761..25e39d1d6 100644
--- a/src/app/tools/tankopedia/[id]/components/Title.tsx
+++ b/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
diff --git a/src/app/tools/tankopedia/[id]/components/Videos.tsx b/src/app/tools/tankopedia/[id]/components/Videos.tsx
index 818082a49..c6be7df2f 100644
--- a/src/app/tools/tankopedia/[id]/components/Videos.tsx
+++ b/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',
diff --git a/src/app/tools/tankopedia/components/TankSearch/components/Options/index.tsx b/src/app/tools/tankopedia/components/TankSearch/components/Options/index.tsx
index 7143cb346..71b91e48a 100644
--- a/src/app/tools/tankopedia/components/TankSearch/components/Options/index.tsx
+++ b/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' }}
             />
diff --git a/src/app/tools/tankopedia/components/TankSearch/index.tsx b/src/app/tools/tankopedia/components/TankSearch/index.tsx
index c0473165c..e66a765d7 100644
--- a/src/app/tools/tankopedia/components/TankSearch/index.tsx
+++ b/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
diff --git a/src/commands/link.tsx b/src/commands/link.tsx
index 6b8f8fda2..dc9e97235 100644
--- a/src/commands/link.tsx
+++ b/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,
diff --git a/src/commands/rating.tsx b/src/commands/rating.tsx
index 48ea5d0e0..51a19c3d7 100644
--- a/src/commands/rating.tsx
+++ b/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,
diff --git a/src/commands/replay.tsx b/src/commands/replay.tsx
index 46228e82b..eebe918df 100644
--- a/src/commands/replay.tsx
+++ b/src/commands/replay.tsx
@@ -271,6 +271,7 @@ async function playerListing(
         }}
       >
         <img
+          alt={tank.name}
           src={await iconPng(tankIcon(tank.id))}
           style={{
             width: 32,
diff --git a/src/commands/research.tsx b/src/commands/research.tsx
index 5fcdeb1cd..42f695a59 100644
--- a/src/commands/research.tsx
+++ b/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'),
                           )}
diff --git a/src/components/Breakdown/components/Row.tsx b/src/components/Breakdown/components/Row.tsx
index e2258d9d0..c3c6e2ad6 100644
--- a/src/components/Breakdown/components/Row.tsx
+++ b/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 }}
           />
diff --git a/src/components/Breakdown/components/RowStat.tsx b/src/components/Breakdown/components/RowStat.tsx
index 799bde959..7ba8935a9 100644
--- a/src/components/Breakdown/components/RowStat.tsx
+++ b/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'
diff --git a/src/components/DeltaCaret.tsx b/src/components/DeltaCaret.tsx
index 9e2126c25..15c1ae8aa 100644
--- a/src/components/DeltaCaret.tsx
+++ b/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,
diff --git a/src/components/Flag.tsx b/src/components/Flag.tsx
index 99214af79..63c16fcbc 100644
--- a/src/components/Flag.tsx
+++ b/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>
   );
 }
diff --git a/src/components/Leaderboard/components/Item.tsx b/src/components/Leaderboard/components/Item.tsx
index e863233ac..117db73d8 100644
--- a/src/components/Leaderboard/components/Item.tsx
+++ b/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,
diff --git a/src/components/ModuleButtons/GenericTankComponentButton.tsx b/src/components/ModuleButtons/GenericTankComponentButton.tsx
index a8057673c..d4172a9e8 100644
--- a/src/components/ModuleButtons/GenericTankComponentButton.tsx
+++ b/src/components/ModuleButtons/GenericTankComponentButton.tsx
@@ -25,6 +25,7 @@ export function GenericTankComponentButton({
         }}
       >
         <img
+          alt={icon}
           draggable={false}
           src={icon}
           style={{
diff --git a/src/components/SmallTankIcon.tsx b/src/components/SmallTankIcon.tsx
index c3468e760..aeea40447 100644
--- a/src/components/SmallTankIcon.tsx
+++ b/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}%)`,
diff --git a/src/components/Tanks/components/Item/index.tsx b/src/components/Tanks/components/Item/index.tsx
index abfb60a72..3619808c3 100644
--- a/src/components/Tanks/components/Item/index.tsx
+++ b/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}
diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
index abd76060f..96b2739ce 100644
--- a/src/components/TitleBar.tsx
+++ b/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}
           />