chore: improve seo / accessibility

alexmarqs · Feb 15, 2025 · 4d85acd · 4d85acd
1 parent 3ba846f
commit 4d85acd
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/apps/web/src/app/company/[slug]/page.tsx b/apps/web/src/app/company/[slug]/page.tsx
@@ -41,11 +41,13 @@ export async function generateMetadata({
 
   const title = `${company.name} - Leading Tech Company in Portugal | Explore Careers & More`;
   const description = company.description;
+  const keywords = `${company.name}, Tech Company, Careers, Portugal`;
 
   const metadata: Metadata = {
     ...defaultMetadata,
     title,
     description,
+    keywords,
     alternates: {
       canonical: `${APP_URL}/company/${slug}`,
     },

diff --git a/apps/web/src/components/CompaniesList.tsx b/apps/web/src/components/CompaniesList.tsx
@@ -46,14 +46,15 @@ export default function CompaniesList({
           initial={{ opacity: 0, scale: 0.95 }}
           animate={{ opacity: 1, scale: 1 }}
           transition={{ duration: 0.3 }}
+          aria-label="No companies found"
         >
           <EmptyState
             title="No companies found"
             description="We couldn't find any companies matching your search."
           />
         </motion.div>
       ) : (
-        <div className="flex-1 font-mono">
+        <div className="flex-1 font-mono" aria-label="Companies list">
           <motion.div
             className="mb-2 text-xs w-full flex flex-wrap items-center justify-between gap-2 text-muted-foreground"
             initial={{ opacity: 0, y: -10 }}
@@ -77,6 +78,7 @@ export default function CompaniesList({
                   delay: index * 0.05,
                   ease: "easeOut",
                 }}
+                aria-label={`Company ${company.name}`}
               >
                 <CompanyItem company={company} />
               </motion.div>

diff --git a/apps/web/src/components/CompanyItem.tsx b/apps/web/src/components/CompanyItem.tsx
@@ -19,12 +19,14 @@ export default function CompanyItem({
       variant={isFeatured ? "featured" : "default"}
       className="w-full relative"
       data-testid="company-item"
+      aria-label={`Company: ${name}`}
     >
       <Link
         className={cn(
           "group flex w-full gap-2 p-5 hover:cursor-pointer hover:bg-muted/40",
         )}
         href={`/company/${slug}`}
+        aria-label={`View details for ${name}`}
       >
         <div className="flex w-full flex-col gap-4 ">
           <div className="flex w-full flex-wrap items-center justify-between gap-2">
@@ -42,6 +44,7 @@ export default function CompanyItem({
         <ChevronRight
           className="shrink-0 self-center text-muted-foreground"
           size={24}
+          aria-hidden="true"
         />
       </Link>
     </RetroContainer>

diff --git a/apps/web/src/components/SearchSideBar.tsx b/apps/web/src/components/SearchSideBar.tsx
@@ -33,13 +33,17 @@ export function SearchSideBar({
     useSearchQueryParams();
 
   return (
-    <div className="w-full flex flex-col h-full gap-4 justify-between">
+    <div
+      className="w-full flex flex-col h-full gap-4 justify-between"
+      role="search"
+    >
       <RetroContainer
         variant="static"
         className="shrink-0 md:w-[290px] md:mx-auto"
       >
-        <div className="px-4 py-3 w-full">
-          <div className="mt-2">
+        <form className="px-4 py-3 w-full" aria-label="Search form">
+          <fieldset className="mt-2">
+            <legend className="sr-only">Search Filters</legend>
             <div className="space-y-4">
               <div className="flex flex-col gap-2">
                 <Label htmlFor="query">Search term</Label>
@@ -54,6 +58,7 @@ export function SearchSideBar({
                   }}
                   value={searchParams.query || ""}
                   placeholder="Name or description term"
+                  aria-label="Search by name or description"
                 />
               </div>
               <div className="flex flex-col gap-2">
@@ -63,6 +68,7 @@ export function SearchSideBar({
                   onValueChange={(value) =>
                     setSearchParams({ category: value, page: 1 })
                   }
+                  aria-label="Select a category"
                 >
                   <SelectTrigger id="category" className="w-full">
                     <SelectValue placeholder="Select a category" />
@@ -84,6 +90,7 @@ export function SearchSideBar({
                   onValueChange={(value) =>
                     setSearchParams({ location: value, page: 1 })
                   }
+                  aria-label="Select a location"
                 >
                   <SelectTrigger id="location" className="w-full">
                     <SelectValue placeholder="Select a location" />
@@ -114,8 +121,8 @@ export function SearchSideBar({
               </Button>
               {extendedUI && extendedUI()}
             </div>
-          </div>
-        </div>
+          </fieldset>
+        </form>
       </RetroContainer>
     </div>
   );