Fix typing cursor to follow text inline#9
Conversation
Replace absolute-positioned cursors in Smart Medication Search and AI-Aided Diagnosis demos with inline spans that render immediately after the last typed character, matching natural cursor behavior.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the user experience in the Smart Medication Search and AI-Aided Diagnosis demos by rectifying an unnatural cursor behavior. By transitioning from an absolute-positioned cursor to an inline rendering method, the typing animation now appears more intuitive and visually consistent with user expectations, making the interactive elements feel more polished and responsive. Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request successfully fixes the typing cursor animation to be inline with the text, which is a great visual improvement. The implementation is clean and consistent with other parts of the showcase. My main feedback is regarding accessibility. By replacing semantic <input> and <textarea> elements with <div>s, we've lost some accessibility features. I've added a couple of suggestions to add ARIA attributes to the new div elements to restore their semantic meaning for screen reader users.
| <div className="w-full px-3 md:px-4 py-2 md:py-3 border border-border/70 rounded-lg bg-background transition-colors text-sm md:text-base font-medium mb-2 min-h-[2.5rem] md:min-h-[2.75rem] flex items-center"> | ||
| {medicationInput ? ( | ||
| <span> | ||
| {medicationInput} | ||
| {medicationInput.length < 10 && !selectedMedication && ( | ||
| <motion.span | ||
| animate={{ opacity: [1, 0] }} | ||
| transition={{ repeat: Infinity, duration: 0.8 }} | ||
| className="inline-block w-0.5 h-4 md:h-5 bg-foreground/60 align-middle ml-px" | ||
| /> | ||
| )} | ||
| </span> | ||
| ) : ( | ||
| <span className="text-muted-foreground">Start typing medication name...</span> | ||
| )} | ||
| </div> |
There was a problem hiding this comment.
While this change correctly implements the inline cursor, replacing the <input> element with a <div> harms accessibility. The new element is not focusable and lacks semantic meaning for screen readers. We can restore accessibility by adding role, aria-readonly, aria-label, and tabIndex attributes to the div.
| <div className="w-full px-3 md:px-4 py-2 md:py-3 border border-border/70 rounded-lg bg-background transition-colors text-sm md:text-base font-medium mb-2 min-h-[2.5rem] md:min-h-[2.75rem] flex items-center"> | |
| {medicationInput ? ( | |
| <span> | |
| {medicationInput} | |
| {medicationInput.length < 10 && !selectedMedication && ( | |
| <motion.span | |
| animate={{ opacity: [1, 0] }} | |
| transition={{ repeat: Infinity, duration: 0.8 }} | |
| className="inline-block w-0.5 h-4 md:h-5 bg-foreground/60 align-middle ml-px" | |
| /> | |
| )} | |
| </span> | |
| ) : ( | |
| <span className="text-muted-foreground">Start typing medication name...</span> | |
| )} | |
| </div> | |
| <div role="textbox" aria-readonly="true" aria-label="Medication Name (type to search)" tabIndex={0} className="w-full px-3 md:px-4 py-2 md:py-3 border border-border/70 rounded-lg bg-background transition-colors text-sm md:text-base font-medium mb-2 min-h-[2.5rem] md:min-h-[2.75rem] flex items-center"> | |
| {medicationInput ? ( | |
| <span> | |
| {medicationInput} | |
| {medicationInput.length < 10 && !selectedMedication && ( | |
| <motion.span | |
| animate={{ opacity: [1, 0] }} | |
| transition={{ repeat: Infinity, duration: 0.8 }} | |
| className="inline-block w-0.5 h-4 md:h-5 bg-foreground/60 align-middle ml-px" | |
| /> | |
| )} | |
| </span> | |
| ) : ( | |
| <span className="text-muted-foreground">Start typing medication name...</span> | |
| )} | |
| </div> |
| <div className="w-full px-3 md:px-4 py-2 md:py-3 border border-border/70 rounded-lg bg-background transition-colors text-xs md:text-sm min-h-[70px] md:min-h-[80px]"> | ||
| {complaints ? ( | ||
| <span> | ||
| {complaints} | ||
| {complaints.length < fullComplaintsText.length && ( | ||
| <motion.span | ||
| animate={{ opacity: [1, 0] }} | ||
| transition={{ repeat: Infinity, duration: 0.8 }} | ||
| className="inline-block w-0.5 h-3 md:h-4 bg-foreground/60 align-middle ml-px" | ||
| /> | ||
| )} | ||
| </span> | ||
| ) : ( | ||
| <span className="text-muted-foreground">Enter patient complaints...</span> | ||
| )} | ||
| </div> |
There was a problem hiding this comment.
Similar to the medication search input, replacing the <textarea> with a <div> harms accessibility. Let's add ARIA attributes to make this element accessible to screen reader users. Since this is a multi-line field, we should also add aria-multiline="true".
| <div className="w-full px-3 md:px-4 py-2 md:py-3 border border-border/70 rounded-lg bg-background transition-colors text-xs md:text-sm min-h-[70px] md:min-h-[80px]"> | |
| {complaints ? ( | |
| <span> | |
| {complaints} | |
| {complaints.length < fullComplaintsText.length && ( | |
| <motion.span | |
| animate={{ opacity: [1, 0] }} | |
| transition={{ repeat: Infinity, duration: 0.8 }} | |
| className="inline-block w-0.5 h-3 md:h-4 bg-foreground/60 align-middle ml-px" | |
| /> | |
| )} | |
| </span> | |
| ) : ( | |
| <span className="text-muted-foreground">Enter patient complaints...</span> | |
| )} | |
| </div> | |
| <div role="textbox" aria-readonly="true" aria-multiline="true" aria-label="Chief Complaints" tabIndex={0} className="w-full px-3 md:px-4 py-2 md:py-3 border border-border/70 rounded-lg bg-background transition-colors text-xs md:text-sm min-h-[70px] md:min-h-[80px]"> | |
| {complaints ? ( | |
| <span> | |
| {complaints} | |
| {complaints.length < fullComplaintsText.length && ( | |
| <motion.span | |
| animate={{ opacity: [1, 0] }} | |
| transition={{ repeat: Infinity, duration: 0.8 }} | |
| className="inline-block w-0.5 h-3 md:h-4 bg-foreground/60 align-middle ml-px" | |
| /> | |
| )} | |
| </span> | |
| ) : ( | |
| <span className="text-muted-foreground">Enter patient complaints...</span> | |
| )} | |
| </div> |
1 participant
Summary
What changed?
Both demos used
absolute right-3positioning for the typing cursor, which looked unnatural since the typed text is left-aligned. Replaced the readonly<input>/<textarea>+ absolute-positioned cursor with styled<div>s that render text and an inline<motion.span>cursor side by side, matching the approach already used in the Smart Dictation demo.src/components/FeatureShowcase.tsx: Converted medication search input and diagnosis complaints textarea from absolute cursor overlay to inline cursor renderingTest plan