From 9d240501f0755bef68903002660f598cc6a037d8 Mon Sep 17 00:00:00 2001
From: simoleo89 <11816867+simoleo89@users.noreply.github.com>
Date: Wed, 17 Jun 2026 22:02:24 +0200
Subject: [PATCH] a11y: add alt="" to decorative <img> elements

11 JSX <img> elements (catalog page/header images, game logo, playlist title gifs, crafting/favorite icons) had no alt attribute, so screen readers announce the raw src URL. They're all decorative chrome with adjacent text labels, so mark them decorative with alt="".
---
 src/components/catalog/CatalogClassicView.tsx                 | 2 +-
 .../catalog/views/catalog-header/CatalogHeaderView.tsx        | 2 +-
 .../catalog/views/favorites/CatalogFavoritesView.tsx          | 2 +-
 .../catalog/views/page/layout/CatalogLayoutDefaultView.tsx    | 2 +-
 .../catalog/views/page/layout/CatalogLayoutTrophiesView.tsx   | 2 +-
 src/components/game-center/views/GameView.tsx                 | 2 +-
 .../room/widgets/furniture/FurnitureCraftingView.tsx          | 2 +-
 .../widgets/furniture/playlist-editor/DiskInventoryView.tsx   | 4 ++--
 .../widgets/furniture/playlist-editor/SongPlaylistView.tsx    | 4 ++--
 9 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/catalog/CatalogClassicView.tsx b/src/components/catalog/CatalogClassicView.tsx
index 0656d31..0f4fe9b 100644
--- a/src/components/catalog/CatalogClassicView.tsx
+++ b/src/components/catalog/CatalogClassicView.tsx
@@ -271,7 +271,7 @@ const CatalogClassicViewInner: FC<{}> = () =>
                                 <div className="nitro-catalog-classic-layout-header-shell">
                                     <CatalogBreadcrumbView />
                                     <div className="nitro-catalog-classic-layout-hero">
-                                        { !!currentPage?.localization?.getImage(0) && <img src={ currentPage.localization.getImage(0) } /> }
+                                        { !!currentPage?.localization?.getImage(0) && <img alt="" src={ currentPage.localization.getImage(0) } /> }
                                     </div>
                                 </div>
                                 <div className="nitro-catalog-classic-layout-container">
diff --git a/src/components/catalog/views/catalog-header/CatalogHeaderView.tsx b/src/components/catalog/views/catalog-header/CatalogHeaderView.tsx
index f750f01..9f79988 100644
--- a/src/components/catalog/views/catalog-header/CatalogHeaderView.tsx
+++ b/src/components/catalog/views/catalog-header/CatalogHeaderView.tsx
@@ -12,7 +12,7 @@ export const CatalogHeaderView: FC<CatalogHeaderViewProps> = props =>
     const displayImageUrl = imageUrl ?? GetConfigurationValue<string>('catalog.asset.image.url').replace('%name%', 'catalog_header_roombuilder');
 
     return <div className="flex justify-center items-center w-full nitro-catalog-header">
-        <img src={ displayImageUrl } onError={ ({ currentTarget }) =>
+        <img alt="" src={ displayImageUrl } onError={ ({ currentTarget }) =>
         {
             currentTarget.src = GetConfigurationValue<string>('catalog.asset.image.url').replace('%name%', 'catalog_header_roombuilder');
         } } />
diff --git a/src/components/catalog/views/favorites/CatalogFavoritesView.tsx b/src/components/catalog/views/favorites/CatalogFavoritesView.tsx
index 0de88c5..6f1366e 100644
--- a/src/components/catalog/views/favorites/CatalogFavoritesView.tsx
+++ b/src/components/catalog/views/favorites/CatalogFavoritesView.tsx
@@ -133,7 +133,7 @@ export const CatalogFavoritesView: FC<CatalogFavoritesViewProps> = props =>
                                     { /* Furni icon */ }
                                     <div className="w-7 h-7 flex items-center justify-center shrink-0 bg-white rounded border border-card-grid-item-border overflow-hidden">
                                         { fav.iconUrl
-                                            ? <img className="max-w-full max-h-full object-contain image-rendering-pixelated" src={ fav.iconUrl } />
+                                            ? <img alt="" className="max-w-full max-h-full object-contain image-rendering-pixelated" src={ fav.iconUrl } />
                                             : fav.nodeIconId !== null
                                                 ? <CatalogIconView icon={ fav.nodeIconId } />
                                                 : <FaHeart className="text-[9px] text-muted" />
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
index f41ff31..f99b9ab 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
@@ -95,7 +95,7 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
                 { !currentOffer &&
                     <div className="nitro-catalog-classic-welcome flex items-center gap-3">
                         { !!page.localization.getImage(1) &&
-                            <img className="w-[70px] h-[70px] object-contain rounded shrink-0" src={ page.localization.getImage(1) } /> }
+                            <img alt="" className="w-[70px] h-[70px] object-contain rounded shrink-0" src={ page.localization.getImage(1) } /> }
                         <Text className="text-[11px]! text-muted" dangerouslySetInnerHTML={ { __html: SanitizeHtml(page.localization.getText(0)) } } />
                     </div> }
             </div>
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
index 6bc187c..6412ce6 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
@@ -99,7 +99,7 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
                 </div>
                 : <div className="flex items-start gap-3 p-2.5 bg-white rounded border-2 border-card-grid-item-border">
                     { !!page.localization.getImage(1) &&
-                        <img className="w-[50px] h-[50px] object-contain rounded shrink-0 mt-0.5" src={ page.localization.getImage(1) } /> }
+                        <img alt="" className="w-[50px] h-[50px] object-contain rounded shrink-0 mt-0.5" src={ page.localization.getImage(1) } /> }
                     <div className="min-w-0">
                         <div className="flex items-center gap-1.5 mb-1">
                             <FaTrophy className="text-warning text-[11px]" />
diff --git a/src/components/game-center/views/GameView.tsx b/src/components/game-center/views/GameView.tsx
index c5d3561..79ee92f 100644
--- a/src/components/game-center/views/GameView.tsx
+++ b/src/components/game-center/views/GameView.tsx
@@ -40,7 +40,7 @@ export const GameView = () =>
     return <Flex fullHeight className="game-view py-4" style={ { backgroundColor: getBgColour(), backgroundImage: getBgImage(), color: getColor() } }>
         <Flex column alignItems="center" className="w-75" gap={ 2 }>
             <Text bold>{ LocalizeText(`gamecenter.${ selectedGame.gameNameId }.description_title`) }</Text>
-            <img src={ selectedGame.assetUrl + selectedGame.gameNameId + '_logo.png' }/>
+            <img alt="" src={ selectedGame.assetUrl + selectedGame.gameNameId + '_logo.png' }/>
             { (accountStatus.hasUnlimitedGames || accountStatus.freeGamesLeft > 0) && <>
                 <Button className="px-4" position="relative" variant="light" onClick={ onPlay }>
                     { LocalizeText('gamecenter.play_now') }
diff --git a/src/components/room/widgets/furniture/FurnitureCraftingView.tsx b/src/components/room/widgets/furniture/FurnitureCraftingView.tsx
index 67b8055..803a73d 100644
--- a/src/components/room/widgets/furniture/FurnitureCraftingView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureCraftingView.tsx
@@ -96,7 +96,7 @@ export const FurnitureCraftingView: FC<{}> = props =>
                                     <div className="py-1 text-center">{ LocalizeText('crafting.result') }</div>
                                     <div className="flex items-center justify-center flex-col h-full pb-1 gap-1">
                                         <div className="flex flex-col h-full">
-                                            <img src={ selectedRecipe.iconUrl } />
+                                            <img alt="" src={ selectedRecipe.iconUrl } />
                                         </div>
                                         <div className="text-black">{ selectedRecipe.localizedName }</div>
                                     </div>
diff --git a/src/components/room/widgets/furniture/playlist-editor/DiskInventoryView.tsx b/src/components/room/widgets/furniture/playlist-editor/DiskInventoryView.tsx
index a081ce1..4fc6219 100644
--- a/src/components/room/widgets/furniture/playlist-editor/DiskInventoryView.tsx
+++ b/src/components/room/widgets/furniture/playlist-editor/DiskInventoryView.tsx
@@ -53,7 +53,7 @@ export const DiskInventoryView: FC<DiskInventoryViewProps> = props =>
 
     return (<>
         <div className="flex justify-center py-3 rounded bg-success container-fluid">
-            <img className="my-music" src={ GetConfigurationValue('image.library.url') + 'playlist/title_mymusic.gif' } />
+            <img alt="" className="my-music" src={ GetConfigurationValue('image.library.url') + 'playlist/title_mymusic.gif' } />
             <h2 className="ms-4">{ LocalizeText('playlist.editor.my.music') }</h2>
         </div>
         <div className="h-full py-2 mt-4 overflow-y-scroll">
@@ -89,6 +89,6 @@ export const DiskInventoryView: FC<DiskInventoryViewProps> = props =>
             <div>{ LocalizeText('playlist.editor.text.you.can.buy.some.from.the.catalogue') }</div>
             <button className="btn btn-primary btn-sm" onClick={ () => openCatalogPage() }>{ LocalizeText('playlist.editor.button.open.catalogue') }</button>
         </div>
-        <img className="get-more" src={ `${ GetConfigurationValue('image.library.url') }playlist/background_get_more_music.gif` } />
+        <img alt="" className="get-more" src={ `${ GetConfigurationValue('image.library.url') }playlist/background_get_more_music.gif` } />
     </>);
 };
diff --git a/src/components/room/widgets/furniture/playlist-editor/SongPlaylistView.tsx b/src/components/room/widgets/furniture/playlist-editor/SongPlaylistView.tsx
index 95289a7..ccfa1e4 100644
--- a/src/components/room/widgets/furniture/playlist-editor/SongPlaylistView.tsx
+++ b/src/components/room/widgets/furniture/playlist-editor/SongPlaylistView.tsx
@@ -29,7 +29,7 @@ export const SongPlaylistView: FC<SongPlaylistViewProps> = props =>
 
     return (<>
         <div className="bg-primary py-3 container-fluid justify-center flex rounded">
-            <img className="playlist-img" src={ GetConfigurationValue('image.library.url') + 'playlist/title_playlist.gif' } />
+            <img alt="" className="playlist-img" src={ GetConfigurationValue('image.library.url') + 'playlist/title_playlist.gif' } />
             <h2 className="ms-4">{ LocalizeText('playlist.editor.playlist') }</h2>
         </div>
         <div className="h-full overflow-y-scroll py-2">
@@ -49,7 +49,7 @@ export const SongPlaylistView: FC<SongPlaylistViewProps> = props =>
                 <h5>{ LocalizeText('playlist.editor.add.songs.to.your.playlist') }</h5>
                 <div>{ LocalizeText('playlist.editor.text.click.song.to.choose.click.again.to.move') }</div>
             </div>
-            <img className="add-songs" src={ GetConfigurationValue('image.library.url') + 'playlist/background_add_songs.gif' } /></>
+            <img alt="" className="add-songs" src={ GetConfigurationValue('image.library.url') + 'playlist/background_add_songs.gif' } /></>
         }
         { (playlist && playlist.length > 0) &&
             <>