Improve accessibility and UX with keyboard support and better file previews#5
Merged
Conversation
- BucketQR: Replace inline media previews (img/audio/video) that used the destructive download-from-bucket endpoint with a safe file info card. Previously, just rendering the page would claim and delete the bucket contents before the user could click download. - FileSlideshow: Make download button text dynamic based on file type (Image/Video/Audio/File) instead of always saying "Download Image". Show filename, size, and MIME type in the non-preview fallback state instead of generic "Preview not available". - CORS: Fix production origin from qrbuddy.app (DNS pending) to qrbuddy.deno.dev so client-side Supabase edge function calls aren't blocked. Added APP_URL env var support for easy domain migration. - URLs: Update all hardcoded qrbuddy.app fallback URLs in edge functions (upload-file, create-bucket, create-dynamic-qr) and bucket route to use qrbuddy.deno.dev, matching the actual live deployment. https://claude.ai/code/session_01UPmVAFb2KTRv9LoN5cxr8m
The get-file-metadata edge function returns the theme field but the FileData interface in the route was missing it, so it was silently dropped. FileSlideshow already accepts theme as a prop and defaults to "sunset" - now it will use the actual theme the user chose. https://claude.ai/code/session_01UPmVAFb2KTRv9LoN5cxr8m
…R components - Fix file-validation.ts: constant is 50MB but docs/error message said 25MB — aligned all to 50MB - Add role="button", tabIndex, aria-label, and keyboard handlers to QRCanvas clickable div - Add same accessibility attributes to BucketQR clickable div, extract copy logic to shared handler - Update CLAUDE.md security section to reflect correct 50MB limit https://claude.ai/code/session_01UPmVAFb2KTRv9LoN5cxr8m
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR enhances accessibility and user experience by adding keyboard navigation support to interactive elements, improving file preview displays, and updating production URLs to use the Deno Deploy domain.
Key Changes
Accessibility Improvements
BucketQR.tsx: QR code canvas now responds to keyboard input with properrole,tabIndex, andaria-labelattributesQRCanvas.tsx: Download button supports keyboard activationFile Preview & Display Enhancements
BucketQR.tsx): Replaced separate image/audio/video preview components with a single file info card that:Code Organization
handleCopyUrl()function for reusability and cleaner codeURL Configuration Updates
https://qrbuddy.apptohttps://qrbuddy.deno.devacross:supabase/functions/_shared/cors.tssupabase/functions/create-bucket/index.tssupabase/functions/create-dynamic-qr/index.tssupabase/functions/upload-file/index.tsroutes/bucket/[code].tsxroutes/f/[code].tsxAPP_URLenvironment variable for flexible deployment configurationDocumentation
CLAUDE.mdto reflect 50MB file size limit (already implemented in code)Implementation Details
e.key === "Enter" || e.key === " ")https://claude.ai/code/session_01UPmVAFb2KTRv9LoN5cxr8m