Accessibility/part ii

src/app/(main)/my-voyage/[teamId]/features/components/Card.tsx

@@ -67,7 +67,7 @@ export default function Card({ feature, index, setEditMode }: CardProps) {
             )}
             <div className="flex items-center justify-between">
               <div className="flex flex-col gap-y-1">
-                <h5 className="text-base font-semibold">{description}</h5>
+                <span className="text-base font-semibold">{description}</span>
                 <span className="text-[10px] text-neutral-focus">{`Added by ${
                   isCurrentUser ? "you" : firstName + " " + lastName
                 }`}</span>

src/app/(main)/my-voyage/[teamId]/features/components/List.tsx

@@ -39,7 +39,7 @@ export default function List({ id, title, features }: ListProps) {
 
   return (
     <div className="flex w-full flex-col rounded-2xl bg-base-200 py-6 font-semibold text-base-300">
-      <h4 className="mx-6 mb-4 text-xl capitalize">{title}</h4>
+      <h2 className="mx-6 mb-4 text-xl capitalize">{title}</h2>
       {/* Features container / drag and drop area */}
       <Droppable droppableId={id.toString()}>
         {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (

src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx

@@ -81,9 +81,9 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
     <div className="h-80 min-w-[420px] rounded-lg bg-base-200 px-6 py-5 text-base-300 sm:w-96">
       <div className="flex flex-row justify-start">
         {GetIcon(title)}
-        <h3 className="self-center text-xl font-semibold text-base-300">
+        <span className="self-center text-xl font-semibold text-base-300">
           {title}
-        </h3>
+        </span>
       </div>
 
       <div className="mt-6 h-40 overflow-y-auto pt-1">

src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourceCard.tsx

@@ -80,13 +80,14 @@ export default function ResourceCard({
             <Badge title={user.firstName} avatarUrlImage={user.avatar} />
           </div>
           <div className="h-5 w-1 border border-y-0 border-l-0 border-r-neutral-content"></div>
-          <div className="text-neutral">Added {date}</div>
+          <div className="text-neutral-focus">Added {date}</div>
         </div>
       </div>
       {userId === currentUserId ? (
         <IconButton
           className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-base-100"
           onClick={openDeleteModal}
+          aria-label="delete"
         >
           <TrashIcon className="h-6 w-6" />
         </IconButton>

src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourceInput.tsx

@@ -74,6 +74,7 @@ export default function ResourceInput() {
         <TextInput
           id="url"
           placeholder="Paste your resource link here."
+          ariaLabel="link"
           errorMessage={
             errors.url?.type === "invalid_string"
               ? "Must start with https://"
@@ -85,6 +86,7 @@ export default function ResourceInput() {
         <TextInput
           id="title"
           placeholder="Name your resource here."
+          ariaLabel="resource name"
           {...register("title")}
         />
       </div>

src/components/Button.tsx

@@ -89,13 +89,11 @@ export default function Button({
   variant,
   size,
   children,
-  role,
   ...props
 }: ButtonProps) {
   return (
     <button
       type="button"
-      role={role}
       aria-label={props["aria-label"]}
       className={cn(button({ variant, size, className }))}
       {...props}

src/components/banner/VoyagePageBannerContainer.tsx

@@ -13,7 +13,7 @@ export default function VoyagePageBannerContainer({
     <div className="box-border flex max-h-[320px] w-full flex-row justify-between gap-x-10 px-20 lg:gap-x-20">
       {children}
       <div className="flex max-w-[700px] flex-col justify-center gap-y-3.5 2xl:max-w-none">
-        <h3 className="text-3xl font-bold text-base-300">{title}</h3>
+        <h1 className="text-3xl font-bold text-base-300">{title}</h1>
         <p className="text-lg font-medium text-base-300">{description}</p>
       </div>
     </div>

src/components/inputs/TextInput.tsx

@@ -21,6 +21,7 @@ interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   inputGroupContent?: JSX.Element;
   submitButtonText?: string | React.ReactNode;
   buttonDisabled?: boolean;
+  ariaLabel?: string;
   clearInputAction?: () => void;
 }
 
@@ -40,6 +41,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       clearInputAction,
       className,
       type = "text",
+      ariaLabel,
       ...props
     },
     ref,
@@ -92,6 +94,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           )}
         >
           <input
+            aria-label={ariaLabel}
             id={id}
             type={showPassword ? "text" : type}
             placeholder={placeholder}