Merge pull request #29 from Viet-Vibe-Foundation/accessibility-function

Accessibility function
Viet-Vibe-Foundation · Jan 20, 2025 · 09c7ee0 · 09c7ee0
2 parents 1c27b39 + 3cc665c
commit 09c7ee0
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 37 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"],
+  "extends": ["next/core-web-vitals", "next/typescript", "plugin:jsx-a11y/recommended"],
   "rules": {
     "@typescript-eslint/ban-ts-comment": [
       "error",

diff --git a/app/[locale]/(Home)/_components/contact.tsx b/app/[locale]/(Home)/_components/contact.tsx
@@ -8,10 +8,6 @@ const Contact = () => {
   // @ts-ignore: useTranslation will always throw an error for typescript
   const { t } = useTranslation()
 
-  const handleClick = () => {
-    window.location.href = 'https://www.instagram.com/vietvibe.foundation'
-  }
-
   return (
     <div className="h-[50vh] w-full bg-[#1B171A]/50">
       <div className="flex h-full w-full flex-col items-center justify-center gap-y-14 lg:gap-y-20">
@@ -20,19 +16,20 @@ const Contact = () => {
             {t('getInTouch-contact')}
           </h2>
         </div>
-        <button
+        <a
+          href="https://www.instagram.com/vietvibe.foundation"
+          target="_blank"
+          rel="noopener noreferrer"
           className="inline-flex items-center rounded-md border-b-2 border-[#EFB9A2] bg-[#1B171A] px-14 py-6 font-bold tracking-wide shadow-md hover:border-[#EFB9A2]/80 hover:bg-[#1B171A]/90 hover:text-white"
-          onClick={handleClick}
         >
-          <a className="mx-auto flex items-center gap-x-4 text-[#EFB9A2]">
+          <span className="mx-auto flex items-center gap-x-4 text-[#EFB9A2]">
             {t('chat-contact')}
-
             <Contact2 className="h-7 w-7" />
-          </a>
-        </button>
+          </span>
+        </a>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Contact
+export default Contact;
diff --git a/app/[locale]/(Home)/_components/header.tsx b/app/[locale]/(Home)/_components/header.tsx
@@ -12,22 +12,28 @@ import React from 'react'
 
 const Header = () => {
   const { toast } = useToast()
+
+  const handleClick = (text: string) => {
+    navigator.clipboard.writeText(text);
+    toast({
+      title: 'Copied to clipboard',
+    });
+  };
+
   return (
     <div className="flex h-[60px] w-full flex-col items-center gap-x-10 bg-[#620BC4] px-8 text-slate-300 sm:flex-row">
       <TooltipProvider>
         <Tooltip>
-          <TooltipTrigger>
-            <div
-              className="group flex items-center gap-x-2 hover:text-[#EFB9A2]"
-              onClick={() => {
-                navigator.clipboard.writeText('+1 (778) 583-7088')
-                toast({
-                  title: 'Copied to clipboard',
-                })
-              }}
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              className="group flex items-center gap-x-2 hover:text-[#EFB9A2] focus:outline-none focus:ring-2 focus:ring-[#EFB9A2] focus:ring-offset-2 rounded-md p-1"
+              onClick={() => handleClick("+1 (778) 583-7088")}
+              aria-label="Copy phone number to clipboard"
             >
-              <Phone className="h-5 w-5" /> <span>+1 (778) 583-7088</span>
-            </div>
+              <Phone className="h-5 w-5" />
+              <span>{"+1 (778) 583-7088"}</span>
+            </button>
           </TooltipTrigger>
           <TooltipContent className="bg-[#1B171A]">
             <p className="flex gap-x-2 text-sm text-[#EFB9A2]">
@@ -40,18 +46,15 @@ const Header = () => {
 
       <TooltipProvider>
         <Tooltip>
-          <TooltipTrigger>
-            <div
-              className="group flex items-center gap-x-2 hover:text-[#EFB9A2]"
-              onClick={() => {
-                navigator.clipboard.writeText('admingoogle@vietvibe.org')
-                toast({
-                  title: 'Copied to clipboard',
-                })
-              }}
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              className="group flex items-center gap-x-2 hover:text-[#EFB9A2] focus:outline-none focus:ring-2 focus:ring-[#EFB9A2] focus:ring-offset-2 rounded-md p-1"
+              onClick={() => handleClick("admingoogle@vietvibe.org")}
+              aria-label="Copy email address to clipboard"
             >
               <Mail className="h-5 w-5" /> <span>media@vietvibe.org</span>
-            </div>
+            </button>
           </TooltipTrigger>
           <TooltipContent className="bg-[#1B171A]">
             <p className="flex gap-x-2 text-sm text-[#EFB9A2]">

diff --git a/app/[locale]/(Home)/_components/imageCarousel.tsx b/app/[locale]/(Home)/_components/imageCarousel.tsx
@@ -72,13 +72,13 @@ const ImageCarousel = ({
         ))}
       </div>
       <div className="absolute inset-0 z-20 flex h-full max-w-[100vw] items-center justify-between px-4">
-        <button>
+        <button aria-label="prev-image">
           <ArrowLeft
             className="h-11 w-11 rounded-full bg-[#1B171A] p-2 text-[#EFB9A2] transition-all hover:bg-[#EFB9A2] hover:text-[#620BC4]"
             onClick={() => changeImage('left')}
           />
         </button>
-        <button>
+        <button aria-label="next-image">
           <ArrowRight
             className="h-11 w-11 rounded-full bg-[#1B171A] p-2 text-[#EFB9A2] transition-all hover:bg-[#EFB9A2] hover:text-[#620BC4]"
             onClick={() => changeImage('right')}