UI/UX: Change cursor on hover for radio buttons and checkboxes

[eugkuo]

Goal

User story
As designers & FE engineers,
We want to ensure consistency of behavior on interactive elements
so that users will know what to expect.

Key result

UI/UX updates

Original requests

Context

• Design: @eugkuo
• Engineer: @RachelElysia

Changes

Product

• [ ] UI changes: When rolling over checkboxes and radio buttons the cursor should change from the arrow to the hand pointer icon.
• [ ] CLI (fleetctl) usage changes: No changes
• [ ] YAML changes: No changes
• [ ] REST API changes: No changes
• [ ] Fleet's agent (fleetd) changes: No changes
• [ ] GitOps mode changes: No changes
• [ ] Activity changes: No changes
• [ ] Permissions changes: No changes
• [ ] Changes to paid features or tiers: No changes
• [ ] Transparency changes: No changes
• [ ] First draft of test plan added
• [ ] Other reference documentation changes: No changes
• [ ] Once shipped, requester has been notified
• [ ] Once shipped, dogfooding issue has been filed

Engineering

• [x] Test plan is finalized
• [ ] Contributor API changes: TODO
• [ ] Feature guide changes: TODO
• [ ] Database schema migrations: TODO
• [ ] Load testing: TODO

ℹ️  Please read this issue carefully and understand it. Pay special attention to UI wireframes, especially "dev notes".

QA

Risk assessment

• Requires load testing: TODO
• Risk level: Low / High TODO
• Risk description: TODO

Test plan

Make sure to go through the list and consider all events that might be related to this story, so we catch edge cases earlier.

1. Navigate to tables that have checkboxes, 2 should suffice (e.g. /hosts/manage as an example)
2. Rollover a table checkbox and verify that the cursor changes to the hand pointer.
3. Navigate to checkboxes within forms, 2 should suffice (e.g. /settings/organization/advanced as an example)
4. Rollover a non-table checkbox and its label text and verify that the cursor changes to the hand pointer.
5. Navigate to a checkbox that is disabled, 2 should suffice (e.g. /policies/manage > Manage automations > Other workflows, Disable workflow, another example: /software/add/package > Add a .exe, notice disabled checkbox for automatic install)
6. Rollover a disabled checkbox and its label text and verify that the cursor does not change to the hand pointer.
7. Navigate to radio button within forms, 2 should suffice (e.g. /policies/manage > Manage automations > Other workflows, Disable workflow, /settings/users > Add user modal)
8. Rollover a radio button and its label text verify that the cursor changes to the hand pointer.
9. Navigate to disabled radio button within forms, 2 should suffice (e.g. /policies/manage > Manage automations > Other workflows, Disable workflow, /settings/users > Add user modal)
10. Rollover a disabled radio button and its label text verify that the cursor does not change to the hand pointer.
11. Repeat the above for a label that has a tooltip for both a radio button and a checkbox. (e.g. in Software > Add software > FMA > Add form, in /settings/users > Add user modal)

Testing notes

• Note: There's an upcoming design discussion about current checkbox/radio button behavior allowing whitespace right of the component to be clickable, dev did not add cursor changes for those areas

Confirmation

1. [ ] Engineer: Added comment to user story confirming successful completion of test plan.
2. [ ] QA: Added comment to user story confirming successful completion of test plan.

[eugkuo]

@noahtalerman @mostlikelee @RachelElysia

I am proposing that this ticket can skip design review and user story review and go right to ready to estimate. Any objections?

cc @iansltx (trying to async tickets)

[mostlikelee]

don't forget we need a 👍 on the test plan from @jmwatts

[eugkuo]

@jmwatts Maybe we add this ticket to our conversation on Monday and figure out a test plan process for stuff like this where it's a global update.

Once we have a test plan in place I don't know if this needs to go through USR?

cc @mostlikelee @RachelElysia

[eugkuo]

@jmwatts Here's what the hand icon looks like on rollover of the elements.

[RachelElysia]

cc: @mostlikelee @iansltx @jmwatts I will add test plans and estimate today and ping you Janis if it feels complete <3

[RachelElysia]

Est: 1 (< 2 hours)

@jmwatts I feel like this test plan covers it

[jmwatts]

@RachelElysia looks great, thank you!

[RachelElysia]

Realized radio button doesn't have a hover state either >.< Adding to this ticket cc: @eugkuo

[fleet-release]

Cursor, pointer bound, Interactive elements found, Consistency crowned.

[RachelElysia]

Upping the estimate to a 2 since it took me about 3 hours including nuances with label text, tooltp label text, and disabled states

[RachelElysia]

@mostlikelee i wouldn't considered this ~pushed. It was only opened last week after I let @eugkuo know this was an issue. He turned it around super quick and since I had capacity having all my FE part of full stack feature work blocked, I started working on it early for next sprint.

[jmwatts]

QA Notes

1. Navigate to tables that have checkboxes, 2 should suffice (e.g. /hosts/manage as an example)

• [x] Rollover a table checkbox and verify that the cursor changes to the hand pointer.

2. Navigate to checkboxes within forms, 2 should suffice (e.g. /settings/organization/advanced as an example)

• [x] Rollover a non-table checkbox and its label text and verify that the cursor changes to the hand pointer.

3. Navigate to a checkbox that is disabled, 2 should suffice (e.g. /policies/manage > Manage automations > Other workflows, Disable workflow, another example: /software/add/package > Add a .exe, notice disabled checkbox for automatic install)

• [x] Rollover a disabled checkbox and its label text and verify that the cursor does not change to the hand pointer.

4. Navigate to radio button within forms, 2 should suffice (e.g. /policies/manage > Manage automations > Other workflows, Disable workflow, /settings/users > Add user modal)

• [x] Rollover a radio button and its label text verify that the cursor changes to the hand pointer.

5. Navigate to disabled radio button within forms, 2 should suffice (e.g. /policies/manage > Manage automations > Other workflows, Disable workflow, /settings/users > Add user modal)

• [x] Rollover a disabled radio button and its label text verify that the cursor does not change to the hand pointer.
• [x] Repeat the above for a label that has a tooltip for both a radio button and a checkbox. (e.g. in Software > Add software > FMA > Add form, in /settings/users > Add user modal)

[fleet-release]

Hovering cursor, shifts Radio, checkbox light up. Consistency lifts.

[eugkuo]

Verified on dogfood.

[fleet-release]

In a glass city, Cursor turns hand over checks, Guiding users' steps.