Add Hover State to All Buttons

[michaelchadwick]

Fixes ilios/ilios#6915

• <button>
• <a> acting as buttons
• ToggleButtons
• YesNo Buttons
• BigAdd/BigCancel Buttons
• <button> around <svg>
• data-test-actions with icons

[netlify]

✅ Deploy Preview for ilios-frontend ready!

Name	Link
🔨 Latest commit	ae4abe2
🔍 Latest deploy log	https://app.netlify.com/projects/ilios-frontend/deploys/6a6a3a5b43165f0008e364d5
😎 Deploy Preview	https://deploy-preview-9438--ilios-frontend.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

❌ Visual Diff Report — FAILED

984 images compared: 48 different · 936 identical

Details

Differences (48)

File	Diff %	Notes
desktop-Acceptance _ Course - Objective Mesh Descriptors _ cancel changes _ managed background color.png	0.02%
desktop-Acceptance _ Course - Objective Mesh Descriptors _ manage terms _ managed background color.png	0.02%
desktop-Acceptance _ Course - Objective Mesh Descriptors _ save terms _ managed background color.png	0.02%
desktop-Acceptance _ Course - Objective Parents _ cancel changes _ managed background color.png	0.02%
desktop-Acceptance _ Course - Objective Parents _ save changes _ objective manager.png	0.02%
desktop-Acceptance _ Session - Objective Mesh Descriptors _ cancel changes _ managed background color.png	0.02%
desktop-Acceptance _ Session - Objective Mesh Descriptors _ manage terms _ managed background color.png	0.02%
desktop-Acceptance _ Session - Objective Mesh Descriptors _ save terms _ managed background color.png	0.02%
desktop-Acceptance _ Session - Objective Parents _ cancel changes _ managed background color.png	0.01%
desktop-Acceptance _ Session - Objective Parents _ deselect all parents for session objective _ managed background color.png	0.01%
desktop-Acceptance _ Session - Objective Parents _ list parent objectives _ managed background color.png	0.01%
desktop-Acceptance _ Session - Objective Parents _ save changes _ managed background color.png	0.01%
laptop-Acceptance _ Course - Objective Mesh Descriptors _ cancel changes _ managed background color.png	0.02%
laptop-Acceptance _ Course - Objective Mesh Descriptors _ manage terms _ managed background color.png	0.02%
laptop-Acceptance _ Course - Objective Mesh Descriptors _ save terms _ managed background color.png	0.02%
laptop-Acceptance _ Course - Objective Parents _ cancel changes _ managed background color.png	0.02%
laptop-Acceptance _ Course - Objective Parents _ save changes _ objective manager.png	0.02%
laptop-Acceptance _ Session - Objective Mesh Descriptors _ cancel changes _ managed background color.png	0.01%
laptop-Acceptance _ Session - Objective Mesh Descriptors _ manage terms _ managed background color.png	0.01%
laptop-Acceptance _ Session - Objective Mesh Descriptors _ save terms _ managed background color.png	0.01%
laptop-Acceptance _ Session - Objective Parents _ cancel changes _ managed background color.png	0.01%
laptop-Acceptance _ Session - Objective Parents _ deselect all parents for session objective _ managed background color.png	0.01%
laptop-Acceptance _ Session - Objective Parents _ list parent objectives _ managed background color.png	0.01%
laptop-Acceptance _ Session - Objective Parents _ save changes _ managed background color.png	0.01%
phone-Acceptance _ Course - Objective Mesh Descriptors _ cancel changes _ managed background color.png	0.06%
… and 23 more

Download the results.

[stopfstedt]

click tested for a bit, the only "button" without a noticeable hover state that i found was this one on the courses list. (it's not really a button but it looks like one).
i'd be ok with dealing with this one in a follow-up.

the choice of colors tracks for me.

[michaelchadwick]

@stopfstedt That's a ToggleButton component, right? They have a hover state now, but only on the inactive button. It seemed unnecessary to add one for the active button since clicking it doesn't do anything, since it's...already active. The hover state indicates something that can be clicked to change a state.

[stopfstedt]

@stopfstedt That's a ToggleButton component, right? They have a hover state now, but only on the inactive button. It seemed unnecessary to add one for the active button since clicking it doesn't do anything, since it's...already active. The hover state indicates something that can be clicked to change a state.

i looked into the web accessibility aspect of this, and a viz change on hover is not required here.

The pointer itself, via its location, is the indicator of whether the user is hovering on a component. Therefore, additional author-supplied visual treatments for hover are not "required to identify" the hover state. Those treatments can be considered supplemental and do not themselves need to contrast 3:1 against the background.

carry on.

[michaelchadwick]

Please have a look and comment on the color choices, thank you.