Fix focus management for Page Bookmarking

Description

Location: Any page in courseware e.g. https://courses.edx.org/courses/course-v1:edX+edX101+3T2016/courseware/a6ef6f1d33c94700a26138b1f8489e54/c9f07028f9d24d74bfe8e68debac8e03/?activate_block_id=block-v1%3AedX%2BedX101%2B3T2016%2Btype%40sequential%2Bblock%40c9f07028f9d24d74bfe8e68debac8e03

Severity: 8

Description: In IE, when activating the "Bookmark this page" button, focus is redirected back to the main content section. Keyboard users must tab back to find their place back on the page. Screen reader users may be confused when their focus is redirected.

Pattern: Bookmark Button Focus Redirection

Auditor Note: Since it is a toggle button, it should just update the state and focus must remain on the button so that users can continue navigating through the content. Developers must remove the focus redirection.

Internal Note: Agree. focus should stay on the button. This behavior is only observed in some browsers/OSs. I suspect this is because the entire button is being replaced when the bookmark/unbookmark action is triggered. We must just update the necessary text node and element attributes and not the entire button when activated to prevent this from happening. When the element is removed, the focus is thrown to a different element for different browsers. It should remain on the button. The only way to do this is to keep the original button in the DOM and only change its properties.

Implementation Notes:
Currently the bookmark event (lms/static/course_bookmarks/js/views/bookmark_button.js) calls remove and add on click. We can either (remove, add and then focus) to have a quick fix, or add a new model to maintain state.

Epic Link

Done
Your pinned fields
Click on the next to a field label to start pinning.

Priority

CAT-2

Assignee

Michael Terry

Sprint

None

Story Points

2

Reporter

Mark Sadecki