Temporarily Hidden badge UX issues

[kelvinballoo]

Bug Description

2 Issues to highlight:

• When we click on the 'i' for the 'Temporarily hidden' badge, it will check on and off the corresponding checkbox and also bring up the tooltip. It's a bad UX.

  9096.clicking.on.temporary.hide.mov

• On mobile, the experience is a bit odd as well. It seems like when we tap and lift off our finger, the tooltip will appear and disappear. It seems like for the tooltip to stay, we need to keep our finger there.

  RPReplay_Final1727358104.MP4

Steps to reproduce

1. Enable audience segmentation feature and enable the visitor groups. Add the non Site Kit created audience to audience tile like "All visitors" and also a SK created audience "New Visitors"

2. In the tester plugin, set Analytics > Force Analytics report data to Zero. Also, set Analytics Partial Data > Force Analytics audience partial data state to last-28-days. Save changes.

3. Go to Site Kit dashboard and to audience tile section. You will see the tile in collecting data status with the link to hide the tile temporarily ( "Temporarily hide" ).

4. Click on the "Temporarily hide" link for "All Visitors", that will hide the tile.

5. Open the audience selection panel. There should be a "Temporarily Hidden" badge with a tooltip.

Click on the 'i' icon for the "Temporarily Hidden" badge and you will notice it will check on and off the checkbox.
Also, when tapping on mobile, the UX is weird. The tooltip only appears as long as we press the tooltip. If we lift the finger, it's gone.

Screenshots

Additional Context

• PHP Version:
• OS: [e.g. iOS]
• Browser: [e.g. chrome, safari]
• Plugin Version: [e.g. 22]
• Device: [e.g. iPhone6]

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Clicking on a badge in the Audience Selection Panel should not toggle the item's checkbox.
• Clicking on the information icon in the "Temporarily hidden" badge should show the tooltip for the icon. It should not be necessary to hold the touch on a mobile device as per the bug description.

Implementation Brief

• Move the rendering of the badge from the SelectionBox to the Checkbox component, ensuring it's rendered outside the label.
• Finish off PR Pass badge to the Checkbox component to render it outside the label. #9422 - it should just need tests & stories.

Note, this issue only needs to tackle the GM2 version of Checkbox - we can port the changes across to the GM3 version to keep them aligned in a separate issue, #9423.

Test Coverage

• Add test cases for the badge rendering to the Checkbox test suite.
• Add instances of checkboxes with badges to the Checkbox story.
• Fix any failing tests.

QA Brief

• Follow the steps to reproduce and verify that the reported issues no longer exist.

Changelog entry

[nfmohit]

IB ✅