Add labels to blog inputs

Author: Rikthepixel

src/assets/state/roadmap.tsx

@@ -68,7 +68,7 @@ export default [
         Alpha Version
       </Heading.H4>
       <p aria-labelledby="roadmap-alpha-version">
-        If everything goes according to plan, our goal is to release a public alpha version of Commit Rocket by September.
+        If everything goes according to plan, our goal is to release a public alpha version of Commit Rocket by the end of 2023.
         While it will be a challenging task, we are not afraid to take it on!
         Upon release of the first alpha version, we will also be open-sourcing the Git client!
       </p>

src/components/controls/Label.tsx

@@ -0,0 +1,23 @@
+import React, { DetailedHTMLProps, ForwardedRef, LabelHTMLAttributes, forwardRef, useMemo } from "react";
+import { twMerge } from "tailwind-merge";
+
+export interface LabelProps extends DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
+  htmlFor: string;
+}
+
+const Label = forwardRef(({ className, ...props }: LabelProps, ref: ForwardedRef<HTMLLabelElement>) => {
+
+  const computedClassName = useMemo(
+    () => twMerge("text-sm font-bold block", className),
+    [className]
+  );
+
+  return (
+    <label
+      className={computedClassName}
+      {...props}
+    />
+  );
+});
+
+export default Label;

src/components/controls/Select.tsx

@@ -30,6 +30,7 @@ export const itemStyle = cva("px-4 py-2", {
 });
 
 export type BaseProps<TOption extends any, TOptions extends readonly TOption[] = readonly TOption[]> = {
+  id?: string;
   name?: string;
   className?: string;
   containerClassName?: string;
@@ -66,6 +67,7 @@ const optionsAnim = {
 
 const Select = forwardRef(<TOption extends any>(
   {
+    id,
     name,
     className,
     containerClassName,
@@ -100,6 +102,7 @@ const Select = forwardRef(<TOption extends any>(
 
     <Listbox name={name} value={value} onChange={onChange}>
       <Listbox.Button
+        id={id}
         ref={ref}
         onBlur={onBlur}
         className={computedClassName}

src/components/pages/about/Member.tsx

@@ -9,8 +9,8 @@ const Member = ({ image, fullName, title, links }: IMember) => (
     <div className="flex flex-col items-center max-w-full gap-2 sm:flex-row md:flex-col">
       <img
         className="object-cover w-40 h-40 rounded-full shadow-md aspect-auto md:w-60 md:h-60"
-        aria-label=""
-        alt=""
+        aria-label={`A picture of ${fullName}`}
+        alt={`A picture of ${fullName}`}
         src={image.src}
         width={image.width}
         height={image.height}

src/pages/blog/index.tsx

@@ -19,6 +19,7 @@ import { calculateReadtime } from "@/utils/readtime";
 import fadeAnim from "@/animations/fade";
 import Heading from "@/components/layout/Heading";
 import { makeOgMeta } from "@/utils/meta/opengraph";
+import Label from "@/components/controls/Label";
 
 interface BlogPageProps {
   articles: IArticleBrief[];
@@ -94,21 +95,34 @@ const BlogPage: Page<BlogPageProps> = ({ articles, pathname }) => {
         <Heading.H1 id="blog" className="text-center text-secondary">
           Blog
         </Heading.H1>
-        <div className="mx-0 sm:mx-16 md:mx-0 motion-safe:transition-[margin-inline] motion-safe:duration-500 flex gap-2">
-          <Input
-            type="text"
-            color="secondary"
-            variant="outlined"
-            placeholder="Search..."
-            {...register("search")}
-          />
-          <ControlledSelect
-            name="sort"
-            color="secondary"
-            control={control}
-            options={SORT_OPTIONS}
-            getDisplayName={(opt) => opt.name}
-          />
+        <div className="mx-0 sm:mx-16 md:mx-0 motion-safe:transition-[margin-inline] motion-safe:duration-500 flex gap-2 items-end">
+          <div>
+            <Label htmlFor="search-input" className="text-secondary">
+              Search:
+            </Label>
+            <Input
+              id="search-input"
+              type="text"
+              color="secondary"
+              variant="outlined"
+              placeholder="Search..."
+              {...register("search")}
+            />
+          </div>
+          <div>
+            <Label htmlFor="sort-input" className="text-secondary">
+              Sort:
+            </Label>
+            <ControlledSelect
+              id="sort-input"
+              name="sort"
+              color="secondary"
+              control={control}
+              options={SORT_OPTIONS}
+              getDisplayName={(opt) => opt.name}
+            />
+          </div>
+
           <AnimatePresence>
             {tags.length > 0 && <motion.div
               variants={fadeAnim}