fix: use more robust css selectors and add additional property to pre…

[KManolov3]

…vent tooltip overlay from breaking screen interactions

Resolves:

https://scratchfoundation.atlassian.net/browse/UEPR-323

Changes:

• Make sure overlay position in DOM doesn't affect whether overlay z-index is applied
• Also add visibility:hidden, in case z-index isn't successfully applied / doesn't work on specific browsers

[Copilot]

Pull Request Overview

This PR fixes tooltip overlay issues that were interfering with screen interactions by implementing more robust CSS selectors and adding fallback properties to ensure the overlay doesn't block user interactions.

• Updated CSS selector from sibling selector to parent-child selector with :has() pseudo-class for better DOM position independence
• Added visibility: hidden as a fallback property to ensure overlay remains non-interactive even if z-index fails

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The :has() pseudo-class has limited browser support, especially in older versions of Safari and Firefox. Consider providing a fallback selector or using a JavaScript-based solution for broader compatibility.

[rosics-code]

Can the tool-tip and button be purple? It's hard to see with the blue over white.

[KManolov3]

Can the tool-tip and button be purple? It's hard to see with the blue over white.

@rosics-code The design team prefers to go with blue with some newer features, so this isn't simply a dev decision to be made. However, I believe the blue-on-white is also confirmed to match accessibility/contrast standards.

[rosics-code]

Can the tool-tip and button be purple? It's hard to see with the blue over white.

@rosics-code The design team prefers to go with blue with some newer features, so this isn't simply a dev decision to be made. However, I believe the blue-on-white is also confirmed to match accessibility/contrast standards.

That's very interesting. Thanks for the response.

[rosics-code]

Can the tool-tip and button be purple? It's hard to see with the blue over white.

@rosics-code The design team prefers to go with blue with some newer features, so this isn't simply a dev decision to be made. However, I believe the blue-on-white is also confirmed to match accessibility/contrast standards.

Can it have an icon though? I feel like an icon can help more with accessibility.

[husqwc]

Can the tool-tip and button be purple? It's hard to see with the blue over white.

@rosics-code The design team prefers to go with blue with some newer features, so this isn't simply a dev decision to be made. However, I believe the blue-on-white is also confirmed to match accessibility/contrast standards.

With a 2.91:1 ratio, the color fails both the WCAG AA and WCAG AAA standards (even for large text)

[husqwc]

Can the tool-tip and button be purple? It's hard to see with the blue over white.

@rosics-code The design team prefers to go with blue with some newer features, so this isn't simply a dev decision to be made. However, I believe the blue-on-white is also confirmed to match accessibility/contrast standards.

Also, cheddagirl made this post asking for this decision to be confirmed with the accessibility team as she hasn't heard of any confirmation of allowing "white on blue" from them