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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@gkatsev
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
@gkatsev gkatsev deleted the fix/seek-to-live-a11y branch December 11, 2018 21:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants