chore: add a meaningful alt text, add missing subtitles on video temp…

…late
solid-design-system · Nov 14, 2024 · a277694 · a277694
1 parent 410a437
commit a277694
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/packages/docs/src/stories/components/video.stories.ts b/packages/docs/src/stories/components/video.stories.ts
@@ -62,7 +62,7 @@ export const VideoElementWithPosterSlot = {
       </video>
       <img
         slot="poster"
-        alt="A generic placeholder video"
+        alt="Video highlighting Union Investment's digital transformation through a design system named SOLID that enhances accessibility, sustainability, and efficiency."
         class="w-[854px] aspect-video cover"
         src="./placeholders/images/architecture.jpg"
       />

diff --git a/packages/docs/src/stories/components/video.test.stories.ts b/packages/docs/src/stories/components/video.test.stories.ts
@@ -14,7 +14,7 @@ const videoConstant: ConstantDefinition = {
   type: 'slot',
   name: 'default',
   value:
-    '<video controls id="video-example" class="w-[854px] aspect-video"><source src="./placeholders/videos/ui-placeholder-video.mp4" type="video/mp4" />Your browser does not support the video tag.</video>'
+    '<video controls id="video-example" class="w-[854px] aspect-video"><source src="./placeholders/videos/ui-placeholder-video.webm" type="video/webm" />Your browser does not support the video tag.</video>'
 };
 const imageConstant: ConstantDefinition = {
   type: 'slot',
@@ -25,7 +25,7 @@ const posterConstant: ConstantDefinition = {
   type: 'slot',
   name: 'poster',
   value:
-    '<img slot="poster" alt="A generic placeholder video" class="w-[854px] aspect-video cover" src="./placeholders/images/architecture.jpg" />'
+    '<img slot="poster" alt="Video highlighting Union Investment\'s digital transformation through a design system named SOLID that enhances accessibility, sustainability, and efficiency." class="w-[854px] aspect-video cover" src="./placeholders/images/architecture.jpg" />'
 };
 const iconConstant: ConstantDefinition = {
   type: 'slot',

diff --git a/packages/docs/src/stories/templates/video-with-description-and-copyright.stories.ts b/packages/docs/src/stories/templates/video-with-description-and-copyright.stories.ts
@@ -17,12 +17,19 @@ export const VideoWithDescription = {
   render: () => html`
     <sd-video class="sd-media">
       <video controls class="aspect-video">
-        <source src="./placeholders/videos/ui-placeholder-video.mp4" type="video/mp4" />
+        <source src="./placeholders/videos/ui-placeholder-video.webm" type="video/webm" />
+        <track
+          label="English"
+          kind="subtitles"
+          srclang="en"
+          src="./placeholders/captions/ui-placeholder-video.vtt"
+          default
+        />
         Your browser does not support the video tag.
       </video>
       <img
         slot="poster"
-        alt="A generic placeholder video"
+        alt="Video highlighting Union Investment's digital transformation through a design system named SOLID that enhances accessibility, sustainability, and efficiency."
         class="aspect-video cover"
         src="./placeholders/images/architecture.jpg"
       />
@@ -44,12 +51,19 @@ export const VideoWithCopyright = {
     <div class="sd-copyright" style="--copyright:'© Union Investment 2024'">
       <sd-video>
         <video controls class="aspect-video">
-          <source src="./placeholders/videos/ui-placeholder-video.mp4" type="video/mp4" />
+          <source src="./placeholders/videos/ui-placeholder-video.webm" type="video/webm" />
+          <track
+            label="English"
+            kind="subtitles"
+            srclang="en"
+            src="./placeholders/captions/ui-placeholder-video.vtt"
+            default
+          />
           Your browser does not support the video tag.
         </video>
         <img
           slot="poster"
-          alt="A generic placeholder video"
+          alt="Video highlighting Union Investment's digital transformation through a design system named SOLID that enhances accessibility, sustainability, and efficiency."
           class="aspect-video cover"
           src="./placeholders/images/architecture.jpg"
         />