From 12c99575b731980fe8d61603cceaad23ba86f730 Mon Sep 17 00:00:00 2001
From: Shrilakshmi Shastry <shrilakshmi.shastry@smallcase.com>
Date: Sat, 23 Mar 2024 10:41:52 +0530
Subject: [PATCH 1/3] 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

---
 .../bruno-app/src/components/Welcome/index.js | 40 ++++++++++++-------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/bruno-app/src/components/Welcome/index.js b/packages/bruno-app/src/components/Welcome/index.js
index 251d0a9fe3..071d08e9b1 100644
--- a/packages/bruno-app/src/components/Welcome/index.js
+++ b/packages/bruno-app/src/components/Welcome/index.js
@@ -50,7 +50,7 @@ const Welcome = () => {
         />
       ) : null}
 
-      <div className="">
+      <div aria-hidden className="">
         <Bruno width={50} />
       </div>
       <div className="text-xl font-semibold select-none">bruno</div>
@@ -58,41 +58,51 @@ const Welcome = () => {
 
       <div className="uppercase font-semibold heading mt-10">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)}>
+          <IconPlus aria-hidden size={18} strokeWidth={2} />
           <span className="label ml-2" id="create-collection">
             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}>
+          <IconFolders aria-hidden size={18} strokeWidth={2} />
           <span className="label ml-2">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)}>
+          <IconDownload aria-hidden size={18} strokeWidth={2} />
           <span className="label ml-2" id="import-collection">
             Import Collection
           </span>
-        </div>
+        </button>
       </div>
 
       <div className="uppercase font-semibold heading mt-10 pt-6">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"
+            className="inline-flex items-center"
+          >
+            <IconBook aria-hidden size={18} strokeWidth={2} />
             <span className="label ml-2">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} />
+            <IconSpeakerphone aria-hidden size={18} strokeWidth={2} />
             <span className="label ml-2">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="goto github"
+            target="_blank"
+            className="flex items-center"
+          >
+            <IconBrandGithub aria-hidden size={18} strokeWidth={2} />
             <span className="label ml-2">GitHub</span>
           </a>
         </div>

From befad7e3a38ac3baab7b74ff38a94b67a7ab3946 Mon Sep 17 00:00:00 2001
From: Pragadesh-45 <temporaryg7904@gmail.com>
Date: Mon, 23 Sep 2024 15:25:37 +0530
Subject: [PATCH 2/3] enhance: accessibility over the buttons on the welcome
 page

---
 .../bruno-app/src/components/Welcome/index.js | 33 ++++++++++++++-----
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/bruno-app/src/components/Welcome/index.js b/packages/bruno-app/src/components/Welcome/index.js
index 1a57e212e6..7e2c9584b6 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 }) => {
@@ -72,23 +70,34 @@ 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">
-        <button className="flex items-center" onClick={() => setCreateCollectionModalOpen(true)}>
+        <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>
         </button>
-        <button className="flex items-center ml-6" onClick={handleOpenCollection}>
+
+        <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">Open Collection</span>
         </button>
-        <button className="flex items-center ml-6" onClick={() => setImportCollectionModalOpen(true)}>
+
+        <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>
         </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">
@@ -96,6 +105,7 @@ const Welcome = () => {
             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} />
@@ -103,7 +113,13 @@ const Welcome = () => {
           </a>
         </div>
         <div className="flex items-center mt-2">
-          <a href="https://github.com/usebruno/bruno/issues" target="_blank" className="inline-flex items-center">
+          <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">Report Issues</span>
           </a>
@@ -111,8 +127,9 @@ const Welcome = () => {
         <div className="flex items-center mt-2">
           <a
             href="https://github.com/usebruno/bruno"
-            aria-label="goto github"
+            aria-label="Go to GitHub repository"
             target="_blank"
+            rel="noopener noreferrer"
             className="flex items-center"
           >
             <IconBrandGithub aria-hidden size={18} strokeWidth={2} />

From 8b82662cb8f32039b82478c91db976717c60e861 Mon Sep 17 00:00:00 2001
From: Pragadesh-45 <temporaryg7904@gmail.com>
Date: Mon, 23 Sep 2024 17:44:48 +0530
Subject: [PATCH 3/3] chore: fix translations

---
 packages/bruno-app/src/components/Welcome/index.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/bruno-app/src/components/Welcome/index.js b/packages/bruno-app/src/components/Welcome/index.js
index 7e2c9584b6..64100224c0 100644
--- a/packages/bruno-app/src/components/Welcome/index.js
+++ b/packages/bruno-app/src/components/Welcome/index.js
@@ -83,7 +83,7 @@ const Welcome = () => {
 
         <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">Open Collection</span>
+          <span className="label ml-2">{t('WELCOME.OPEN_COLLECTION')}</span>
         </button>
 
         <button
@@ -109,7 +109,7 @@ const Welcome = () => {
             className="inline-flex items-center"
           >
             <IconBook aria-hidden size={18} strokeWidth={2} />
-            <span className="label ml-2">Documentation</span>
+            <span className="label ml-2">{t('COMMON.DOCUMENTATION')}</span>
           </a>
         </div>
         <div className="flex items-center mt-2">
@@ -121,7 +121,7 @@ const Welcome = () => {
             className="inline-flex items-center"
           >
             <IconSpeakerphone aria-hidden size={18} strokeWidth={2} />
-            <span className="label ml-2">Report Issues</span>
+            <span className="label ml-2">{t('COMMON.REPORT_ISSUES')}</span>
           </a>
         </div>
         <div className="flex items-center mt-2">
@@ -133,7 +133,7 @@ const Welcome = () => {
             className="flex items-center"
           >
             <IconBrandGithub aria-hidden size={18} strokeWidth={2} />
-            <span className="label ml-2">GitHub</span>
+            <span className="label ml-2">{t('COMMON.GITHUB')}</span>
           </a>
         </div>
       </div>