feat: image alts

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}
           />