From 03ceb2977f6ef925465c9a5037b07d38ea3d231b Mon Sep 17 00:00:00 2001
From: Steve <steven_ts@hotmail.com>
Date: Thu, 21 Oct 2021 15:56:08 -0600
Subject: [PATCH] Code cleanups as per feedback

---
 .../js/components/pulse-profile/pulse-profile.jsx  | 14 ++++++++------
 .../tabbed-profile-directory/loading-spinner.jsx   |  9 +++++++--
 .../tabbed-profile-directory/locale-strings.jsx    | 12 ++++++++++++
 .../subfilter-dropdown.jsx                         |  5 ++++-
 4 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/source/js/components/pulse-profile/pulse-profile.jsx b/source/js/components/pulse-profile/pulse-profile.jsx
index 12618797ef1..70e752dcc33 100644
--- a/source/js/components/pulse-profile/pulse-profile.jsx
+++ b/source/js/components/pulse-profile/pulse-profile.jsx
@@ -1,8 +1,9 @@
 import React from "react";
 
 const PulseProfile = ({ profile }) => {
+  const profileUrl = "https://www.mozillapulse.org/profile/";
   return (
-    <div className="tw-grid tw-grid-cols-4  tw-gap-x-3 tw-gap-y-2 tw-border-t tw-border-black">
+    <div className="tw-grid tw-grid-cols-4 tw-gap-x-3 tw-gap-y-2 tw-border-t tw-border-black">
       {/* Image */}
       <a
         href={`https://www.mozillapulse.org/profile/${profile.profile_id}`}
@@ -21,12 +22,11 @@ const PulseProfile = ({ profile }) => {
 
       {/* Right card  */}
       <div className="tw-col-start-2 tw-col-span-3 tw-flex tw-flex-col">
-
         {/* Card top */}
         <div className="tw-flex tw-flex-row tw-justify-between tw-items-center tw-mt-2">
           <a
             className="tw-text-lg tw-mb-1 tw-font-sans tw-font-normal tw-text-black"
-            href={`https://www.mozillapulse.org/profile/${profile.profile_id}`}
+            href={`${profileUrl}${profile.profile_id}`}
           >
             {profile.name}
           </a>
@@ -61,9 +61,11 @@ const PulseProfile = ({ profile }) => {
         )}
 
         {/* Short bio block */}
-        {profile.user_bio &&
-          <p className="tw-text-gray-60 tw-text-sm medium:tw-text-[15px] my-2">{profile.user_bio}</p>
-        }
+        {profile.user_bio && (
+          <p className="tw-text-gray-60 tw-text-sm medium:tw-text-[15px] my-2">
+            {profile.user_bio}
+          </p>
+        )}
 
         {profile.program_type && (
           <div className="tw-flex tw-flex-wrap tw-mt-auto">
diff --git a/source/js/components/tabbed-profile-directory/loading-spinner.jsx b/source/js/components/tabbed-profile-directory/loading-spinner.jsx
index db4980773a3..2a3d6aa89a5 100644
--- a/source/js/components/tabbed-profile-directory/loading-spinner.jsx
+++ b/source/js/components/tabbed-profile-directory/loading-spinner.jsx
@@ -1,7 +1,12 @@
+import { getText } from "./locales";
+
 const LoadingSpinner = () => {
   return (
-    <div className="col-12 mx-auto my-5 text-center">
-      <div className="loading-indicator d-inline-block">
+    <div
+      className="col-12 mx-auto my-5 text-center"
+      aria-label={getText("Loading Icon")}
+    >
+      <div className="loading-indicator d-inline-block" aria-hidden="true">
         <div className="dot" />
         <div className="dot" />
         <div className="dot" />
diff --git a/source/js/components/tabbed-profile-directory/locale-strings.jsx b/source/js/components/tabbed-profile-directory/locale-strings.jsx
index a50e7bba094..b6b829c272f 100644
--- a/source/js/components/tabbed-profile-directory/locale-strings.jsx
+++ b/source/js/components/tabbed-profile-directory/locale-strings.jsx
@@ -2,31 +2,43 @@ export default {
   // English
   en: {
     "No Profiles": `No profiles found. Please try again.`,
+    "Loading Icon": `No profiles found. Please try again.`,
+    "Filter by": `Filter by`,
     "Show All": `All`,
   },
   // German
   de: {
     "No Profiles": `Keine Profile gefunden. Bitte versuche es erneut.`,
+    "Loading Icon": `Ladesymbol`,
+    "Filter by": `Filtern nach`,
     "Show All": `Alle`,
   },
   // Spanish
   es: {
     "No Profiles": `No se encontraron perfiles. Inténtalo de nuevo.`,
+    "Loading Icon": `Cargando icono`,
+    "Filter by": `filtrado por`,
     "Show All": `Todos`,
   },
   // French
   fr: {
     "No Profiles": `Aucun profil trouvé. Veuillez réessayer.`,
+    "Loading Icon": `Icône de chargement`,
+    "Filter by": `filtrer par`,
     "Show All": `Tout`,
   },
   // Polish
   pl: {
     "No Profiles": `Nie znaleziono profili. Proszę spróbuj ponownie.`,
+    "Loading Icon": `Ikona ładowania`,
+    "Filter by": `Filtruj według`,
     "Show All": `Wszystko`,
   },
   // Portuguese
   "pt-BR": {
     "No Profiles": `Nenhum perfil encontrado. Por favor, tente novamente.`,
+    "Loading Icon": `Carregando ícone`,
+    "Filter by": `filtrar por`,
     "Show All": `Tudo`,
   },
 };
diff --git a/source/js/components/tabbed-profile-directory/subfilter-dropdown.jsx b/source/js/components/tabbed-profile-directory/subfilter-dropdown.jsx
index 2679e5736a9..cc69705d5d7 100644
--- a/source/js/components/tabbed-profile-directory/subfilter-dropdown.jsx
+++ b/source/js/components/tabbed-profile-directory/subfilter-dropdown.jsx
@@ -43,7 +43,10 @@ const SubfilterDropdown = ({
           aria-expanded={dropdownExpanded}
           aria-haspopup="listbox"
         >
-          <span>Filter By {label}</span>
+          <span>
+            {getText("Filter by ")}
+            {label}
+          </span>
           <img
             className={`tw-w-4 tw-h-4 tw-ml-2 ${
               dropdownExpanded ? "tw-rotate-180" : ""