New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: make seek-to-live accessible #5651

Merged
merged 5 commits into from Dec 11, 2018

Conversation

Projects
None yet
3 participants
@BrandonOCasey
Copy link
Contributor

BrandonOCasey commented Dec 4, 2018

Makes seek to live accessible and indicates when the button can be pressed or not to the screen reader.

@gkatsev
Copy link
Member

gkatsev left a comment

I think this is a great start to making it more accessible. @OwenEdwards would love your input.

Also, given our usage of the control text, probably not an issue, but we may want to take #5653 into account here as well.

Show resolved Hide resolved lang/en.json Outdated
Show resolved Hide resolved src/js/control-bar/seek-to-live.js Outdated
Show resolved Hide resolved src/js/control-bar/seek-to-live.js
this.removeClass('vjs-at-live-edge');
this.controlText('Seek To LIVE');

This comment has been minimized.

@gkatsev

gkatsev Dec 6, 2018

Member

I wonder if this should be more verbose like not at live edge, click to seek to live.

This comment has been minimized.

@BrandonOCasey

BrandonOCasey Dec 10, 2018

Author Contributor

I am going to change it to that, as being verbose is probably better.

This comment has been minimized.

@OwenEdwards

OwenEdwards Dec 10, 2018

Member

Is there a display somewhere in the control bar which shows how far behind live you are? I'm wondering if that ought to also be indicated here, e.g. "Seek to Live, currently 1:23 behind live". I think you should stay away from the term "edge" - that's a technical term, but not one a typical user would recognize.

This comment has been minimized.

@gkatsev

gkatsev Dec 10, 2018

Member

the current time shows up as how far behind live you are, I think. We can probably use that to update this.

This comment has been minimized.

@OwenEdwards

OwenEdwards Dec 10, 2018

Member

Also, try to avoid "click to..." - that's implied with a button, but some users may tap, some click, some use the keyboard. And try to front-load the action, then add more information afterwards - "Seek to Live, currently 1:23 behind live" instead of "not currently live, seek to live".

This comment has been minimized.

@gkatsev

gkatsev Dec 10, 2018

Member

Ah, makes sense for the action to be front loaded, I was thinking that maybe the info is more important but it isn't

} else {
this.addClass('vjs-at-live-edge');
this.controlText('At LIVE edge');

This comment has been minimized.

@OwenEdwards

OwenEdwards Dec 10, 2018

Member

"Playing Live", perhaps? As I mentioned, I don't think "edge" is meaningful outside the technical world.

This comment has been minimized.

@OwenEdwards

OwenEdwards Dec 10, 2018

Member

Or "Seek to Live, currently playing Live", which would then be announced as "button, disabled".

@gkatsev gkatsev added the patch label Dec 10, 2018

} else {
this.addClass('vjs-at-live-edge');
this.controlText('Seek to live, currently playing live');
this.setAttribute('aria-disabled', true);

This comment has been minimized.

This comment has been minimized.

@BrandonOCasey

BrandonOCasey Dec 11, 2018

Author Contributor

I don't know if we want the button to dim visually, which will happen if we do that. I think we just want the button to "dim" for screen readers, normal users will see a cursor change and will already be at live with a red circle.

@BrandonOCasey BrandonOCasey force-pushed the fix/seek-to-live-a11y branch from 20ed451 to 1bf033f Dec 11, 2018

@BrandonOCasey BrandonOCasey force-pushed the fix/seek-to-live-a11y branch from a088c25 to 72d5bce Dec 11, 2018

@gkatsev

This comment has been minimized.

Copy link
Member

gkatsev commented Dec 11, 2018

Just tried it out with VO, seems to be working well. @OwenEdwards do you have any other input or is this good to go?

@gkatsev gkatsev merged commit 165c120 into master Dec 11, 2018

4 checks passed

continuous-integration/codeship Build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
netlify/videojs-docs/deploy-preview Deploy preview ready!
Details

@gkatsev gkatsev deleted the fix/seek-to-live-a11y branch Dec 11, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment