feat/127-add-alt (#132)

* feat: add action hover tip on each button * fix: use a single alt attribute --------- Co-authored-by: Victor Wildner <[email protected]>
iaurg · Nov 30, 2023 · c9ff948 · c9ff948
1 parent e7593b2
commit c9ff948
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 5 deletions.
diff --git a/frontend/src/app/(private)/game/play/page.tsx b/frontend/src/app/(private)/game/play/page.tsx
@@ -128,18 +128,22 @@ export default function PlayPage() {
           <button
             className="w-4 h-4 sm:w-8 sm:h-8 rounded-full bg-purple42-400 hover:bg-purple42-500"
             onClick={() => setGameLayout("default")}
+            title="Trocar tema"
           />
           <button
             className="w-4 h-4 sm:w-8 sm:h-8 rounded-full bg-yellow-400 hover:bg-yellow-500"
             onClick={() => setGameLayout("sunlight")}
+            title="Trocar tema"
           />
           <button
             className="w-4 h-4 sm:w-8 sm:h-8 rounded-full bg-blue-400 hover:bg-blue-500"
             onClick={() => setGameLayout("moonlight")}
+            title="Trocar tema"
           />
           <button
             className="w-4 h-4 sm:w-8 sm:h-8 rounded-full bg-gray-800 hover:bg-gray-900"
             onClick={() => setGameLayout("dark")}
+            title="Trocar tema"
           />
         </div>
         <div

diff --git a/frontend/src/components/Chat/ChannelCard.tsx b/frontend/src/components/Chat/ChannelCard.tsx
@@ -24,7 +24,11 @@ export default function ChannelCard({ chat }: ChannelCardProps) {
   return (
     <div className="bg-black42-200 flex justify-between rounded-lg items-center p-3 my-1">
       <div className="flex space-x-2 items-center">
-        <span className="cursor-pointer" onClick={() => handleOpenChannel()}>
+        <span
+          className="cursor-pointer"
+          onClick={() => handleOpenChannel()}
+          title="Acessar chat"
+        >
           {chat.name}
         </span>
         <div className="flex ml-1 space-x-1">
@@ -38,15 +42,15 @@ export default function ChannelCard({ chat }: ChannelCardProps) {
           <TrashSimple
             className="text-red-400 cursor-pointer"
             size={18}
-            alt="Delete channel"
             onClick={() => handleDeleteChannel()}
+            alt="Deletar chat"
           />
         )}
         <ArrowRight
           className="text-purple42-200 cursor-pointer"
           size={18}
-          alt="Open channel"
           onClick={() => handleOpenChannel()}
+          alt="Acessar chat"
         />
       </div>
     </div>

diff --git a/frontend/src/components/Chat/ListChannels.tsx b/frontend/src/components/Chat/ListChannels.tsx
@@ -25,6 +25,7 @@ export function ListChannels({ handleShowCreateChannel }: ListChannelsProps) {
                     flex items-center justify-center w-9 h-9 p-2 cursor-pointer"
           size={14}
           onClick={handleShowCreateChannel}
+          alt="Criar novo canal"
         />
       </div>
       {isLoading ? (

diff --git a/frontend/src/components/Chat/index.tsx b/frontend/src/components/Chat/index.tsx
@@ -39,12 +39,14 @@ export default function Chat() {
           color="white"
           onClick={() => setShowElement("showChannels")}
           className="cursor-pointer"
+          alt="Canais"
         />
         <Users
           size={25}
           color="white"
           onClick={() => setShowElement("showFriends")}
           className="cursor-pointer"
+          alt="Amigos"
         />
       </div>
     </div>

diff --git a/frontend/src/components/EditUserModal/index.tsx b/frontend/src/components/EditUserModal/index.tsx
@@ -76,6 +76,7 @@ export default function EditUserModal() {
         className="cursor-pointer"
         color="white"
         size={24}
+        alt="Editar perfil"
       />
 
       <Transition appear show={isOpen} as={Fragment}>

diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
@@ -14,20 +14,23 @@ export default function Header() {
           href="/game/play"
           className="text-white font-bold  rounded-full transition-all hover:bg-purple42-200
                 flex items-center justify-center w-12 h-12"
+          title="Iniciar um jogo"
         >
           <Play color="white" size={32} />
         </Link>
         <Link
           href="/game"
           className="text-white font-bold  rounded-full transition-all hover:bg-purple42-200
                 flex items-center justify-center w-12 h-12"
+          title="Ver ranking"
         >
           <Trophy color="white" size={32} />
         </Link>
         <Link
           href="/"
           className="text-white font-bold  rounded-full transition-all hover:bg-purple42-200
                 flex items-center justify-center w-12 h-12"
+          title="Sair"
         >
           <SignOut color="white" size={32} />
         </Link>

diff --git a/frontend/src/components/LeaderBoardCard/index.tsx b/frontend/src/components/LeaderBoardCard/index.tsx
@@ -32,7 +32,11 @@ export function LeaderBoardCard({
         </div>
         <div>
           {isFriend && (
-            <UserPlus className="text-purple42-200 cursor-pointer" size={24} />
+            <UserPlus
+              className="text-purple42-200 cursor-pointer"
+              size={24}
+              alt="Adicionar amigo"
+            />
           )}
         </div>
       </div>

diff --git a/frontend/src/components/MFAModal/index.tsx b/frontend/src/components/MFAModal/index.tsx
@@ -34,6 +34,7 @@ export default function MFAModal() {
         className="cursor-pointer"
         color="white"
         size={24}
+        alt="Autenticação de dois fatores"
       />
 
       <Transition appear show={isOpen} as={Fragment}>

diff --git a/frontend/src/components/ProfilePopOver/index.tsx b/frontend/src/components/ProfilePopOver/index.tsx
@@ -47,7 +47,7 @@ export default function ProfilePopOver({
   };
 
   return (
-    <Popover className="relative">
+    <Popover className="relative" title="Ver perfil">
       <Popover.Button ref={setReferenceElement} className="outline-none">
         {children}
       </Popover.Button>