Skip to content
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
Merged

fix: make seek-to-live accessible #5651

merged 5 commits into from Dec 11, 2018

Conversation

@brandonocasey
Copy link
Contributor

@brandonocasey brandonocasey commented Dec 4, 2018

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

Copy link
Member

@gkatsev 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.

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 Show resolved Hide resolved
this.removeClass('vjs-at-live-edge');
this.controlText('Seek To LIVE');
Copy link
Member

@gkatsev gkatsev Dec 6, 2018

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

Copy link
Contributor Author

@brandonocasey brandonocasey Dec 10, 2018

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

Copy link
Member

@OwenEdwards OwenEdwards Dec 10, 2018

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.

Copy link
Member

@gkatsev gkatsev Dec 10, 2018

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

Copy link
Member

@OwenEdwards OwenEdwards Dec 10, 2018

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".

Copy link
Member

@gkatsev gkatsev Dec 10, 2018

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');
Copy link
Member

@OwenEdwards OwenEdwards Dec 10, 2018

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

Copy link
Member

@OwenEdwards OwenEdwards Dec 10, 2018

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);
Copy link
Member

@gkatsev gkatsev Dec 11, 2018

Copy link
Contributor Author

@brandonocasey brandonocasey Dec 11, 2018

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
Copy link
Member

@gkatsev 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
@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
Labels
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants