Can 'Focus sentinel' links in Tooltip be removed/hidden from screen reader?

[BenjaminWFox-Lumedic]

This is specifically related to the React Tooltip component.

When implemented, the popup content is flanked by two "Focus sentinel" span elements (see markup below). I'm not clear on the exact role of these (something to do with focus trapping?) but they create a confusing experience when navigating content via keyboard/screen reader since both tabbing in and out of the popup content announces "Link Focus Sentinel".

<div>
  <span tabindex="0" role="link" class="bx--visually-hidden">Focus sentinel</span>
  <div class="bx--tooltip ..." id="..." data-floating-menu-direction="bottom" role="tooltip" ...>...</div>
  <span tabindex="0" role="link" class="bx--visually-hidden">Focus sentinel</span>
</div>

Questions:

• Is there a way to disable these elements from showing up?
• Should these elements be aria-hidden?

[jnm2377]

Hey @BenjaminWFox-Lumedic can you provide some more info on what version of Carbon you're using and also what browser & screen reader you're using? When I test Voice over on Chrome, it doesn't announce "Link Focus Sentinel".

Screen.Recording.2021-08-17.at.9.16.10.PM.mov

[BenjaminWFox-Lumedic]

Thanks for following up @jnm2377. I don't see this behavior happening anymore in our own storybook (OSX Voiceover, latest Chrome) and the project where it was originally an issue was scrapped so I can't run that specific code anymore.

It may also be we had an older version of Carbon we were using at the time. I'll create something new with better detail if I run in to the issue in the future!