🎨 Palette: UX and Accessibility Improvements#75
Conversation
…t Form This PR enhances the accessibility and user experience across several key components of the ShtefAI blog. ### 💡 What: - **Blog Grid:** Replaced `onClick` navigation on cards with a semantic "stretched link" pattern. - **Blog Grid:** Converted category badges into focusable button elements. - **Contact Form:** Added `aria-required` to mandatory fields and an `aria-live="polite"` region for the success message. - **Header:** Added a tooltip to the mobile menu trigger for consistency. ### 🎯 Why: - Improves screen reader support and keyboard navigation. - Ensures the blog cards are crawlable by search engines and support native browser features (right-click open in new tab). - Provides better feedback for assistive technologies on form submission. ### ♿ Accessibility: - Semantic `<a>` tags (via Next.js `Link`) for better SEO and assistive technology support. - `aria-live="polite"` and `role="status"` on the form's success message to announce state changes. - Focusable category filters for keyboard-only users. - `aria-required="true"` on mandatory form inputs. - `Tooltip` components for icon-only buttons.
|
👋 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
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 78df781047
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <TooltipTrigger asChild> | ||
| <MenuDropdown |
There was a problem hiding this comment.
TooltipTrigger asChild is wrapping MenuDropdown (a composite component), not the actual DOM button, so Radix trigger props/ref are not forwarded to an element that can receive them. In practice, the new “Menu” tooltip will not activate on hover/focus of the menu icon (and may log ref warnings), which means this accessibility enhancement is effectively broken on small-screen navigation.
Useful? React with 👍 / 👎.
1 participant
I've implemented several accessibility and UX enhancements:
onClickhandlers ondivelements to a "stretched link" pattern using Next.jsLink. This makes the entire card clickable while being semantically correct and accessible. I also made the category badges focusable buttons.aria-required="true"to required fields and anaria-live="polite"status region to the success message, ensuring screen reader users are notified when a message is successfully sent.All changes were verified with
pnpm lint,pnpm check-types, and a full production build. I also performed frontend verification using Playwright to ensure the new patterns work as expected.PR created automatically by Jules for task 1225850518857950021 started by @administrakt0r