[Fix] search icon vertical alignment in navigation bar#1016
[Fix] search icon vertical alignment in navigation bar#1016Flashl3opard wants to merge 4 commits intoalphaonelabs:mainfrom
Conversation
|
Note
|
| Cohort / File(s) | Summary |
|---|---|
Template Styling & Accessibility web/templates/base.html |
Updated CSS utility classes on desktop and mobile search-submit buttons from fixed top-2/top-2.5 to top-1/2 with -translate-y-1/2 for vertical centering; added aria-label and title to the desktop submit button and aria-hidden="true" to decorative icon elements. |
Estimated code review effort
🎯 1 (Trivial) | ⏱️ ~2 minutes
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title clearly and accurately describes the main change: fixing search icon vertical alignment in the navigation bar, which aligns with the core objective of the PR. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing Touches
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
👀 Peer Review RequiredHi @Flashl3opard! This pull request does not yet have a peer review. Before this PR can be merged, please request a review from one of your peers:
Thank you for contributing! 🎉 |
There was a problem hiding this comment.
Pull request overview
This PR fixes the vertical alignment of the search icon inside the desktop and mobile navigation search inputs by switching from fixed top-* offsets to centering via top-1/2 with -translate-y-1/2.
Changes:
- Desktop navbar search icon: replace
top-2withtop-1/2 -translate-y-1/2. - Mobile menu search icon: replace
top-2.5withtop-1/2 -translate-y-1/2.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/templates/base.html`:
- Around line 351-353: The icon-only search submit buttons using the markup with
<button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2
text-gray-500 dark:text-gray-300"> and the mobile variant that contains <i
class="fas fa-search"></i> need accessible names; add an aria-label (for example
aria-label="Search") to both button elements or include visually-hidden
descriptive text inside the buttons (e.g., a span with sr-only classes) so
screen readers announce a proper label instead of just “button”; update both the
desktop button and the mobile variant (the ones with the fa-search icon)
accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository: alphaonelabs/coderabbit/.coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: d0090205-b435-4b54-ad75-1dcc0f4ad100
📒 Files selected for processing (1)
web/templates/base.html
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
♻️ Duplicate comments (1)
web/templates/base.html (1)
552-555:⚠️ Potential issue | 🟡 MinorAdd an accessible name to the mobile search button.
This variant is still an icon-only submit button, so assistive tech will announce only “button”. Please mirror the desktop fix here and mark the icon as decorative as well.
♿ Suggested fix
<button type="submit" - class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400"> - <i class="fas fa-search"></i> + class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400" + aria-label="Search courses" + title="Search"> + <i class="fas fa-search" aria-hidden="true"></i> </button>As per coding guidelines, "Include proper ARIA labels where needed for accessibility."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/templates/base.html` around lines 552 - 555, The mobile icon-only submit button (the <button> with classes "absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400") needs an accessible name and the icon marked decorative; add an appropriate accessible label (e.g., aria-label="Search" or visually-hidden text) to that <button> and mark the <i class="fas fa-search"> as decorative (e.g., role="img" aria-hidden="true" or equivalent) to mirror the desktop fix so screen readers announce the button properly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@web/templates/base.html`:
- Around line 552-555: The mobile icon-only submit button (the <button> with
classes "absolute right-3 top-1/2 -translate-y-1/2 text-gray-500
dark:text-gray-400") needs an accessible name and the icon marked decorative;
add an appropriate accessible label (e.g., aria-label="Search" or
visually-hidden text) to that <button> and mark the <i class="fas fa-search"> as
decorative (e.g., role="img" aria-hidden="true" or equivalent) to mirror the
desktop fix so screen readers announce the button properly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository: alphaonelabs/coderabbit/.coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 62788656-a333-4a49-86ad-950c0bb70b61
📒 Files selected for processing (1)
web/templates/base.html
github-actions
bot
dismissed
their stale review
All review conversations have been resolved.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/templates/base.html`:
- Around line 552-555: The nested Font Awesome <i> icon inside the search
<button> is decorative because the button already has an accessible name
(aria-label="Search courses"); update the <i> element (the icon with class "fas
fa-search") to be ignored by assistive tech by adding aria-hidden="true" so
screen readers don't announce the decorative icon.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository: alphaonelabs/coderabbit/.coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 65f7ffed-39ff-4b29-a083-39ff8d84b78c
📒 Files selected for processing (1)
web/templates/base.html
Description
Fixed the vertical alignment of the search icon in both desktop and mobile navigation bars. The icon was previously using fixed positioning (
top-2andtop-2.5) which didn't properly center it with the input field.Changes:
top-2totop-1/2 -translate-y-1/2top-2.5totop-1/2 -translate-y-1/2Screenshots
Before
After
Checklist
This PR fixes the vertical alignment of the search icon in both desktop and mobile navigation bars by updating the CSS positioning and improves related accessibility attributes.
Key changes
top-2totop-1/2 -translate-y-1/2.top-2.5totop-1/2 -translate-y-1/2.aria-labelandtitleto the desktop search button and marked the visual icon elementaria-hidden="true".Technical details
Impact