fix: improve sd-video a11y

packages/components/src/components/video/video.test.ts

@@ -1,12 +1,13 @@
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import type SdVideo from './video';
 
 const defaultSlot = html`<video controls>
   <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
   Your browser does not support the video tag.
 </video>`;
-const posterSlot = html`<img slot="poster" alt="poster" src="" />`;
+const posterSlot = html`<img slot="poster" alt="A generic placeholder video" src="" />`;
 const playIconSlot = html`<sd-icon library="system" name="start" color="primary"></sd-icon>`;
 const variants = {
   default: html`<sd-video>${defaultSlot}</sd-video>`,
@@ -85,29 +86,59 @@ describe('<sd-video>', () => {
     });
   });
 
-  describe('when "play-icon" is interacted with via Keyboard', () => {
-    it('emits "sd-play" event ', async () => {
-      const el: SdVideo = await fixture(variants.default);
-      const playSpy = sinon.spy();
-      el.addEventListener('sd-play', playSpy);
-      el.shadowRoot?.querySelector('button')?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-      expect(playSpy.calledOnce).to.be.true;
+  describe('when interacted with via Keyboard', () => {
+    describe('"play-icon"', () => {
+      it('emits "sd-play" event', async () => {
+        const el: SdVideo = await fixture(variants.default);
+        const playSpy = sinon.spy();
+        el.addEventListener('sd-play', playSpy);
+        el.shadowRoot?.querySelector('button')?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+        expect(playSpy.calledOnce).to.be.true;
+      });
+
+      it('toggles playing property', async () => {
+        const el: SdVideo = await fixture(variants.default);
+        el.shadowRoot?.querySelector('button')?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+        expect(el.playing).to.be.true;
+      });
+
+      it('updates overlay class', async () => {
+        const el: SdVideo = await fixture(variants.overlay);
+        await el.updateComplete;
+        expect(el.shadowRoot!.querySelector('#overlay.opacity-100')).to.exist;
+
+        el.shadowRoot?.querySelector('button')?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+        await el.updateComplete;
+        expect(el.shadowRoot!.querySelector('#overlay.opacity-0')).to.exist;
+      });
     });
 
-    it('toggles playing property', async () => {
-      const el: SdVideo = await fixture(variants.default);
-      el.shadowRoot?.querySelector('button')?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-      expect(el.playing).to.be.true;
-    });
+    // Handle tabbing for Safari and other Browsers, see https://github.com/microsoft/playwright/issues/2114#issuecomment-1517642401
+    const tabKey =
+      navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('HeadlessChrome') ? 'Alt+Tab' : 'Tab';
 
-    it('updates overlay class', async () => {
-      const el: SdVideo = await fixture(variants.overlay);
+    it('video is not focusable before played', async () => {
+      const el: SdVideo = await fixture(variants.all);
+
+      await sendKeys({ press: tabKey });
       await el.updateComplete;
-      expect(el.shadowRoot!.querySelector('#overlay.opacity-100')).to.exist;
+      await sendKeys({ press: tabKey });
+      await el.updateComplete;
+
+      expect(el.querySelector('video')).to.not.focus;
+    });
+
+    it('video is focusable after played', async () => {
+      const el: SdVideo = await fixture(variants.all);
 
-      el.shadowRoot?.querySelector('button')?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+      el.shadowRoot?.querySelector('button')?.click();
+
+      await sendKeys({ press: tabKey });
       await el.updateComplete;
-      expect(el.shadowRoot!.querySelector('#overlay.opacity-0')).to.exist;
+      await sendKeys({ press: tabKey });
+      await el.updateComplete;
+
+      expect(el.querySelector('video')).to.focus;
     });
   });
 

packages/components/src/components/video/video.ts

@@ -51,6 +51,10 @@ export default class SdVideo extends SolidElement {
     return null;
   }
 
+  private get video(): HTMLVideoElement | null {
+    return this.querySelector('video');
+  }
+
   /** Fade out poster after initial play. */
   private fadeoutPoster(): void {
     if (this.poster instanceof HTMLImageElement) {
@@ -65,19 +69,29 @@ export default class SdVideo extends SolidElement {
     }
   }
 
+  private setVideoInert(inert?: boolean): void {
+    if (inert) {
+      this.video?.setAttribute('inert', '');
+    } else {
+      this.video?.removeAttribute('inert');
+    }
+  }
+
   /** Utility function to group play behaviors. */
   private play() {
     this.emit('sd-play');
     this.playing = true;
+    this.video?.play();
     this.fadeoutPoster();
+    this.setVideoInert(false);
   }
 
   /** Restrict keydown control to enter and space bar to mimic the native video tag behavior. If a KeyboardEvent is used, refocus on the native video element to give the user seamless keyboard control. */
   private handleKeydown(e: MouseEvent | KeyboardEvent) {
     if (e instanceof KeyboardEvent && (e.key === 'Enter' || e.key === ' ')) {
       this.play();
       setTimeout(() => {
-        this.querySelector('video')?.focus();
+        this.video?.focus();
       });
     }
   }
@@ -95,6 +109,7 @@ export default class SdVideo extends SolidElement {
 
   connectedCallback(): void {
     super.connectedCallback();
+    this.setVideoInert(true);
     this.resizeObserver = new ResizeObserver(() => this.handleButtonResize());
 
     this.updateComplete.then(() => {
@@ -118,15 +133,15 @@ export default class SdVideo extends SolidElement {
           @keydown=${this.handleKeydown}
           class=${cx(
             this.playing && 'pointer-events-none',
-            'w-full h-full absolute top-0 left-0 z-30 text-primary hover:text-primary-500 sd-interactive sd-interactive--reset focus-visible:focus-outline'
+            'group w-full h-full absolute top-0 left-0 z-30 text-primary hover:text-primary-500 sd-interactive sd-interactive--reset focus-visible:focus-outline'
           )}
         >
           <div
             part="play-button-bg"
             class=${cx(
               this.playing ? 'opacity-0' : 'opacity-100',
               this.isBelowBreakpoint ? 'w-[48px] h-[48px]' : 'w-[96px] h-[96px]',
-              'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition'
+              'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition outline-2 outline-offset-2 group-focus-visible:outline'
             )}
           >
             <slot name="play-icon" part="play-icon" class=${cx(this.isBelowBreakpoint ? 'text-[2rem]' : 'text-[4rem]')}>

packages/docs/src/stories/components/video.stories.ts

@@ -47,30 +47,42 @@ export const Default = {
  */
 
 export const VideoElementWithPosterSlot = {
+  name: 'Video Element with Poster Slot',
   render: () => html`
     <sd-video>
       <video controls="" id="video-example" class="w-[854px] aspect-video">
-        <source src="./placeholders/videos/ui-placeholder-video.mp4" type="video/mp4" />
+        <source src="./placeholders/videos/sds-placeholder-video/sds-placeholder-video.webm" type="video/webm" />
+        <track
+          label="English"
+          kind="subtitles"
+          srclang="en"
+          src="./placeholders/videos/sds-placeholder-video/sds-placeholder-video.vtt"
+          default
+        />
         Your browser does not support the video tag.
       </video>
       <img
         slot="poster"
-        alt="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"
+        src="./placeholders/images/union-investment.png"
       />
     </sd-video>
   `
 };
 
 /**
- * Use the `playing` attribute to hide the play icon and the overlay.
+ * Use the `playing` attribute to show/hide the play-button.
  */
 
 export const Playing = {
   render: () => html`
     <sd-video playing>
-      <img alt="Generic Alt" class="w-[854px] aspect-video cover" src="./placeholders/images/architecture.jpg" />
+      <img
+        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/union-investment.png"
+      />
     </sd-video>
   `
 };
@@ -82,7 +94,11 @@ export const Playing = {
 export const Overlay = {
   render: () => html`
     <sd-video overlay>
-      <img alt="Generic Alt" class="w-[854px] aspect-video cover" src="./placeholders/images/architecture.jpg" />
+      <img
+        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/union-investment.png"
+      />
     </sd-video>
   `
 };

packages/docs/src/stories/components/video.test.stories.ts

@@ -14,18 +14,18 @@ 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/sds-placeholder-video/sds-placeholder-video.webm" type="video/webm" />Your browser does not support the video tag.</video>'
 };
 const imageConstant: ConstantDefinition = {
   type: 'slot',
   name: 'default',
-  value: '<img class="w-[400px] aspect-video object-cover" src="./placeholders/images/generic.jpg" />'
+  value: '<img class="w-[400px] aspect-video object-cover" src="./placeholders/images/union-investment.png" />'
 };
 const posterConstant: ConstantDefinition = {
   type: 'slot',
   name: 'poster',
   value:
-    '<img slot="poster" alt="poster" 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/union-investment.png" />'
 };
 const iconConstant: ConstantDefinition = {
   type: 'slot',
@@ -54,7 +54,7 @@ export const Default = {
       constants: {
         type: 'slot',
         name: 'default',
-        value: '<img class="aspect-video object-cover" src="./placeholders/images/generic.jpg" />'
+        value: '<img class="aspect-video object-cover" src="./placeholders/images/union-investment.png" />'
       },
       args
     });

packages/docs/src/stories/templates/video-with-description-and-copyright.stories.ts

@@ -14,13 +14,26 @@ export default {
 };
 
 export const VideoWithDescription = {
+  name: 'Video with Description',
   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/sds-placeholder-video/sds-placeholder-video.webm" type="video/webm" />
+        <track
+          label="English"
+          kind="subtitles"
+          srclang="en"
+          src="./placeholders/videos/sds-placeholder-video/sds-placeholder-video.vtt"
+          default
+        />
         Your browser does not support the video tag.
       </video>
-      <img slot="poster" alt="poster" class="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="aspect-video cover"
+        src="./placeholders/images/union-investment.png"
+      />
       <figcaption class="mt-4">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
         dolore magna aliquyam erat, sed diam voluptua.
@@ -30,6 +43,7 @@ export const VideoWithDescription = {
 };
 
 export const VideoWithCopyright = {
+  name: 'Video with Copyright',
   render: () => html`
     <style>
       .sd-copyright::after {
@@ -39,10 +53,22 @@ 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/sds-placeholder-video/sds-placeholder-video.webm" type="video/webm" />
+          <track
+            label="English"
+            kind="subtitles"
+            srclang="en"
+            src="./placeholders/videos/sds-placeholder-video/sds-placeholder-video.vtt"
+            default
+          />
           Your browser does not support the video tag.
         </video>
-        <img slot="poster" alt="poster" class="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="aspect-video cover"
+          src="./placeholders/images/union-investment.png"
+        />
       </sd-video>
     </div>
   `