Badges Share Modal

[Kelketek]

Description: Provides a share button and modal that allows students to share their achievements from their profile page.
Dependencies: https://github.com/edx/edx-platform/pull/10861 https://github.com/edx/edx-platform/pull/11078
Jira: https://openedx.atlassian.net/browse/SOL-1456
Sandbox: http://pr10556.sandbox.opencraft.com/dashboard

@bradenmacdonald Only the last commit in this set is relevant-- the rest is dependencies. @talbs For you as well.

[openedx-webhooks]

Thanks for the pull request, @Kelketek! It looks like you're a member of a company that does contract work for edX. If you're doing this work as part of a paid contract with edX, you should talk to edX about who will review this pull request. If this work is not part of a paid contract with edX, then you should ensure that there is an OSPR issue to track this work in JIRA, so that we don't lose track of your pull request.

To automatically create an OSPR issue for this pull request, just visit this link: https://openedx-webhooks.herokuapp.com/github/process_pr?repo=edx%2Fedx-platform&number=11028

[Kelketek]

@cptvitamin Could you give this an a11y look over today? Just the last commit-- the previous ones are dependencies.

[cptvitamin]

@Kelketek i did a quick code review but didn't do a manual review. I checked the sandbox and couldn't immediately figure out how to access the view. I'm on my way out the door, and out next week, but if you can give me explicit instructions for how to do a manual review, I can squeeze it in ASAP. Best.

[Kelketek]

@cptvitamin Log in as the honor user and go to the honor user's profile, to the accomplishments tab, and click the share button.

[Kelketek]

@cptvitamin Addressed your notes so far. The images that needed alt attributes have been given blank ones, since they are decorative/illustrative but the text instructions are comprehensive.

[bradenmacdonald]

@Kelketek Looks good! I had a bunch of minor comments - hopefully none of them are too involved. One last request: Clicking outside the modal or pressing escape should close the modal.

[Kelketek]

@bradenmacdonald This is ready for you to give another look.

[talbs]

@Kelketek, thanks for the ping. The UI is generally fine for the Open Badges needs. I noticed a few small visual aspects that should be cleaned up.

• Spacing on the modal header/title is off
• There is no bottom whitespace between the modal's content and the end of the modal window itself. This makes it feel like content is cut-off.
• Is there a min-width for the modal or the items contained in it? At smaller screens, the contents really get truncated.

Once you address the items above and @cptvitamin is fine with this from an a11y-perspective, you have my 👍

---

NOTE: I did not review the HTML nor the Sass/CSS with this work. if you need feedback on that, someone in Engineering can be assigned.

[Kelketek]

@talbs I've updated the CSS-- I think this should satisfy the issues you raised.

[bradenmacdonald]

Thanks @Kelketek. Please add an event handler so that pressing ESC closes the modal, then this is 👍 from me.

[cptvitamin]

@Kelketek Thanks for incorporating these changes. When I performed a manual test, I noticed that there are some issues with the modal dialog box. The first issue is that focus is not moved to the dialog box once it is opened. A keyboard only or screen reader user's focus remains on the Share button. Subsequent TAB presses move them to the next Share button, not to the the instructions inside the modal dialog box. Once focus is moved to the dialog box, the focus should be trapped within the dialog, just like the behavior you would expect from an OS dialog box. That means you cannot tab outside the modal, but either remain on the last focusable item, or cycle back to the beginning of the modal. Support for closing the modal dialog with the ESC key should also be added. Closing the modal should return focus to the button that opened it. All of this is covered in our Accessibility Guidelines for Developers document.

A couple of small things worth mentioning: the instructions to download the badge image refer to "right-click". I would say "option-click". Also, the accessible text for the Share buttons are identical, which makes them indistinguishable from each other when viewed out of context. This is what a screen reader user hears when accessing all form fields out of context:

As you can see, all of the share buttons have identical text. Instead of using "Mozilla Open Badges Backpack" as the alt text for the image, can you add the badge title itself instead? e.g. "Share your Batman Award Badge"

[Kelketek]

@cptvitamin Alright. I think this should resolve the last items you gave me. The sandbox has been updated. Could you take another look?

[cptvitamin]

@Kelketek There is no visual focus indicator on the Close button (as a sighted keyboard only user I would have no idea that the close button has focus) and I can still TAB beyond the modal. When focus is on the "upload" link, tabbing should cycle focus back to the Close button, and vice versa. Another way to demonstrate this is by pointing out that a mouse user cannot click on any of the buttons on the page when the dialog box is open, but a keyboard user can.

[Kelketek]

@cptvitamin Is tab-constraining functionality implemented elsewhere in the codebase? Is there a standard way to do this? I imagine I'm not the first and I don't want to re-invent the wheel (again) which cost me a great deal of time earlier in this project.

[Kelketek]

@cahrens @andy-armstrong Perhaps one of you might know where code is that allows one to isolate tabbing to a modal?

[Kelketek]

@cptvitamin I found a way to do this which wasn't too complicated. Thanks to @bradenmacdonald for the tip. Could you please take another look?

[cptvitamin]

@Kelketek did you happen to update the sandbox? I'm not seeing the focus indicator on the close button or the trapped focus.

[Kelketek]

@cptvitamin Sorry about that. Should be ready now.

[cptvitamin]

👍 nice work. Thanks for adding those accessibility improvements.