Text hyperlink states not applying to some hyperlinks

When we have had this issue before, we did a workaround - put a hotspot (rectangular) over the text link that points to the correct URL. We then manually tweaked the text so it looked like a hyperlink (blue, underlined) - that was an effective solution for us. Your WCAG requirements may not let that pass, but you could try.

I've found you can only add one hyperlink per text-box. So you will likely have to add another text box, or use a hotspot or shape as JHauglie suggests. 

not being particularly savvy with code, perhaps you could try creating another text box with a link to the place you want your second hyperlink here to go. 

then get into the back end and copy the class value of the off-screen link and insert it into the class value of the 2nd hyperlink (that currently has the same class value as the 1st hyperlink).

Not sure if it would work--but could be worth experimenting with? ...even if only for curiosity's sake. 

I can't replicate this issue. I'm using the latest version as well. I copied the first paragraph of your post and pasted it directly into Storyline, then added four hyperlinks. I confirmed that all hyperlink hover states work as expected.

The presence of the "textlib-wrapper" class suggests that the 'Add scroll bars' option may be selected in the text box properties, which I believe is causing the issue.

Normally, I would just use a separate text box or a hidden shape on top for my hyperlinks, but as this module needs to comply with WCAG 2.2 AA, the text needs to be reflowable. When Accessible Text is enabled, the line-spacing is adjusted, so any additional shapes or textboxes would lose alignment. 

Regarding the textlib-wrapper class, I believe this is used for textboxes when Accessible Text is enabled. Without Accessible Text enabled, the hyperlink states work fine. Seems that enabling Accessible Text, which converts all the text to 'accessible versions', is ironically making the text fail WCAG accessibility by removing some of the hyperlink states.

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 😀