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.

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Status

Assignee

Michael Terry

Reporter

Mark Sadecki

Reach

None

Impact

None

Platform Area

None

Customer

None

Partner Manager

None

URL

None

Contributor Name

None

Groups with Read-Only Access

None

Actual Points

None

Category of Work

None

Platform Map Area (Levels 1 & 2)

None

Platform Map Area (Levels 3 & 4)

None

Story Points

2

Epic Link

Sprint

None

Due date

2014/04/15

Priority

CAT-2
Configure