fix: broken tooltips

[arikorn]

title props in FontAwesome no longer do anything. (Even though the prop is marked deprecated, it doesn't work at all.) This PR fixes the broken tooltips either as a title in a parent element or as InlineHelp where more emphasis may be desirable.

• Probably the most important fix here is the InputFeatureIcons (the $ and 🌐 indicators on inputs)
• In one case (ModuleVersionsRefresh) local rabbit insisted on a slightly bigger change to put the icon in the tab order. I am but a slave to the machine...

Summary by CodeRabbit

• Improvements
  • Enhanced accessibility across UI components: icons now use aria-labels and keyboard-friendly controls for activation.
  • Replaced standalone tooltips with consistent inline help wrappers to surface contextual help for badges, warnings, and feature icons.
  • Refined help text and tooltip presentation for clearer guidance and better screen-reader support.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8c446f9f-068e-4663-a10f-ebd595170550

📥 Commits

Reviewing files that changed from the base of the PR and between b87b026 and 805003f.

📒 Files selected for processing (1)

• webui/src/Instances/ModuleVersionsRefresh.tsx

---

📝 Walkthrough

Walkthrough

Refactors UI help/tooltip rendering: replaces title tooltips with InlineHelp wrappers, swaps title for aria-label on icons, and adds keyboard-accessible behavior (role/tabIndex/onKeyDown) for the module refresh control.

Changes

Cohort / File(s)	Summary
Controls webui/src/Controls/OptionsInputField.tsx	Replaced standalone FontAwesomeIcon title tooltips for feature indicators with InlineHelp(help=...) wrappers and removed title from icons.
Instances (panels & badges) webui/src/Instances/AddInstancePanel.tsx, webui/src/Instances/UpdateInstanceToLatestBadge.tsx	Wrapped warning/badge icons in InlineHelp, moved text into help, and replaced title with aria-label on icons.
Instances (refresh control) webui/src/Instances/ModuleVersionsRefresh.tsx	Made refresh control keyboard-accessible by adding onKeyDown (Enter/Space), role="button", tabIndex={0}; moved icon descriptions from title to aria-label; added dynamic title on spinner when progress ≠ 1.
Modules webui/src/Modules/ModuleVersionUsageIcon.tsx, webui/src/Modules/ModulesList.tsx	Wrapped usage and deprecation icons with InlineHelp(help=...), removed title attributes, and added aria-label on FontAwesomeIcon.

Poem

✨ Small icons wore a quiet cloak,
Help nestled close — a friendly folk.
Labels sing and keys can play,
UI smiles a bit more today. 🎈

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: broken tooltips' directly and specifically addresses the main change across all modified files—restoring non-functional FontAwesome tooltips by implementing InlineHelp components and aria-label attributes.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

webui/src/Modules/ModuleVersionUsageIcon.tsx (1)

19-23: Consider handling singular vs. plural grammar for better polish.

When matchingConnections is exactly 1, the text will read "1 connections are using this version" which is grammatically awkward. A small improvement could be:

✏️ Optional grammar fix

-	<InlineHelp help={`${matchingConnections} connections are using this version`}>
+	<InlineHelp help={`${matchingConnections} connection${matchingConnections === 1 ? ' is' : 's are'} using this version`}>
 		<FontAwesomeIcon
 			icon={isInstalled ? faPlug : faWarning}
-			aria-label={`${matchingConnections} connections are using this version`}
+			aria-label={`${matchingConnections} connection${matchingConnections === 1 ? ' is' : 's are'} using this version`}
 		/>

Totally optional—the tooltip fix itself looks great!

webui/src/Instances/ModuleVersionsRefresh.tsx (1)

31-42: Great accessibility improvements! 🎉

Adding keyboard support with role="button" and tabIndex={0} is a nice enhancement beyond just fixing the tooltip. One small suggestion: when handling the space key on a button-role element, it's good practice to prevent the default scroll behavior.

🛡️ Prevent page scroll on space key

 			onKeyDown={(e) => {
-				if (e.key === 'Enter' || e.key === ' ') doRefreshModules()
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.preventDefault()
+					doRefreshModules()
+				}
 			}}

Otherwise, pressing space might scroll the page while also triggering the refresh action.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 57b632ce-ac08-40ef-93a4-8f7127130a51

📥 Commits

Reviewing files that changed from the base of the PR and between 0a7ada7 and b87b026.

📒 Files selected for processing (6)

• webui/src/Controls/OptionsInputField.tsx
• webui/src/Instances/AddInstancePanel.tsx
• webui/src/Instances/ModuleVersionsRefresh.tsx
• webui/src/Instances/UpdateInstanceToLatestBadge.tsx
• webui/src/Modules/ModuleVersionUsageIcon.tsx
• webui/src/Modules/ModulesList.tsx