From 4ef5534d41ba030e8b34e5d20996414261cb957a Mon Sep 17 00:00:00 2001
From: Pragadesh-45 <54320162+Pragadesh-45@users.noreply.github.com>
Date: Mon, 23 Sep 2024 17:54:24 +0530
Subject: [PATCH] Enhancement: Accessibility issues on the Welcome page (#3173)

* fix: accessibility issue in Welcome page
  - use button tag for collection instead of div
  - hide decorative image for assistive technology
  - give meaningful label to links in Links section

* enhance: accessibility over the buttons on the welcome page

* chore: fix translations

---------

Co-authored-by: Shrilakshmi Shastry <shrilakshmi.shastry@smallcase.com>
---
 .../bruno-app/src/components/Welcome/index.js | 65 +++++++++++++------
 1 file changed, 46 insertions(+), 19 deletions(-)

diff --git a/packages/bruno-app/src/components/Welcome/index.js b/packages/bruno-app/src/components/Welcome/index.js
index 0ec4c1245..64100224c 100644
--- a/packages/bruno-app/src/components/Welcome/index.js
+++ b/packages/bruno-app/src/components/Welcome/index.js
@@ -21,9 +21,7 @@ const Welcome = () => {
   const [importCollectionLocationModalOpen, setImportCollectionLocationModalOpen] = useState(false);
 
   const handleOpenCollection = () => {
-    dispatch(openCollection()).catch(
-      (err) => console.log(err) && toast.error(t('WELCOME.COLLECTION_OPEN_ERROR'))
-    );
+    dispatch(openCollection()).catch((err) => console.log(err) && toast.error(t('WELCOME.COLLECTION_OPEN_ERROR')));
   };
 
   const handleImportCollection = ({ collection, translationLog }) => {
@@ -64,7 +62,7 @@ const Welcome = () => {
         />
       ) : null}
 
-      <div>
+      <div aria-hidden className="">
         <Bruno width={50} />
       </div>
       <div className="text-xl font-semibold select-none">bruno</div>
@@ -72,40 +70,69 @@ const Welcome = () => {
 
       <div className="uppercase font-semibold heading mt-10">{t('COMMON.COLLECTIONS')}</div>
       <div className="mt-4 flex items-center collection-options select-none">
-        <div className="flex items-center" onClick={() => setCreateCollectionModalOpen(true)}>
-          <IconPlus size={18} strokeWidth={2} />
+        <button
+          className="flex items-center"
+          onClick={() => setCreateCollectionModalOpen(true)}
+          aria-label={t('WELCOME.CREATE_COLLECTION')}
+        >
+          <IconPlus aria-hidden size={18} strokeWidth={2} />
           <span className="label ml-2" id="create-collection">
             {t('WELCOME.CREATE_COLLECTION')}
           </span>
-        </div>
-        <div className="flex items-center ml-6" onClick={handleOpenCollection}>
-          <IconFolders size={18} strokeWidth={2} />
+        </button>
+
+        <button className="flex items-center ml-6" onClick={handleOpenCollection} aria-label="Open Collection">
+          <IconFolders aria-hidden size={18} strokeWidth={2} />
           <span className="label ml-2">{t('WELCOME.OPEN_COLLECTION')}</span>
-        </div>
-        <div className="flex items-center ml-6" onClick={() => setImportCollectionModalOpen(true)}>
-          <IconDownload size={18} strokeWidth={2} />
+        </button>
+
+        <button
+          className="flex items-center ml-6"
+          onClick={() => setImportCollectionModalOpen(true)}
+          aria-label={t('WELCOME.IMPORT_COLLECTION')}
+        >
+          <IconDownload aria-hidden size={18} strokeWidth={2} />
           <span className="label ml-2" id="import-collection">
             {t('WELCOME.IMPORT_COLLECTION')}
           </span>
-        </div>
+        </button>
       </div>
+
       <div className="uppercase font-semibold heading mt-10 pt-6">{t('WELCOME.LINKS')}</div>
       <div className="mt-4 flex flex-col collection-options select-none">
         <div className="flex items-center mt-2">
-          <a href="https://docs.usebruno.com" target="_blank" className="inline-flex items-center">
-            <IconBook size={18} strokeWidth={2} />
+          <a
+            href="https://docs.usebruno.com"
+            aria-label="Read documentation"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center"
+          >
+            <IconBook aria-hidden size={18} strokeWidth={2} />
             <span className="label ml-2">{t('COMMON.DOCUMENTATION')}</span>
           </a>
         </div>
         <div className="flex items-center mt-2">
-          <a href="https://github.com/usebruno/bruno/issues" target="_blank" className="inline-flex items-center">
-            <IconSpeakerphone size={18} strokeWidth={2} />
+          <a
+            href="https://github.com/usebruno/bruno/issues"
+            aria-label="Report issues on GitHub"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center"
+          >
+            <IconSpeakerphone aria-hidden size={18} strokeWidth={2} />
             <span className="label ml-2">{t('COMMON.REPORT_ISSUES')}</span>
           </a>
         </div>
         <div className="flex items-center mt-2">
-          <a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-center">
-            <IconBrandGithub size={18} strokeWidth={2} />
+          <a
+            href="https://github.com/usebruno/bruno"
+            aria-label="Go to GitHub repository"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center"
+          >
+            <IconBrandGithub aria-hidden size={18} strokeWidth={2} />
             <span className="label ml-2">{t('COMMON.GITHUB')}</span>
           </a>
         </div>