From 8372552a74e781dbcb70ab8b7d0cc9c520b41daa Mon Sep 17 00:00:00 2001
From: Assem Alwaseai <119125167+A909M@users.noreply.github.com>
Date: Mon, 13 Jan 2025 19:29:49 +0300
Subject: [PATCH] Add `alt` attribute to responsive image components (#3765)

* Add `alt` attribute to responsiveImage and responsiveImageWithPlaceholder components

* Update ToHtmlTest.php
---
 resources/views/responsiveImage.blade.php                | 2 +-
 resources/views/responsiveImageWithPlaceholder.blade.php | 2 +-
 tests/Feature/Media/ToHtmlTest.php                       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/views/responsiveImage.blade.php b/resources/views/responsiveImage.blade.php
index d98852b20..27c4a9243 100644
--- a/resources/views/responsiveImage.blade.php
+++ b/resources/views/responsiveImage.blade.php
@@ -1 +1 @@
-<img{!! $attributeString !!}@if($loadingAttributeValue) loading="{{ $loadingAttributeValue }}"@endif srcset="{{ $media->getSrcset($conversion) }}" src="{{ $media->getUrl($conversion) }}" width="{{ $width }}" height="{{ $height }}">
\ No newline at end of file
+<img{!! $attributeString !!}@if($loadingAttributeValue) loading="{{ $loadingAttributeValue }}"@endif srcset="{{ $media->getSrcset($conversion) }}" src="{{ $media->getUrl($conversion) }}" width="{{ $width }}" height="{{ $height }}" alt="{{ $media->name }}">
\ No newline at end of file
diff --git a/resources/views/responsiveImageWithPlaceholder.blade.php b/resources/views/responsiveImageWithPlaceholder.blade.php
index 00ec43194..f49e54fdd 100644
--- a/resources/views/responsiveImageWithPlaceholder.blade.php
+++ b/resources/views/responsiveImageWithPlaceholder.blade.php
@@ -1 +1 @@
-<img{!! $attributeString !!} @if($loadingAttributeValue) loading="{{ $loadingAttributeValue }}"@endif srcset="{{ $media->getSrcset($conversion) }}" onload="window.requestAnimationFrame(function(){if(!(size=getBoundingClientRect().width))return;onload=null;sizes=Math.ceil(size/window.innerWidth*100)+'vw';});" sizes="1px" src="{{ $media->getUrl($conversion) }}" width="{{ $width }}" height="{{ $height }}">
+<img{!! $attributeString !!} @if($loadingAttributeValue) loading="{{ $loadingAttributeValue }}"@endif srcset="{{ $media->getSrcset($conversion) }}" onload="window.requestAnimationFrame(function(){if(!(size=getBoundingClientRect().width))return;onload=null;sizes=Math.ceil(size/window.innerWidth*100)+'vw';});" sizes="1px" src="{{ $media->getUrl($conversion) }}" width="{{ $width }}" height="{{ $height }}" alt="{{ $media->name }}">
diff --git a/tests/Feature/Media/ToHtmlTest.php b/tests/Feature/Media/ToHtmlTest.php
index a0d480ee3..a5554f64a 100644
--- a/tests/Feature/Media/ToHtmlTest.php
+++ b/tests/Feature/Media/ToHtmlTest.php
@@ -122,7 +122,7 @@
 
     $imgTag = $media->refresh()->img();
 
-    expect($imgTag)->toEqual('<img srcset="/media/2/responsive-images/test___media_library_original_340_280.jpg 340w, /media/2/responsive-images/test___media_library_original_284_234.jpg 284w, /media/2/responsive-images/test___media_library_original_237_195.jpg 237w" src="/media/2/test.jpg" width="340" height="280">');
+    expect($imgTag)->toEqual('<img srcset="/media/2/responsive-images/test___media_library_original_340_280.jpg 340w, /media/2/responsive-images/test___media_library_original_284_234.jpg 284w, /media/2/responsive-images/test___media_library_original_237_195.jpg 237w" src="/media/2/test.jpg" width="340" height="280" alt="test">');
 });
 
 test('the loading attribute can be specified on the conversion', function () {