🎨 Palette: UX and accessibility enhancements for contact form and footer#70
Conversation
💡 What: - Improved the contact form with async state management (loading spinner and success confirmation). - Fixed a bug where the phone input used an incorrect ID and wasn't using type="tel". - Added a Tooltip to the theme toggle button. - Added aria-label attributes to social and RSS links in the footer. - Added transition-colors for smoother footer link interactions. 🎯 Why: - Provides immediate visual feedback for users submitting the form, preventing uncertainty and double submissions. - Ensures the application is accessible to screen reader users by providing labels for icon-only interactive elements. - Polishes the UI with standard interaction patterns (tooltips, smooth transitions). ♿ Accessibility: - Added aria-label to Twitter, GitHub, and RSS icons. - Fixed id/htmlFor mismatch in form. - Added sr-only labels to form icons. - Added visual required indicators.
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![ai-coding-guardrails[bot]](https://avatars.githubusercontent.com/in/1202546?s=60&v=4){kind=small}
There was a problem hiding this comment.
You've hit your review limit for the day, but don't worry you'll get some more tomorrow!
Contact us at hello@zenable.io if you want this rate limit to go away
1 participant
💡 What:
aria-labelattributes to social media icons in the footer andsr-onlytext for input icons. Corrected an incorrectidin the contact form (changing "subject" to "phone" for the phone number field).Tooltipto the theme toggle button andtransition-colorsto footer links for smoother interaction.requiredattributes to mandatory fields and visual indicators (*in red).🎯 Why:
The application lacked feedback for the contact form, making it unclear if a message was successfully sent. Additionally, icon-only buttons in the footer and header were not fully accessible to screen readers or lacked visual cues for sighted users (tooltips). These changes improve both the usability and inclusivity of the site.
♿ Accessibility:
id/htmlForrelationship on the phone input.aria-labelto all icon-only links in the footer.Tooltipfor better discoverability.sr-onlydescriptions for decorative/functional icons within input fields.PR created automatically by Jules for task 2627643140348944403 started by @administrakt0r