Defect 1 - Medium - Programmatic focus not moving

[srancour]

Description or Additional Context

9/16/2024 The three same page links "Before you Start" "How to do it" and "Alternate method" move the view area to those sections but do not move the programmatic focus. A Screen reader user will select the link, but focus will remain on the link and not move to the content.

Example

The navigation "On this page" links in the How to find content to edit KB article don't set focus on the area they link to.

Code snippet

Skip link <p><strong>↓&nbsp;</strong><a href="#before-you-start">Before you start</a></p>
Linked Heading <h2 id="before-you-start"><strong>Before you start</strong></h2>

Steps to reproduce

Navigate: Home-> Knowledge Base -> How to Find Content to Edit
Press on "Before you start" link and then tab to the next element. You will visually see the screen move to the correct heading, but the focus won't move and on tab it will tab to the next link in the list.

Recommended resolution

When linking to none interactive elements on the page tab-index= "-1" needs to be added to the none interactive element, like a heading, for the focus to move properly. This needs to be checked across all KB articles.

We also need to look at why, when pressing the link, it sets the url to #undefined no matter what the link is actually set as.

Defect Criterion

WCAG 5.2.4 - Only Accessibility-Supported Ways of Using Technologies - Only accessibility-supported ways of using technologies are relied upon to satisfy the success criteria. Any information or functionality that is provided in a way that is not accessibility supported is also available in a way that is accessibility supported.

Users affected

• Keyboard only
• Screen reader

Teams that this affects:

• CMS Team
• sitewide

[srancour]

This also seems to have to be related with work that the last team had been doing as well in #12145.

[anantais]

Confirmed with Steve that the fix for the ticket - #19375 - also fixes this ticket. Closing.