Interactive highlight covers the "You sorted the data" message

[Nancy-Salpepi]

Test device MacBook Air M1 chip

Operating System 14.0

Browser Safari 17

Problem description For, https://github.com/phetsims/qa/issues/993, the interactive highlight covers the "You sorted the data" message. This happens when data is sorted with alt input and when interactive highlights are on for the mouse.

Visuals

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Center and Variability‬ URL: https://phet-dev.colorado.edu/html/center-and-variability/1.1.0-rc.1/phet/center-and-variability_all_phet.html Version: 1.1.0-rc.1 2023-10-09 18:59:20 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15 Language: en-US Window: 1277x706 Pixel Ratio: 2/1 WebGL: WebGL 1.0 GLSL: WebGL GLSL ES 1.0 (1.0) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 30 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}

[marlitas]

I adjusted the height of the interactive highlight. @catherinecarter over to you.

[catherinecarter]

I'm trying to test it out but strange things are happening. I'm in Chrome, and I can't use the Space or Enter keys to pick a card up consistently, and the "You sorted the data!" doesn't appear after seeing it the first time. Here's a video:

https://github.com/phetsims/center-and-variability/assets/109630002/3885fc97-0933-4211-8262-8af4e9bfdf45

I'm also wondering about the occlusion that still exists with the "you sorted..." message, although that seems pretty inconsequential. These images show two additional points of occlusion. It's probably fine, but I remember that the reason the focus rectangle was as low as it was, was to avoid the arrow and the bottom edge of the focus rectangle from overlapping.

I'll keep testing on my end, but want to bring up the overlapping objects in case any discussion needs to happen. Do we have another solution? What if we moved the focus rectangle to be below the message? Would that be weird to be that big?

[marlitas]

I'm trying to test it out but strange things are happening. I'm in Chrome, and I can't use the Space or Enter keys to pick a card up consistently, and the "You sorted the data!" doesn't appear after seeing it the first time.

Hmmm I am not able to replicate this on my end. Were there specific steps that got you there? @Nancy-Salpepi Have you noticed anything related to this?

What if we moved the focus rectangle to be below the message? Would that be weird to be that big?

I think that would definitely be too big.

Here's a picture of what that looks like.

We can also try simultaneously lowering the celebration message and moving the bottom of the highlight up to try to get the best of both worlds?

[Nancy-Salpepi]

I'm trying to test it out but strange things are happening. I'm in Chrome, and I can't use the Space or Enter keys to pick a card up consistently, and the "You sorted the data!" doesn't appear after seeing it the first time.

• @marlitas I just tried on main using macOS 14 + chrome and I am not having any issues grabbing a card.

• The "You sorted the data" also works correctly on my end. In the video, I see that @catherinecarter never let go of the card in order to "unsort" the data. If I let go of the card, grab it again and put it back so the data is sorted, the message appears.

[catherinecarter]

Thanks, @marlitas and @Nancy-Salpepi. You're right, @Nancy-Salpepi. I put the card down at the end, but not in the middle step. Thanks for noticing that, I thought I was going crazy!

I think the solution of moving the "You sorted the data!" celebration down a bit would work, but I'm curious if you mean in all cases, or just when there's focus on the cards?

[marlitas]

I think the solution of moving the "You sorted the data!" celebration down a bit would work, but I'm curious if you mean in all cases, or just when there's focus on the cards?

In all cases

[catherinecarter]

@marla and I worked together to create a solution that is not perfect, but is very nice and was pretty quick to do:

• moved the hand up one pixel
• moved the focus rectangle down 2 pixels
• moved the celebration indicator down, which is nice because it's more centered vertically between the bottom of the accordion box and the bottom of the cards

We tested with just the mouse and no alt-input, with interactive highlight on, and with tabbing focus. The alt-input cases are just on the edge of the cueing hand and focus rectangle, but we found this acceptable.

[marlitas]

This was a straightforward adjustment and doesn't need code review. Marking for cherry-pick.

[KatieWoe]

This looks good to me in rc.2