Skip to content

Educator 1552 Implement roving tabindex for WYSIWYG editor for discussions - #16705

Merged
ssemenova merged 1 commit into
masterfrom
sofiya/1552
Dec 8, 2017
Merged

Educator 1552 Implement roving tabindex for WYSIWYG editor for discussions#16705
ssemenova merged 1 commit into
masterfrom
sofiya/1552

Conversation

@ssemenova

@ssemenova ssemenova commented Nov 29, 2017

Copy link
Copy Markdown
Contributor

Educator 1552

Sandbox

The toolbar for the WYSIWYG editor in "Add new post" (and also the general post view, but the a11y audit didn't specify that page) is navigable by tabbing through it, but does not perform how a toolbar is expected to perform. See acceptable a11y example here. The expected behavior is:

  1. Tab into the toolbar. Then you can:
  2. Press tab again, exiting the toolbar. Or press the right arrow key, traversing further in the toolbar.
  3. While focus is "inside" the toolbar, you can press the left and right arrow keys to go through the toolbar. Pressing tab escapes and goes to the next focusable element.

Just in case someone looks at this PR in the future, the name for this behavior is a roving tabindex.

Drawing very very very heavily from the javascript code from the w3 example.

Comment thread lms/static/js/Markdown.Editor.js Outdated

@ssemenova ssemenova Nov 29, 2017

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Not sure why this entire file says I made changes (but there is no difference in the before/after...), but this is the relevant part. The first button should be initialized with a tabindex of 0, and all subsequent buttons should have an initial value of -1.

@ssemenova
ssemenova force-pushed the sofiya/1552 branch 2 times, most recently from 672ec6b to de85c03 Compare November 29, 2017 21:44
@ssemenova ssemenova changed the title WIP Educator 1552 Implement roving tabindex for WYSIWYG editor for discussions Nov 29, 2017
@ssemenova
ssemenova force-pushed the sofiya/1552 branch 3 times, most recently from f74e098 to a33a806 Compare December 4, 2017 21:55
@ssemenova

Copy link
Copy Markdown
Contributor Author

jenkins run python

@ssemenova
ssemenova force-pushed the sofiya/1552 branch 4 times, most recently from 26397e0 to 48a0f6a Compare December 6, 2017 19:15
@ssemenova
ssemenova requested review from schenedx and yro December 6, 2017 19:15
@ssemenova

ssemenova commented Dec 6, 2017

Copy link
Copy Markdown
Contributor Author

FYI: I reverted my last few commits, so a few quality tests will fail on my code. I'll fix those in a second, and raise the limit for the ones in Markdown.Editor.js, until we can address it in ED-1920.

@ssemenova
ssemenova requested a review from cptvitamin December 6, 2017 19:59

@schenedx schenedx left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Had a few NITs.
Looks good to me in general.

var $currentButton, $nextButton, $toolbar, $allButtons,
keyPressed, nextIndex, currentButtonIndex;

var leftKey = this.LEFT_KEYCODE;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Why do we want to assign those constants to local variables? Why not just use them in the statements below?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I just thought it made the code look a little more readable this way


$currentButton = $(event.target);
keyPressed = event.which || event.keyCode;
$toolbar = $(event.target).parent();

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Isn't this just $currentButton.parent()?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Oh. Yes.

$currentButton = $(event.target);
keyPressed = event.which || event.keyCode;
$toolbar = $(event.target).parent();
$allButtons = $toolbar.children('.wmd-button');

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

What if the variable $allButtons does not contain any array items? What if you got no buttons?
Not very likely, but we should check for this condition to avoid surprises

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I can add the check just to make sure

@schenedx schenedx left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

👍

@ssemenova
ssemenova force-pushed the sofiya/1552 branch 2 times, most recently from 66bce8c to 4747483 Compare December 7, 2017 20:24
@ssemenova

Copy link
Copy Markdown
Contributor Author

jenkins run all

@ssemenova
ssemenova merged commit b4a4318 into master Dec 8, 2017
@ssemenova
ssemenova deleted the sofiya/1552 branch December 8, 2017 18:36
@edx-pipeline-bot

Copy link
Copy Markdown
Contributor

EdX Release Notice: This PR has been deployed to the staging environment in preparation for a release to production on Monday, December 11, 2017.

@edx-pipeline-bot

Copy link
Copy Markdown
Contributor

EdX Release Notice: This PR has been deployed to the production environment.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants