Audit: fix missing hero images, add Contact business info, improve FAQ accessibility#10
Audit: fix missing hero images, add Contact business info, improve FAQ accessibility#10phoward38 wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
This PR successfully addresses the stated goals of fixing build warnings and improving accessibility. The changes are well-documented and the implementation correctly resolves missing hero image references, adds business contact information, improves FAQ content consistency, and enhances accessibility with proper ARIA attributes.
Key improvements:
- Eliminated build-time Vite warnings by updating hero image paths to existing assets
- Enhanced accessibility with
aria-expandedattributes and synchronized state management in FAQ accordion - Improved user experience by adding structured business information on the contact page
- Aligned FAQ content with actual contact behavior
The one indentation issue identified should be corrected to maintain code quality standards.
You can now have the agent implement changes and create commits directly on your pull request's source branch. Simply comment with /q followed by your request in natural language to ask the agent to make changes.
| <li><strong>Response time:</strong> Usually within 1 business day</li> | ||
| </ul> | ||
| </div> | ||
| <form class="contact-form"> |
There was a problem hiding this comment.
Fix inconsistent indentation - this form element has 12 spaces of leading whitespace while surrounding elements use 6 spaces, breaking the consistent indentation pattern.
| <form class="contact-form"> | |
| <form class="contact-form"> |
There was a problem hiding this comment.
Code Review
This pull request implements several fixes and improvements based on a codebase audit. Key changes include updating missing hero image references across multiple pages (contact, FAQ, team, and testimonials), adding a business information block to the contact page, and improving the accessibility of the FAQ accordion by managing aria-expanded states. Feedback was provided to further improve accessibility on the contact page by replacing a generic div with a semantic <section> element and correcting some minor form indentation.
| <div class="contact-details" aria-label="Business contact information"> | ||
| <h2>Business Information</h2> | ||
| <ul> | ||
| <li><strong>Email:</strong> <a href="mailto:info@noclocks.dev">info@noclocks.dev</a></li> | ||
| <li><strong>Location:</strong> Atlanta, Georgia, United States</li> | ||
| <li><strong>Response time:</strong> Usually within 1 business day</li> | ||
| </ul> | ||
| </div> | ||
| <form class="contact-form"> |
There was a problem hiding this comment.
Using a generic div with an aria-label is not fully accessible because many screen readers do not announce labels on non-semantic elements unless they have an explicit landmark or widget role. Additionally, the <form> tag on line 37 has incorrect indentation (12 spaces instead of 6).
To improve accessibility and code formatting, we can refactor the div to a semantic <section> element with aria-labelledby pointing to the heading, and fix the indentation of the <form> tag.
<section class="contact-details" aria-labelledby="contact-details-title">
<h2 id="contact-details-title">Business Information</h2>
<ul>
<li><strong>Email:</strong> <a href="mailto:info@noclocks.dev">info@noclocks.dev</a></li>
<li><strong>Location:</strong> Atlanta, Georgia, United States</li>
<li><strong>Response time:</strong> Usually within 1 business day</li>
</ul>
</section>
<form class="contact-form">
Motivation
Description
src/pages/contact.astro,src/pages/team.astro,src/pages/testimonials.astro, andsrc/pages/faq.astroto use existing images under/images/heroes/to eliminate missing-asset warnings.src/pages/contact.astro(email, location, typical response time) and accompanying styles for clear presentation.src/pages/faq.astroto reflect real response expectations and addedaria-expanded="false"to accordion buttons.aria-expandedin the FAQ accordion toggle code so the UI state and ARIA attribute update together, and added a new audit report atdocs/audit-2026-05-23.mddocumenting findings and recommendations.Testing
npm run buildbefore changes and observed Vite warnings about unresolved hero image references.npm run buildafter changes and verified the build completes successfully with no missing-asset warnings.Codex Task