SUL23-614 SUL23-615: fixes for html validation

src/components/views/sul-branch-locations/filtering-table/branch-locations-filtering-table.tsx

@@ -63,7 +63,7 @@ const BranchLocationFilteringTable = ({items}: Props) => {
 
   return (
     <div className="pb-[32px]">
-      <form>
+      <form action="javascript:void(0);">
         <fieldset className="rs-mb-1 mx-auto flex h-25 w-fit items-center rounded-full">
           <legend className="sr-only">Filter by speciality</legend>
 
@@ -131,7 +131,7 @@ const TableRow = ({id, imageUrl, path, title, phone, email, mapUrl, address, hou
           href={path}
           className="m-auto mb-16 inline-block w-fit text-center text-[20px] font-semibold no-underline hover:bg-black-10 hover:text-brick-dark focus:bg-none focus:text-cardinal-red active:text-cardinal-red hocus:underline md:m-[unset] md:w-auto md:text-left"
         >
-          <h2 className="mb-0 font-sans text-20 font-semibold">{title}</h2>
+          <span className="mb-0 font-sans text-20 font-semibold">{title}</span>
         </Link>
       </Th>
       <Td className="branch-hours flex w-auto justify-center sm:border-b sm:border-black-40 md:items-center md:justify-start lg:table-cell lg:w-1/4 lg:pr-20 lg:align-middle xl:pr-80">

src/components/views/sul-people/sul-people-table-view.tsx

@@ -26,11 +26,9 @@ export type TablePerson = {
 
 type Props = {
   items: TablePerson[]
-  hasHeading: boolean
 }
 
-const SulPeopleTableView = ({items, hasHeading}: Props) => {
-  const HeadingElement = hasHeading ? "h2" : "h3"
+const SulPeopleTableView = ({items}: Props) => {
   const id = useId()
   const keywordRef = useRef<HTMLInputElement>(null)
 
@@ -59,6 +57,7 @@ const SulPeopleTableView = ({items, hasHeading}: Props) => {
       <form
         className="mx-auto mb-32 flex w-fit flex-wrap justify-center gap-30 lg:flex-nowrap"
         onSubmit={e => e.preventDefault()}
+        action="javascript:void(0);"
       >
         <div className="relative w-full md:w-[435px]">
           <label className="pl-15 text-18 font-semibold leading-[23px]" htmlFor={id}>
@@ -175,9 +174,9 @@ const SulPeopleTableView = ({items, hasHeading}: Props) => {
                       href={item.path}
                       className="mb-16 inline-block text-digital-blue no-underline hover:bg-black-10 hover:text-brick-dark focus:bg-none focus:text-cardinal-red active:text-cardinal-red hocus:underline"
                     >
-                      <HeadingElement className="mb-0 font-sans text-20 font-semibold" id={item.id}>
+                      <span className="mb-0 font-sans text-20 font-semibold" id={item.id}>
                         {item.title}
-                      </HeadingElement>
+                      </span>
                     </Link>
                   )}
                   {item.fullTitle && (

src/components/views/sul-study-place/filtering-table/study-place-filtering-table.tsx

@@ -105,7 +105,7 @@ const StudyPlaceFilteringTable = ({items}: Props) => {
 
   return (
     <div className="@container">
-      <form onSubmit={e => e.preventDefault()}>
+      <form onSubmit={e => e.preventDefault()} action="javascript:void(0);">
         <fieldset className="text-18">
           <legend className="sr-only">Filter places to study</legend>
           <div className="mb-30 flex w-full flex-wrap items-center justify-around gap-15 *:min-w-300 *:flex-1 *:3xl:min-w-0">
@@ -207,9 +207,9 @@ const StudyPlaceFilteringTable = ({items}: Props) => {
                   className="block w-auto pl-0 md:text-left lg:table-cell lg:w-1/5 lg:border-b lg:border-black-40 lg:pr-32"
                 >
                   <div className="pt-0 text-16 font-normal leading-[23px]">
-                    <h2 className="mb-[0px] font-sans text-20 font-semibold">
+                    <span className="mb-[0px] font-sans text-20 font-semibold">
                       {[item.donorName, item.studyType].filter(item => !!item).join(" ")}
-                    </h2>
+                    </span>
                     {item.roomNumber && <div className="type-0 relative">Room-{item.roomNumber}</div>}
                     {item.capacity && <div className="type-0 relative">{item.capacity}</div>}
                   </div>

src/components/views/view.tsx

@@ -113,7 +113,6 @@ const View = async ({viewId, displayId, items, totalItems, loadPage, hasHeading}
             email: item.suPersonEmail,
             libCalId: item.sulPersonLibcalId,
           }))}
-          hasHeading={hasHeading}
         />
       )
 
@@ -136,7 +135,6 @@ const View = async ({viewId, displayId, items, totalItems, loadPage, hasHeading}
             email: item.suPersonEmail,
             libCalId: item.sulPersonLibcalId,
           }))}
-          hasHeading={hasHeading}
         />
       )
   }