fix: offline shortcut icon fallback

[prem-k-r]

📌 Description

Display offline shortcut icon when offline and not icon in cache

🎨 Visual Changes (Screenshots / Videos)

🔗 Related Issues

• Closes #<issue_number>
• Related to feat: Favicon Fallback Handling & Offline Icon Support #99

✅ Checklist

• I have read and followed the Contributing Guidelines.
• My code follows the project's coding style and conventions.
• I have tested my changes thoroughly to ensure expected behavior.
• I have verified compatibility across Chrome and Firefox (additional browsers if applicable).
• I have attached relevant visual evidence (screenshots/videos) if applicable.
• I have updated the CHANGELOG.md under the appropriate categories with all my changes in this PR.

Overview

This PR refactors shortcut icon rendering in scripts/shortcuts.js to use explicit DOM element creation, centralizes shortcut DOM construction, adds favicon error fallback to a local offline icon, and sets empty alt attributes on dynamically created img elements to avoid noisy screen reader output. The change removes innerHTML-based templating for shortcuts and standardizes DOM-based insertion.

Changes

• Introduced createShortcutElement(name, url, index) to build shortcut DOM nodes (link, logo container, logo node, and name span); renderShortcut delegates to it.
• Replaced string-based rendering with DOM node creation across single and bulk rendering paths (settings entries still use innerHTML for the settings panel entry template).
• getLogoHtml now returns DOM nodes:
  • Returns a GitHub img element for github.com (img.alt = "").
  • Wraps preset SVG strings and returns their first element.
  • Loads favicons via IMG elements with img.alt = "" and an error handler that falls back to ./svgs/offline.svg when loading fails.
• Added empty alt attributes to all dynamically created img elements for accessibility.
• Minor flow adjustments to ensure consistent DOM insertion and replacement when rendering or updating shortcuts.

Impact

• Removes innerHTML usage for main shortcut rendering, improving security and maintainability.
• Improves offline UX by showing a local offline shortcut icon when favicons are unavailable or the app is offline.
• Small accessibility improvement: img elements include empty alt attributes to prevent unnecessary screen reader announcements.
• No exported/public API changes.

Files Modified

• scripts/shortcuts.js: internal refactor and favicon fallback (+44/−26)

Notes

• No screenshots or changelog entries were provided.
• Checklist items in the PR description are present but not marked complete.

[coderabbitai]

📝 Walkthrough

Walkthrough

Replaced HTML string templating in scripts/shortcuts.js with explicit DOM construction for shortcut elements. getLogoHtml() now returns DOM nodes (images or wrapped SVGs) and rendering functions (createShortcutElement, renderShortcut, renderAllShortcuts) build and append nodes via DOM APIs, with favicon error handlers.

Changes

Cohort / File(s)	Summary
DOM-based shortcut rendering scripts/shortcuts.js	Replaced string-based HTML construction with DOM element creation. Introduced createShortcutElement(name, url, index). getLogoHtml() now returns DOM nodes (GitHub <img>, wrapped preset SVGs, favicon <img> with error handler). renderShortcut and renderAllShortcuts assemble and append nodes using DOM APIs instead of innerHTML/template literals.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description includes the Description and Related Issues sections, but lacks Visual Changes (screenshots/videos) and all checklist items are unchecked, including critical items like testing and changelog updates.	Mark completed checklist items with [x], particularly testing and changelog updates. Provide screenshots or videos demonstrating the offline icon fallback functionality if user-visible changes were made.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: offline shortcut icon fallback' accurately and concisely summarizes the main change in the PR—implementing offline shortcut icon fallback functionality.
Docstring Coverage	✅ Passed	Docstring coverage is 80.00% which is sufficient. The required threshold is 80.00%.

_{✏️ 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]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@scripts/shortcuts.js`:
- Around line 257-282: Add decorative accessibility attributes to all created
logo elements: for every HTMLImageElement instance (the GitHub shortcut img and
the Google favicon img) set img.alt = "" and img.setAttribute("aria-hidden",
"true"); and for the preset SVG case, after creating wrapper and before
returning wrapper.firstElementChild, if that node is an Element set
wrapper.firstElementChild.setAttribute("aria-hidden", "true") and
wrapper.firstElementChild.setAttribute("focusable", "false") (optional) so
screen readers ignore these decorative logos.

[itz-rj-here]

Uhhh I have a trip tomorrow. Well. Let's see if i can check now.

[prem-k-r]

@itz-rj-here waiting for your approval before merging

[itz-rj-here]

Works fine with no issues

[itz-rj-here]

[prem-k-r]

Works fine with no issues

Thanks! Hopefully you have verified for offline case too.

[itz-rj-here]

Works fine with no issues

Thanks! Hopefully you have verified for offline case too.

Lol i literally turned off the wifi 💀