Add desktop QR-code button to iOS download page - #1654
Conversation
Desktop visitors to /download/ios can't install from the App Store link, so show a "Get it for mobile" button that opens a QR-code modal instead. iOS/Android/other visitors still get the App Store button. QR is a placeholder (WIP): it encodes the App Store URL for now; destination and unique tracking token to be finalized before launch.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1654 +/- ##
==========================================
+ Coverage 88.15% 88.43% +0.28%
==========================================
Files 167 171 +4
Lines 11600 12093 +493
==========================================
+ Hits 10226 10695 +469
- Misses 1374 1398 +24 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
knowler
left a comment
knowler
left a comment
There was a problem hiding this comment.
Similar to #1699 (comment), I think we we should include a link alternative for the QR code, since that’d better serve screen reader and keyboard users.
stephaniehobson
left a comment
stephaniehobson
left a comment
There was a problem hiding this comment.
CSS code change requested to improve maintainability.
Question (non blocking): Why are we only doing this on the iOS page and not the Android one?
|
|
||
| /* The QR alt link inherits the base link purple, which is low-contrast on the | ||
| white dialog. Match the dialog's own near-black text color instead. */ | ||
| .fl-qr-code-dialog .fl-qr-code-floating-content a { |
There was a problem hiding this comment.
Todo (blocking): Please add link color support to the parent .fl-qr-code-dialog where the background and text colours are defined. Also, we don't need a comment if it's done there.
| {# Marketing-provided static QR: its destination and tracking token are baked into | ||
| the image and maintained by the marketing team, not generated from ios_url. #} | ||
| <div class="fl-qr-code-image"> | ||
| <img src="{{ static('img/firefox/browsers/mobile/ios/qr-code-ios.png') }}" width="740" height="740" alt=""> |
There was a problem hiding this comment.
Todo (blocking): Please add alt text for the QR Code. Screen reader users can still scan codes with their mobile phones if they know there is one. The string download-scan-to-get may work here.
| {# Marketing-provided static QR: its destination and tracking token are baked into | ||
| the image and maintained by the marketing team, not generated from ios_url. #} |
There was a problem hiding this comment.
| {# Marketing-provided static QR: its destination and tracking token are baked into | |
| the image and maintained by the marketing team, not generated from ios_url. #} |
Thank you Claude, we know what a QR code is and how to maintain it.
| {# Text-link alternative to the QR for keyboard / screen-reader users | ||
| and anyone without a phone camera. #} |
There was a problem hiding this comment.
| {# Text-link alternative to the QR for keyboard / screen-reader users | |
| and anyone without a phone camera. #} |
Tautological comment is tautological.
| </div> | ||
| {# Text-link alternative to the QR for keyboard / screen-reader users | ||
| and anyone without a phone camera. #} | ||
| <a href="{{ url('firefox.browsers.mobile') }}">{{ ftl('download-get-firefox-on-your-phone') }}</a> |
There was a problem hiding this comment.
Enhancement (non-blocking): Let's change this to something more indicative of where the link goes like: "Download from the App Store" (and if we do it on the Android page: "Download from the Play Store")
3 participants
One-line summary
Add a desktop-only QR-code button to the iOS download page so visitors who can't install from the App Store link can scan to get Firefox on their phone.
Significant changes and points to review
cms/download_page.html(iOS branch only) — This is the main change and the thing to review. The page is shared by all six platform download pages; the change is scoped strictly to thepage.platform == "ios"branch. Desktop visitors (windows/osx/linux) now see a "Get it for mobile" button that opens a QR-code modal (fl-dialog); everyone else (ios/android/other) still gets the existing App Store button. Show/hide is the existingconditional-displayCSS mechanism keyed off the platform classsite.jsputs on<html>— both buttons render in the HTML and CSS gates visibility. No new JS/CSS: the modal reuses the Flare dialog (setupDialogs) and QR (qrcode_rounded) already loaded viabase-flare.html.l10n/en/cms/download.ftl(download-get-it-for-mobile,download-scan-to-get) in the CMS Fluent namespace (scoped to CMS locales), wired viaDownloadPage.ftl_files./browsers/mobile/page vs. App Store deep-link) and (2) a QR-specific tracking token. Marked with aTODO (WIP)in the template. Please don't merge until that's resolved.Testing
/download/ios.<html>element and edit itsclass:ios→ App Store button shows, QR button hidden.windows/osx/linux→ QR button shows, App Store hidden.android/other→ App Store button shows (fallback)./download/,/download/android, etc.) are unchanged.