search

videojs / video.js

Video.js - open source HTML5 video player
https://videojs.com
Other
37.85k stars 7.43k forks source link

The player shows focus outlines on Firefox #5472

Open gjanblaszczyk opened 5 years ago

gjanblaszczyk commented 5 years ago

Description

The player shows a focus outline after clicking on the video but It should not because the HTML video element has a 'tabindex = -1'. The issue is visible on Firefox browser.

Steps to reproduce

  1. Open the code pen example: https://codepen.io/grbla/pen/qYVXbY on Firefox browser.
  2. Play the video
  3. Click on the player video area to pause/resume the main video.

Results

Expected

I don't see the outline on the video element.

Actual

I see the outline on the player.

videojs-outline

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

latest

browsers

Firefox

OSes

any

gkatsev commented 5 years ago

Like #5474, we need to make sure that this is accessible to both keyboard and mouse users.

gjanblaszczyk commented 5 years ago

Yes, you have right but there is some inconsistency now. Why I don't see this player visual outline on the other browsers? I see this outline only on Firefox which looks like a bug...

gkatsev commented 5 years ago

Hm... I can see the inconsistency in firefox is weird. Maybe disabling the outline for the player itself will be fine? With VoiceOver enabled, I could still its outline in chrome. @OwenEdwards any thoughts?

OwenEdwards commented 5 years ago

This needs a little more investigation. There are situations where the JavaScript moves focus to the whole player <div> (hence the tabindex="-1" - focus can be moved to the <div> via JS, but it is not in the "tab order"). It looks like Firefox provides a focus outline for the <div>, but other browsers do not.

The player should definitely be consistent across browsers, and browsers generally do not natively give a focus indication to inactive elements like <div>s (except Firefox, apparently). However, the solution may actually be to make a focus outline visible on the player in all browser, not to disable it in Firefox - since focus is placed there, accessibility requires that there's a visual indication of that focus. Once it's consistent across all browsers, the issue of disabling it for mouse users is the one mentioned in our comments on #5474.

gkatsev commented 5 years ago

Oh, yeah, didn't think about it the consistency within the page. The firefox focus ring just looks so bad.