feat: improving accessibility by using semantic tags and aria-related props

src/components/BurgerMenu/BurgerMenu.tsx

@@ -35,10 +35,10 @@ const BurgerMenu = () => {
   return (
     <Sheet>
       <SheetTrigger>
-        <Menu color="white" className="ml-2 mr-2" />
+        <Menu color="white" className="ml-2 mr-2" aria-label="Expandir menu lateral"/>
       </SheetTrigger>
       <SheetContent side="left" className="pt-[96px] flex flex-col">
-        <div className="flex flex-col gap-4">
+        <nav className="flex flex-col gap-4">
           {session && (
             <Fragment>
               <div className="inline-flex items-center text-semibold">
@@ -94,7 +94,7 @@ const BurgerMenu = () => {
               ))}
             </Fragment>
           )}
-        </div>
+        </nav>
         {session && (
           <div className="mt-auto">
             <span

src/components/CardAboutShelter/components/InfoRow/InfoRow.tsx

@@ -23,7 +23,7 @@ const InfoRow = React.forwardRef<HTMLDivElement, IInfoRowProps>(
         {value}
       </a>
     ) : (
-      <h1 className="font-semibold">{value}</h1>
+      <strong className="font-semibold">{value}</strong>
     );
 
     return (

src/components/Header/Header.tsx

@@ -14,7 +14,7 @@ const Header = React.forwardRef<HTMLDivElement, IHeader>((props, ref) => {
   } = props;
 
   return (
-    <div
+    <header
       ref={ref}
       className={cn(
         'bg-red-600 flex h-[56px] justify-between items-center text-white p-3 gap-2 w-full z-[60]',
@@ -31,7 +31,7 @@ const Header = React.forwardRef<HTMLDivElement, IHeader>((props, ref) => {
       <div className="flex items-center">
         <div className="cursor-pointer ">{endAdornment}</div>
       </div>
-    </div>
+    </header>
   );
 });
 

src/components/ui/sheet.tsx

@@ -64,7 +64,7 @@ const SheetContent = React.forwardRef<
     >
       {children}
       <SheetPrimitive.Close className="absolute right-3 mt-[-30px] rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-6 w-6" />
+        <X className="h-6 w-6" aria-label='Fechar menu lateral' tabIndex={0}/>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
   </SheetPortal>

src/components/ui/toast.tsx

@@ -13,6 +13,7 @@ const ToastViewport = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Viewport
     ref={ref}
+    label="Notificações estarão acessíveis através da tecla {hotkey}"
     className={cn(
       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
       className

src/pages/AboutUs/AboutUs.tsx

@@ -31,7 +31,7 @@ const AboutUs = () => {
   return (
     <div className="flex flex-col h-screen items-center">
       <Header title="SOS Rio Grande do Sul" startAdornment={<BurgerMenu />} />
-      <div className="flex flex-col gap-4 p-4 max-w-4xl pb-8 w-full">
+      <main className="flex flex-col gap-4 p-4 max-w-4xl pb-8 w-full">
         <h2 className="text-4xl pt-4 font-semibold !text-zinc-900">
           Sobre nós
         </h2>
@@ -160,7 +160,7 @@ const AboutUs = () => {
             ))
           )}
         </div>
-      </div>
+      </main>
       <div className="bg-black [&>p]:text-white p-8 w-full flex justify-center mt-4">
         <p className="text-justify text-md md:text-lg">
           Agradecemos a todos que têm tornado este impacto possível! Vamos

src/pages/Home/Home.tsx

@@ -106,6 +106,7 @@ const Home = () => {
               loading={loading}
               variant="ghost"
               size="sm"
+              aria-label='Atualizar lista de abrigos'
               onClick={() => refresh()}
               className="disabled:bg-red-500 hover:bg-red-400"
             >

src/pages/Home/components/Filter/Filter.tsx

@@ -159,6 +159,7 @@ const Filter = (props: IFilterProps) => {
           <div className="pl-4 pr-4 pb-4 flex flex-col max-w-5xl w-full items-start">
             <div className="flex flex-col gap-2 w-full my-4">
               <SearchInput
+              aria-placeholder='Buscar por abrigo ou endereço'
                 value={values.search}
                 onChange={(ev) =>
                   setFieldValue('search', ev.target.value ?? '')

src/pages/Home/components/ShelterListItem/ShelterListItem.tsx

@@ -67,9 +67,10 @@ const ShelterListItem = (props: IShelterListItemProps) => {
     ? format(data.updatedAt, 'dd/MM/yyyy HH:mm')
     : '(sem informação)';
 
+
   return (
     <Wrapper link={`/abrigo/${data.id}`} active={data.actived}>
-      <div className="flex flex-col p-4 w-full border-2 border-border rounded-md gap-1 relative hover:bg-accent">
+      <div role='listitem' className="flex flex-col p-4 w-full border-2 border-border rounded-md gap-1 relative hover:bg-accent">
         <div className="inline-flex justify-between">
           <div className="flex flex-row items-center gap-1">
             <h3 className="font-semibold text-lg h-full hover:cursor-pointer hover:text-slate-500">
@@ -82,7 +83,7 @@ const ShelterListItem = (props: IShelterListItemProps) => {
             )}
           </div>
           {data.actived && (
-            <Button size="sm" variant="ghost">
+            <Button size="sm" variant="ghost" tabIndex={-1}>
               <ChevronRight className="h-5 w-5" />
             </Button>
           )}
@@ -92,6 +93,7 @@ const ShelterListItem = (props: IShelterListItemProps) => {
         </h6>
         <h6 className="text-muted-foreground text-sm md:text-lg font-medium">
           {data.address}
+
         </h6>
         {data.shelterSupplies.length > 0 && (
           <>

src/pages/Home/components/ShelterListView/ShelterListView.tsx

@@ -71,6 +71,7 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
             size="sm"
             className="flex gap-2 items-center text-blue-500 hover:text-blue-600 active:text-blue-700"
             onClick={onOpenModal}
+            aria-label='Filtrar abrigos'
           >
             <ListFilter className="h-5 w-5 stroke-blue-500" />
             Filtros
@@ -87,7 +88,7 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
             </Button>
           )}
         </div>
-        <main ref={ref} className="flex flex-col gap-4" {...rest}>
+        <main role='list' ref={ref} className="flex flex-col gap-4" {...rest}>
           {loading ? (
             <LoadingSkeleton amountItems={4} />
           ) : data.length === 0 ? (

src/pages/Home/components/ShelterSupplyCategoryRow/ShelterSupplyCategoryRow.tsx

@@ -14,15 +14,15 @@ const ShelterSupplyCategoryRow = React.forwardRef<
   if (tags.length === 0) return <Fragment />;
 
   return (
-    <div className={cn('flex flex-col gap-3', className)} ref={ref} {...rest}>
+    <div role='list' className={cn('flex flex-col gap-3', className)} ref={ref} {...rest}>
       <Separator className="mt-2" />
       <p className="text-muted-foreground text-sm md:text-lg font-medium">
         {title}
       </p>
       {description && <p>{description}</p>}
       <div className="flex gap-2 flex-wrap">
         {tags.map((s, idx) => (
-          <Chip key={idx} {...s} />
+          <Chip role='listitem'  key={idx} {...s} />
         ))}
       </div>
     </div>

src/pages/Shelter/Shelter.tsx

@@ -101,6 +101,7 @@ const Shelter = () => {
             size="sm"
             variant="ghost"
             className="[&_svg]:stroke-white disabled:bg-red-500 hover:bg-red-400"
+            aria-label='Voltar ao início'
             onClick={() => navigate('/')}
           >
             <ChevronLeft size={20} />
@@ -132,9 +133,9 @@ const Shelter = () => {
             </Button>
           </Authenticated>
         </div>
-        <div className="p-4">
+        <main className="p-4">
           <CardAboutShelter shelter={shelter} />
-        </div>
+        </main>
         <div className="flex justify-between p-4 items-center">
           <h1 className="font-semibold text-[18px]">Itens do abrigo</h1>
           <div className="flex gap-2 items-center ">