Inconsistent Behavior: Wistia Player Volume Control Affected by Up/Down Arrow Press Outside Player Area or any other section of the page.

[saurabhd7711]

Be sure to search for your issue before opening a new one.

Current Behavior

We tested the Wistia player on their official site and observed inconsistent behavior. When we play the video and then focus out from the player, pressing the up or down arrow keys still affects the volume section of the Wistia player. This same behavior is present in our component: after focusing out from the Wistia player, the volume changes when pressing the up or down arrow keys. We have attached a video demonstrating this issue, which we tested on the official Wistia site (https://wistia.com/demo)

Expected Behavior

When the user presses the up or down arrow keys after focusing out from the Wistia player, the page should scroll without affecting the volume section of the player. The volume control should remain unaffected by arrow key presses when the player is not in focus.

Steps to Reproduce

1. Added the video below, which contains the issue.
2. Navigate to the Wistia player and either focus on the player or focus out. Then, press the up or down arrow key. Note that the page will not scroll, but the volume section will be affected.

bandicam.2024-04-23.18-13-50-399.mp4

Environment

• URL attempting to play:
• Browser: Chrome
• Operating system: windows
• jsFiddle example: https://jsfiddle.net/sv5x3ug1

Other Information

We do have the accordion below the Wistia player. Inside that, we used the transcript. When we used screen readers like JAWS or NVDA, we found that our accordion text/content is not scrolling. Instead, the volume is changing.

We are not using any library for the player; instead, we are directly calling the Wistia JavaScript file.

script1.src = [https://fast.wistia.com/embed/medias/${videoId}.jsonp](https://fast.wistia.com/embed/medias/$%7BvideoId%7D.jsonp%60);
script1.async = true;
script1.onload = handleScriptLoad;
script2.src = 'https://fast.wistia.com/assets/external/E-v1.js';
script2.async = true;

div.innerHTML = `<div class="wistia_responsive_padding">
  <div class="wistia_responsive_wrapper">
    <div class="wistia_embed wistia_async_${videoId} seo=false videoFoam=true">
      <div class="wistia_swatch">
        <img class="wistia_img" src="[https://fast.wistia.com/embed/medias/${videoId}/swatch](https://fast.wistia.com/embed/medias/$%7BvideoId%7D/swatch)" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" />
      </div>
    </div>
  </div>
</div>`;

by this code player.

[saurabhd7711]

@cookpete Could you please look into this as I need the solution for the above mentioned issue.

Thank you!