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

Disable interaction with disabled clickable components #3525

Merged
merged 4 commits into from Nov 3, 2016

Conversation

mister-ben
Copy link
Contributor

@mister-ben mister-ben commented Aug 12, 2016

Description

enable() and disable() on clickable components is only cosmetic. "Disabled" implies the control should not be functional.

Specific Changes proposed

  • Remove event listeners on disable() and add back on enable().
  • Move adding listeners from constructor to enable
  • Remove tabindex from disabled components and add disabled attribute to disabled buttons to prevent keyboard access.

Requirements Checklist

  • Feature implemented / Bug fixed
  • If necessary, more likely in a feature request than a bug fix
    • Unit Tests updated or fixed
  • Reviewed by Two Core Contributors

@gkatsev
Copy link
Member

gkatsev commented Aug 12, 2016

There are two more listeners being set up in the constructor. Should we move all the listeners being added to enable and just call enable from the constructor?

@mister-ben mister-ben changed the title Disable click/tap handler on disabled clickable components Disable interaction with disabled clickable components Aug 15, 2016
@mister-ben
Copy link
Contributor Author

Makes sense. I've also updated to make the component not selectable from the keyboard.

@gkatsev
Copy link
Member

gkatsev commented Aug 15, 2016

@OwenEdwards can you take a look at this?

LGTM, otherwise.

@@ -158,6 +164,13 @@ class ClickableComponent extends Component {
disable() {
this.addClass('vjs-disabled');
this.el_.setAttribute('aria-disabled', 'true');
if (typeof this.tabIndex_ !== 'undefined') {
this.el_.removeAttribute('tabindex');
Copy link
Member

Choose a reason for hiding this comment

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

We had to enforce consistent use of tabIndex rather than tabindex throughout the code - it doesn't make any difference here, but it would be better for consistency.

Otherwise LGTM

@OwenEdwards
Copy link
Member

LGTM

@gkatsev gkatsev added this to the 5.13 milestone Sep 27, 2016
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.

LGTM. Works great.
@mister-ben would you be able to rebase this against master? Otherwise, I can do it myself when merging.

@mister-ben mister-ben force-pushed the disabled-clickable-components branch from f12dbd3 to 12a41b7 Compare October 4, 2016 13:50
@gkatsev gkatsev merged commit de1b363 into videojs:master Nov 3, 2016
@gkatsev gkatsev removed this from Done in video.js May 8, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants