Issue Summary

The bookmarks links for the table for content do not work effectively, the focus does not move to the scrolled section.

Steps to Reproduce

1. Edit the page
2. For the content with headings and paragraphs, add the "Table of content" macro.
3. Publish the page.
4. In the page content, navigate to the "Table of content" macro section available and try to interact with the Links, activating them with the keyboard and using "Tab" and "Shift+tab" to move the focus once the bookmarked section is available.

Screen recording

Screen Recording 2022-06-24 at 10.57.13 AM.mov

Actual Results

Bookmark links such as for the "Table of content" macros are present in the main content area and do not function effectively. When the user activates the links from the macros, the page is scrolled down to the available content section, but when the user tries to "Tab" to the visible interactive element, the focus stays on the table of content section links. Since the focus does not move to the content section after being scrolled, the user will have to navigate through the unnecessary content to reach the desired section. This will make it the keyboard and screen reader difficult in accessing the page effectively.

Expected Results

Modify the scripts to ensure that the links are accessible with a keyboard as well as a mouse to make the functionality accessible for keyboard-only and screen reader users.

Once the link is activated and the page is scrolled down or up, the focus should move to the interactive element available in the scrolled section. 

Add "id" in the <div> element of the source code.

Refer to the following code implementation:

<a href="#Thisisasamplepage-4.Summary" class="toc-link">4. Summary</a>

(...)

<h4 style="" id="Thisisasamplepage-4.Summary"><strong>4. Summary</strong></h4>

Workaround

Currently, there is no known workaround for this behaviour. A workaround will be added here when available