I enabled accessibility features on a screen that contains a link with a tooltip around it. As shown in the attached screenshot, the structure is a tooltip with a link in the Content placeholder. Inside of the link is an icon.
Inside of the tooltip placeholder is just a text expression.
I am having an issue when I tab through the page where it stops on the link twice. The first time, it highlights the entire block, but if I press the enter button, nothing happens. In this case it seems to be focusing on the Tooltip widget itself.
The second time, it only highlights part of the block and in this case it is focusing on the link. Pressing Enter causes my browser to follow the link.
Is this normal? Is there any way to prevent the repeated focus states and to fix the weird highlight of half of the icon? Please see the attached screenshots.
I have tried adding tabindex=-1 to a few different places in the widget but it did not seem to do anything.
Hello @Dan Kozlowski ,Please find attachment.Its working for me.Also for css releated, you may customise it by using below class
.has-accessible-features a:focus {
background-color:#d6b850 ;
}
Thank you. Using the JavaScript that you added worked.
var tooltip = document.getElementById($parameters.tooltipid);var divParentOfLink = tooltip.querySelector('.osui-tooltip__content');divParentOfLink.removeAttribute('tabindex');
Hello @Dan Kozlowskican you please attach oml if possible so it will helpfull to help
In one of application we have done like below
Hello, thank you for your assistance. I have created an example OML file that reproduces the issue.