From cf2b3181d5645240563aef6891d0daf6bd9f72ef Mon Sep 17 00:00:00 2001
From: Maycol Espinoza Ponce
 <122275107+Maycol-Espinoza-Ponce@users.noreply.github.com>
Date: Tue, 24 Oct 2023 10:37:09 -0600
Subject: [PATCH] aria labels theIcon.astro and SocialModal.tsx  update

---
 src/components/common/ThemeIcon.astro | 7 ++++++-
 src/components/posts/SocialModal.tsx  | 6 +++++-
 src/i18n/UI/English.ts                | 2 ++
 src/i18n/UI/French.ts                 | 2 ++
 src/i18n/UI/Spanish.ts                | 2 ++
 src/i18n/uiType.ts                    | 2 ++
 6 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/common/ThemeIcon.astro b/src/components/common/ThemeIcon.astro
index 410d60fd..84cc3e05 100644
--- a/src/components/common/ThemeIcon.astro
+++ b/src/components/common/ThemeIcon.astro
@@ -4,6 +4,11 @@ import { Icon } from 'astro-icon/components';
 
 import { SITE } from '../../config';
 
+import { getLangFromUrl, useTranslations } from '../../i18n/utils';
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
+
 export interface Props {
   label?: string;
   class?: string;
@@ -12,7 +17,7 @@ export interface Props {
 }
 
 const {
-  label = 'Toggle between Dark and Light mode',
+  label = {t(‘ariaLabels.darkMessage’)},
   class:
     className = 'text-ptext1 dark:text-ptext1-DM hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center',
   iconClass = 'w-6 h-6',
diff --git a/src/components/posts/SocialModal.tsx b/src/components/posts/SocialModal.tsx
index b4cf5ff6..3d4d4190 100644
--- a/src/components/posts/SocialModal.tsx
+++ b/src/components/posts/SocialModal.tsx
@@ -1,6 +1,10 @@
 import { createSignal, Show, createEffect, onCleanup } from 'solid-js';
 import type { Component, JSX } from 'solid-js';
 import { SocialMediaShares } from './SocialMediaShares';
+import { getLangFromUrl, useTranslations } from '../../i18n/utils';
+
+const lang = getLangFromUrl(new URL(window.location.href));
+const t = useTranslations(lang);
 
 interface Post {
     id: number;
@@ -58,7 +62,7 @@ const SocialModal: Component<Post> = function(props) {
                         <SocialMediaShares id={ props.id } title={ props.title } image_urls={ props.image_urls }/>
                         
                         <button
-                            aria-aria-label='Close Dialog'
+                            aria-label={t(‘ariaLabels.closeDialog’)}
                             class="modal-close w-8 h-8 flex justify-center items-start text-icon2 dark:text-icon2-DM"
                             onClick={ closeModal }
                         >
diff --git a/src/i18n/UI/English.ts b/src/i18n/UI/English.ts
index 10817ac4..61a3724a 100644
--- a/src/i18n/UI/English.ts
+++ b/src/i18n/UI/English.ts
@@ -204,6 +204,8 @@ export const English = {
     checkboxMajorMunicipality: "Checkbox for selecting major municipality",
     checkboxMinorMunicipality: "Checkbox for selecting minor municipality",
     checkboxGoverningDistrict: "Checkbox for selecting governing district",
+    darkMessage: "Toggle between Dark and Light mode",
+    closeDialog: "Close Dialog",
   },
 
   headerData: {
diff --git a/src/i18n/UI/French.ts b/src/i18n/UI/French.ts
index 3a013a41..658cc83a 100644
--- a/src/i18n/UI/French.ts
+++ b/src/i18n/UI/French.ts
@@ -204,6 +204,8 @@ export const French = {
     checkboxMajorMunicipality: "Case à cocher pour sélectionner la grande municipalité",
     checkboxMinorMunicipality: "Case à cocher pour sélectionner une commune mineure",
     checkboxGoverningDistrict: "Case à cocher pour sélectionner le district administratif",
+    darkMessage: "Basculer entre le mode clair et le mode sombre",
+    closeDialog: "Fermer la boîte de dialogue",
   },
 
   headerData: {
diff --git a/src/i18n/UI/Spanish.ts b/src/i18n/UI/Spanish.ts
index 9c7d7700..af5c44cf 100644
--- a/src/i18n/UI/Spanish.ts
+++ b/src/i18n/UI/Spanish.ts
@@ -203,6 +203,8 @@ export const Spanish = {
     checkboxMajorMunicipality: "Casilla de verificación para seleccionar Provincia",
     checkboxMinorMunicipality: "Casilla de verificación para seleccionar Cantón",
     checkboxGoverningDistrict: "Casilla de verificación para seleccionar Distrito",
+    darkMessage: "Cambia entre modo claro y modo oscuro",
+    closeDialog: "Cerrar Dialogo",
   },
 
   headerData: {
diff --git a/src/i18n/uiType.ts b/src/i18n/uiType.ts
index 18f9a2ea..2f84445e 100644
--- a/src/i18n/uiType.ts
+++ b/src/i18n/uiType.ts
@@ -204,6 +204,8 @@ export interface uiObject {
     checkboxMajorMunicipality: string,
     checkboxMinorMunicipality: string,
     checkboxGoverningDistrict: string,
+    darkMessage: string,
+    closeDialog: string,
   },
 
   headerData: {