Enhancement: Accessibility issues on the Welcome page (usebruno#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 <[email protected]>

Author: Pragadesh-45

Diff for: 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,48 +62,77 @@ const Welcome = () => {
         />
       ) : null}
 
-      <div>
+      <div aria-hidden className="">
         <Bruno width={50} />
       </div>
       <div className="text-xl font-semibold select-none">bruno</div>
       <div className="mt-4">{t('WELCOME.ABOUT_BRUNO')}</div>
 
       <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>