Text hyperlink states not applying to some hyperlinks

As far as I'm aware, a proper fix hasn't been implemented by Articulate. What I ended up doing (as I had a deadline) was enabling Accessible Text by default and firing a JavaScript trigger when the timeline starts to force new hyperlink CSS colours.

Additionally, because of the WCAG colour contrast requirements, I needed to have a different hyperlink hover colour on my layers (since my layers have a dark grey background and my base slides have a white background). So, I put another JS trigger to fire when a layer is hidden to switch between the 2 CSS fixes. 

Please note, the below only works for Accessible Text - this is why I ended up having it enabled by default.

Base Slide & Layer JS

I put this on my slide master to fire whenever the timeline starts on a slide. This creates my new hover colour with an !important tag for ALL text hyperlinks on the slide and appends it to the header instead of the text box.

It finds the content wrap that the accessible text lives in and checks that the JS CSS fix isn't already applied. If it's not, it then creates and applies the CSS fix to the header. This way, I don't need to worry about having custom object ID's for all my text boxes. I can just apply this fix to a slide at the master level and it does everything for me.

const parentDiv = document.querySelector(".textlib-content-wrap");

if (parentDiv && !document.getElementById("hoverStyleFix_Base")) {
    const style = document.createElement("style");
    style.id = "hoverStyleFix_Base"; // Unique ID to prevent duplicates
    style.innerHTML = `
      .textlib-content-wrap a:hover, 
      .textlib-content-wrap span:hover {
        color: #62165C !important;
      }
    `;
    document.head.appendChild(style); // Append to head instead of parentDiv to ensure global effect
}

Removing the Custom CSS Fix from the Header

For my layers, I simply change the style.id and getElementByID in the above code to a new unique name and use the same code, but I add the below code to the same JS trigger before the above code. This finds the existing JS CSS Fix for the base slide and removes it before applying the new JS fix for the layer. If I don't do this, then the layers hyperlink text is also the same as the base slide, which fails WCAG requirements. When I close the layer, I do the same thing but I flip the unique ID name so I'm removing the layer CSS fix and re-applying the base CSS fix. 

const styleElement = document.getElementById("hoverStyleFix_Base");
    if (styleElement) {
        styleElement.parentNode.removeChild(styleElement); // Remove the entire custom JS CSS fix <style> tag
}

Hopefully that all makes sense 😀