Added aria-label to iframe for all services (#21)

* Added aria-label to iframe for all services * Put back missing allowfullscreen
BenSampo · Dec 6, 2023 · 770ea63 · 770ea63
1 parent ba5b70f
commit 770ea63
Show file tree

Hide file tree

Showing 16 changed files with 87 additions and 28 deletions.
diff --git a/resources/views/services/dailymotion.blade.php b/resources/views/services/dailymotion.blade.php
@@ -1,8 +1,9 @@
 <x-embed-responsive-wrapper :aspect-ratio="$aspectRatio">
-    <iframe 
-        frameborder="0" 
-        type="text/html" 
-        src="https://www.dailymotion.com/embed/video/{{ $videoId }}" 
-        allowfullscreen>
-    </iframe>
+    <iframe
+            aria-label="{{ $label }}"
+            frameborder="0"
+            type="text/html"
+            src="https://www.dailymotion.com/embed/video/{{ $videoId }}"
+            allowfullscreen
+    ></iframe>
 </x-embed-responsive-wrapper>
diff --git a/resources/views/services/googlemaps.blade.php b/resources/views/services/googlemaps.blade.php
@@ -1,9 +1,10 @@
 <x-embed-responsive-wrapper :aspect-ratio="$aspectRatio">
     <iframe
-        src="{{ $iframeUrl }}"
-        frameborder="0"
-        allowfullscreen=""
-        loading="lazy"
-        referrerpolicy="no-referrer-when-downgrade"
+            aria-label="{{ $label }}"
+            src="{{ $iframeUrl }}"
+            frameborder="0"
+            allowfullscreen=""
+            loading="lazy"
+            referrerpolicy="no-referrer-when-downgrade"
     ></iframe>
 </x-embed-responsive-wrapper>
diff --git a/resources/views/services/miro.blade.php b/resources/views/services/miro.blade.php
@@ -1,3 +1,9 @@
 <x-embed-responsive-wrapper :aspect-ratio="$aspectRatio">
-    <iframe src="{{ $iframeUrl }}" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
+    <iframe
+            aria-label="{{ $label }}"
+            src="{{ $iframeUrl }}"
+            frameborder="0"
+            allow="autoplay; fullscreen"
+            allowfullscreen
+    ></iframe>
 </x-embed-responsive-wrapper>
diff --git a/resources/views/services/slideshare.blade.php b/resources/views/services/slideshare.blade.php
@@ -1,3 +1,9 @@
 <x-embed-responsive-wrapper :aspect-ratio="$aspectRatio">
-    <iframe src="{{ $iframeUrl }}" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
+    <iframe 
+            aria-label="{{ $label }}"
+            src="{{ $iframeUrl }}"
+            frameborder="0"
+            allow="autoplay; fullscreen"
+            allowfullscreen
+    ></iframe>
 </x-embed-responsive-wrapper>
diff --git a/resources/views/services/vimeo.blade.php b/resources/views/services/vimeo.blade.php
@@ -1,3 +1,9 @@
 <x-embed-responsive-wrapper :aspect-ratio="$aspectRatio">
-    <iframe src="https://player.vimeo.com/video/{{ $videoId }}@if($videoHash)?h={{ $videoHash}}@endif" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
+    <iframe 
+            aria-label="{{ $label }}"
+            src="https://player.vimeo.com/video/{{ $videoId }}@if($videoHash)?h={{ $videoHash}}@endif"
+            frameborder="0"
+            allow="autoplay; fullscreen"
+            allowfullscreen
+    ></iframe>
 </x-embed-responsive-wrapper>
diff --git a/resources/views/services/youtube.blade.php b/resources/views/services/youtube.blade.php
@@ -1,8 +1,9 @@
 <x-embed-responsive-wrapper :aspect-ratio="$aspectRatio">
-    <iframe 
-        src="https://www.youtube-nocookie.com/embed/{{ $videoId }}" 
-        frameborder="0" 
-        allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" 
-        allowfullscreen>
-    </iframe>
+    <iframe
+        aria-label="foo {{ $label }}"
+        src="https://www.youtube-nocookie.com/embed/{{ $videoId }}"
+        frameborder="0"
+        allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+    ></iframe>
 </x-embed-responsive-wrapper>
diff --git a/src/ServiceBase.php b/src/ServiceBase.php
@@ -2,17 +2,20 @@
 
 namespace BenSampo\Embed;
 
-use Illuminate\Support\Str;
-use Illuminate\Contracts\View\View;
+use BenSampo\Embed\ValueObjects\Ratio;
 use BenSampo\Embed\ValueObjects\Url;
+use Illuminate\Contracts\View\View;
 use Illuminate\Support\Facades\Cache;
-use BenSampo\Embed\ValueObjects\Ratio;
+use Illuminate\Support\Str;
 
 abstract class ServiceBase implements ServiceContract
 {
     protected Url $url;
+
     protected ?Ratio $aspectRatio;
 
+    protected ?string $label;
+
     public function __construct(Url $url)
     {
         $this->url = $url;
@@ -22,15 +25,16 @@ abstract public static function detect(Url $url): bool;
 
     public function cacheAndRender(): string
     {
-        return Cache::rememberForever($this->cacheKey(), function() {
+        return Cache::rememberForever($this->cacheKey(), function () {
             return $this->view()->render();
         });
     }
-    
+
     public function view(): View
     {
         return view($this->fullyQualifiedViewName(), array_merge($this->viewData(), [
             'aspectRatio' => $this->aspectRatio(),
+            'label'       => $this->label(),
         ]));
     }
 
@@ -41,6 +45,13 @@ public function setAspectRatio(?Ratio $aspectRatio): ServiceContract
         return $this;
     }
 
+    public function setLabel(?string $label): ServiceContract
+    {
+        $this->label = $label ?? $this->defaultLabel();
+
+        return $this;
+    }
+
     protected function viewName(): string
     {
         return $this->guessViewName();
@@ -51,11 +62,21 @@ protected function aspectRatio(): Ratio
         return $this->aspectRatio ?? $this->defaultAspectRatio();
     }
 
+    protected function label(): string
+    {
+        return $this->label ?? $this->defaultLabel();
+    }
+
     protected function defaultAspectRatio(): Ratio
     {
         return new Ratio('16:9');
     }
 
+    protected function defaultLabel(): string
+    {
+        return __('An embedded video');
+    }
+
     private function fullyQualifiedViewName(): string
     {
         return 'embed::services.' . $this->viewName();
@@ -74,9 +95,10 @@ protected function guessViewName(): string
     protected function cacheKey(): string
     {
         $serviceName = class_basename(static::class);
-        $url = (string) $this->url;
+        $url         = (string) $this->url;
+        $label       = $this->label();
         $aspectRatio = $this->aspectRatio()->width . ':' . $this->aspectRatio()->height;
 
-        return $serviceName . '_' . $url . '_' . $aspectRatio;
+        return $serviceName . '_' . $url . '_' . $aspectRatio . '_' . $label;
     }
 }
diff --git a/src/ServiceContract.php b/src/ServiceContract.php
@@ -12,4 +12,5 @@ public static function detect(Url $url): bool;
     public function view(): View;
     public function cacheAndRender(): string;
     public function setAspectRatio(?Ratio $aspectRatio): ServiceContract;
+    public function setLabel(?string $label): ServiceContract;
 }
diff --git a/src/ViewComponents/EmbedViewComponent.php b/src/ViewComponents/EmbedViewComponent.php
@@ -14,11 +14,13 @@ class EmbedViewComponent extends Component
     protected ServiceContract $service;
     protected Url $url;
     protected ?Ratio $aspectRatio;
+    protected ?string $label;
 
-    public function __construct(string $url, string $aspectRatio = null)
+    public function __construct(string $url, string $aspectRatio = null, string $label = null)
     {
         $this->url = new Url($url);
         $this->aspectRatio = $aspectRatio ? new Ratio($aspectRatio) : null;
+        $this->label = $label;
     }
 
     public function render(): string
@@ -31,6 +33,7 @@ public function render(): string
 
         return $this->service
             ->setAspectRatio($this->aspectRatio)
+            ->setLabel($this->label)
             ->cacheAndRender();
     }
 }
diff --git a/tests/ServiceBaseTest.php b/tests/ServiceBaseTest.php
@@ -44,4 +44,10 @@ public function test_it_can_set_the_aspect_ratio()
         $ratio = new Ratio('4:3');
         $this->assertEquals($ratio, $this->dummyService1->setAspectRatio($ratio)->view()->getData()['aspectRatio']);
     }
+
+    public function test_it_can_set_a_label()
+    {
+        $label = 'A different aria label';
+        $this->assertEquals($label, $this->dummyService1->setLabel($label)->view()->getData()['label']);
+    }
 }
diff --git a/tests/Services/DailymotionTest.php b/tests/Services/DailymotionTest.php
@@ -21,6 +21,7 @@ protected function expectedViewData(): array
     {
         return [
             'videoId' => 'xg4y8d',
+            'label' => 'An embedded video',
         ];
     }
 

diff --git a/tests/Services/GoogleMapsTest.php b/tests/Services/GoogleMapsTest.php
@@ -21,6 +21,7 @@ protected function expectedViewData(): array
     {
         return [
             'iframeUrl' => 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.6803818653148!2d-0.12720032263547887!3d51.50073251118933!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604c38c8cd1d9%3A0xb78f2474b9a45aa9!2sBig%20Ben!5e0!3m2!1sen!2suk!4v1683805199103!5m2!1sen!2suk',
+            'label' => 'An embedded video',
         ];
     }
 

diff --git a/tests/Services/MiroTest.php b/tests/Services/MiroTest.php
@@ -38,6 +38,7 @@ protected function expectedViewData(): array
     {
         return [
             'iframeUrl' => 'https://miro.com/app/embed/o9J_kquX_s8=/?autoplay=yep',
+            'label' => 'An embedded video',
         ];
     }
 

diff --git a/tests/Services/SlideshareTest.php b/tests/Services/SlideshareTest.php
@@ -21,6 +21,7 @@ protected function expectedViewData(): array
     {
         return [
             'iframeUrl' => 'https://www.slideshare.net/slideshow/embed_code/key/6PCWPGFw9SwsAY',
+            'label' => 'An embedded video',
         ];
     }
 

diff --git a/tests/Services/VimeoTest.php b/tests/Services/VimeoTest.php
@@ -21,6 +21,7 @@ protected function expectedViewData(): array
     {
         return [
             'videoId' => '148751763',
+            'label' => 'An embedded video',
         ];
     }
 

diff --git a/tests/Services/YouTubeTest.php b/tests/Services/YouTubeTest.php
@@ -21,6 +21,7 @@ protected function expectedViewData(): array
     {
         return [
             'videoId' => 'dQw4w9WgXcQ',
+            'label' => 'An embedded video',
         ];
     }