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/components/ui/with-tooltip.tsx

@@ -4,19 +4,23 @@ import { useState, ReactNode } from 'react';
 interface WithTooltipProps {
   children: ReactNode;
   content: string;
+  /**
+   * Se deverá utilizar `content` como "aria-label" (default: true)
+   */
+  isAccessible?: boolean
 }
 
-const WithTooltip = ({ children, content }: WithTooltipProps) => {
+const WithTooltip = ({ children, content, isAccessible = true }: WithTooltipProps) => {
   const [open, setOpen] = useState(false);
 
   return (
     <Tooltip.Provider>
       <Tooltip.Root open={open} onOpenChange={setOpen}>
-        <Tooltip.Trigger asChild onClick={() => setOpen(!open)}>
+        <Tooltip.Trigger asChild onClick={() => setOpen(!open)} {...isAccessible && { "aria-label":content }} >
           {children}
         </Tooltip.Trigger>
         <Tooltip.Portal>
-          <Tooltip.Content className="text-white bg-gray-950 data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[4px] px-[15px] py-[10px] text-[12px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]">
+          <Tooltip.Content  className="text-white bg-gray-950 data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[4px] px-[15px] py-[10px] text-[12px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]">
             {content}
           </Tooltip.Content>
         </Tooltip.Portal>

src/pages/AboutUs/AboutUs.tsx

@@ -31,16 +31,16 @@ 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">
-        <h2 className="text-4xl pt-4 font-semibold !text-zinc-900">
+      <main className="flex flex-col gap-4 p-4 max-w-4xl pb-8 w-full">
+        <h1 className="text-4xl pt-4 font-semibold !text-zinc-900">
           Sobre nós
-        </h2>
-        <h4 className="text-lg text-muted-foreground font-medium">
+        </h1>
+        <small className="text-lg text-muted-foreground font-medium">
           Conheça a história do projeto SOS RS
-        </h4>
-        <h3 className="text-2xl font-medium text-muted-foreground mt-8">
+        </small>
+        <h2 className="text-2xl font-medium text-muted-foreground mt-8">
           Como tudo começou
-        </h3>
+        </h2>
         <p className="text-justify text-md md:text-lg font-medium [&>a]:text-blue-500 [&>a]:hover:text-blue-600 [&>a]:active:text-blue-700">
           Iniciado no domingo (04/05) e concluído na segunda (05/05), após 18
           horas seguidas de desenvolvimento, nosso webapp <b>SOS RS 🛟</b>,
@@ -94,9 +94,9 @@ const AboutUs = () => {
           nosso projeto alcançou <b>400 estrelas no GitHub</b> e foi{' '}
           <b>forkeado mais de 150 vezes!</b>
         </p>
-        <h3 className="text-2xl font-medium text-muted-foreground mt-8">
+        <h2 className="text-2xl font-medium text-muted-foreground mt-8">
           Nossos parceiros
-        </h3>
+        </h2>
         <p className="text-justify font-medium text-md md:text-lg">
           Formamos parcerias sólidas com mais de 1400 voluntários, fortalecendo
           ainda mais nossa missão. Hoje, comemoramos números que falam por si.
@@ -141,9 +141,9 @@ const AboutUs = () => {
           O grupo de voluntários do SOS RS já soma mais de 2100 pessoas e cerca
           de 126 mil horas de trabalho desde a criação da iniciativa.
         </p>
-        <h3 className="text-2xl font-medium text-muted-foreground mt-4">
+        <h2 className="text-2xl font-medium text-muted-foreground mt-4">
           Contribuidores da plataforma ({contributors.length})
-        </h3>
+        </h2>
         <div className="flex flex-wrap gap-2">
           {loading ? (
             <Loader className="w-5 h-5 animate-spin" />
@@ -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/PrivacyPolicy/PrivacyPolicy.tsx

@@ -5,9 +5,9 @@ const PrivacyPolicy = () => {
     <div className="flex flex-col h-screen items-center">
       <Header title="SOS Rio Grande do Sul" startAdornment={<BurgerMenu />} />
       <div className="w-full flex flex-col gap-4 p-4 max-w-4xl [&_*]:text-zinc-500 pb-8">
-        <h3 className="text-4xl pt-4 font-bold !text-zinc-900">
+        <h1 className="text-4xl pt-4 font-bold !text-zinc-900">
           Política de privacidade
-        </h3>
+        </h1>
         <p className="text-justify text-md">
           Ao entrar para o <b>SOS RS 🛟</b>, você nos confia uma série de
           informações. E nós cuidamos e protegemos essas informações, para você.
@@ -38,29 +38,29 @@ const PrivacyPolicy = () => {
           legislações vigentes no Brasil, especialmente, a Resolução{' '}
           <b>CFM Nº 2299 DE 30/09/2021</b>.
         </p>
-        <h5 className="text-2xl pt-4 font-bold !text-zinc-900">
+        <h2 className="text-2xl pt-4 font-bold !text-zinc-900">
           Coleta de informações
-        </h5>
+        </h2>
         <p className="text-justify text-md">
           Coletamos apenas informações imprescindíveis para desempenhar nosso
           propósito. As informações coletadas e como essas informações são
           utilizadas dependem de como e do quanto você utiliza o <b>SOS RS 🛟</b>
           . Armazenamos as informações que coletamos.
         </p>
-        <h5 className="text-2xl pt-4 font-bold !text-zinc-900">
+        <h2 className="text-2xl pt-4 font-bold !text-zinc-900">
           Itens que você cria ou nos fornece
-        </h5>
+        </h2>
         <p className="text-justify text-md">
           Ao cadastrar um abrigo, você nos fornece, inicialmente, informações
           pessoais, como seu nome e CPF. Ao alimentar nosso aplicativo, você
           fornece dados sobre os abrigos, os quais você, usuário, se
           responsabiliza integralmente, e que também são fornecidos para a
           comunidade, após alimentação, e podem ser armazenados pelo SOS-RS.
         </p>
-        <h5 className="text-2xl pt-4 font-bold !text-zinc-900">
+        <h2 className="text-2xl pt-4 font-bold !text-zinc-900">
           Informações que coletamos automaticamente quando você utiliza nossos
           serviços
-        </h5>
+        </h2>
         <p className="text-justify text-md">
           Utilizamos apenas cookies temporários, com ID de sessão do servidor e
           dados de localização, quando autorizados, para otimizar sua
@@ -69,32 +69,32 @@ const PrivacyPolicy = () => {
           não funcionar corretamente, se a sua capacidade de aceitar cookies
           estiver desabilitada.
         </p>
-        <h5 className="text-2xl pt-4 font-bold !text-zinc-900">
+        <h2 className="text-2xl pt-4 font-bold !text-zinc-900">
           Por que o SOS RS coleta dados
-        </h5>
+        </h2>
         <p className="text-justify text-md">
           Usamos as informações coletadas para auxiliar a fornecer, manter e
           melhorar a logística de suprimentos e disponibilidade em abrigos.
           Também para:
         </p>
-        <h5 className="text-2xl pt-4 font-bold !text-zinc-900">
+        <h2 className="text-2xl pt-4 font-bold !text-zinc-900">
           Entrar em contato com você
-        </h5>
+        </h2>
         <p className="text-justify text-md">
           Se você for um abrigo, usamos as informações que coletamos para
           interagir diretamente com você.
         </p>
-        <h5 className="text-2xl pt-4 font-bold !text-zinc-900">
+        <h2 className="text-2xl pt-4 font-bold !text-zinc-900">
           Compartilhamento de suas informações
-        </h5>
+        </h2>
         <p className="text-justify text-md">
           Podemos compartilhar os dados com a comunidade e outras soluções do
           mesmo grupo e segmento, para cumprimento do nosso propósito e outros
           fins que julgarmos pertinente.
         </p>
-        <h5 className="text-2xl pt-4 font-bold !text-zinc-900">
+        <h2 className="text-2xl pt-4 font-bold !text-zinc-900">
           Por motivos legais
-        </h5>
+        </h2>
         <p className="text-justify text-md">
           Talvez precisemos compartilhar informações pessoais suas para fora do
           SOS, se isso for absolutamente necessário para cumprir a lei ou
@@ -106,9 +106,9 @@ const PrivacyPolicy = () => {
           os afetados antes que as informações sejam transferidas ou submetidas
           a uma política de privacidade diferente.
         </p>
-        <h5 className="text-2xl pt-4 font-bold !text-zinc-900">
+        <h2 className="text-2xl pt-4 font-bold !text-zinc-900">
           Mantemos suas informações seguras
-        </h5>
+        </h2>
         <p className="text-justify text-md">
           Possuímos segurança que protege continuamente suas informações, o que
           inclui:
@@ -126,16 +126,16 @@ const PrivacyPolicy = () => {
             confidencialidade para os que possuem acesso total aos dados.
           </li>
         </ul>
-        <h5 className="text-2xl pt-4 font-bold !text-zinc-900">
+        <h2 className="text-2xl pt-4 font-bold !text-zinc-900">
           Exportar e excluir informações
-        </h5>
+        </h2>
         <p className="text-justify text-md">
           Nossos desenvolvedores permitem solicitar a exclusão dos seus dados
           pessoais, enviando um e-mail para <b>[email protected]</b>.
         </p>
-        <h5 className="text-2xl pt-4 font-bold !text-zinc-900">
+        <h2 className="text-2xl pt-4 font-bold !text-zinc-900">
           Retenção de suas informações e compliance
-        </h5>
+        </h2>
         <p className="text-justify text-md">
           Reteremos suas informações por quanto tempo for necessário para
           satisfazer as finalidades para as quais elas foram coletadas ou para
@@ -151,25 +151,25 @@ const PrivacyPolicy = () => {
           cópias são definitivamente excluídas dos nossos sistemas ativos e de
           backup.
         </p>
-        <h5 className="text-2xl pt-4 font-bold !text-zinc-900">
+        <h2 className="text-2xl pt-4 font-bold !text-zinc-900">
           Você pode, a qualquer momento:
-        </h5>
+        </h2>
         <p className="text-justify text-md">
           Atualizar, inativar e corrigir, remover e solicitar acesso às suas
           informações.
         </p>
-        <h5 className="text-2xl pt-4 font-bold !text-zinc-900">
+        <h2 className="text-2xl pt-4 font-bold !text-zinc-900">
           Dados de contato
-        </h5>
+        </h2>
         <p className="text-justify text-md">
           Entre em contato conosco em caso de dúvidas, pelo e-mail{' '}
           <b>[email protected]</b>. Você também pode travar contato com a
           autoridade local de proteção de dados, se possuir dúvidas sobre seus
           direitos de acordo com a legislação brasileira.
         </p>
-        <h5 className="text-2xl pt-4 font-bold !text-zinc-900">
+        <h2 className="text-2xl pt-4 font-bold !text-zinc-900">
           Quando esta política se aplica e alterações
-        </h5>
+        </h2>
         <p className="text-justify text-md">
           Esta Política de Privacidade se aplica ao <b>SOS RS 🛟</b>. Nos
           reservamos ao direito de alterar este documento periodicamente, porém