Fix focus management for Page Bookmarking


Location: Any page in courseware e.g.

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

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




Michael Terry



Story Points



Mark Sadecki