From 75710e53f0c7905c6911f91c70067f24b4ecced6 Mon Sep 17 00:00:00 2001
From: Margarita Golubeva <margaret.golubeva@gmail.com>
Date: Mon, 3 Jun 2024 22:45:55 +0300
Subject: [PATCH] fix: add semantics to contact information

---
 src/widgets/Footer/view/FooterView.ts | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/widgets/Footer/view/FooterView.ts b/src/widgets/Footer/view/FooterView.ts
index 40d47cf3..aa1d2542 100644
--- a/src/widgets/Footer/view/FooterView.ts
+++ b/src/widgets/Footer/view/FooterView.ts
@@ -32,7 +32,9 @@ type Goal = {
 type Contact = {
   alt: string;
   description: string;
+  href?: string;
   src: string;
+  tag: keyof HTMLElementTagNameMap;
 };
 
 type Img = {
@@ -98,16 +100,21 @@ const CONTACTS: Contact[] = [
     alt: 'location greenshop',
     description: '70 West Buckingham Ave. Farmingdale, NY 11735',
     src: '/img/png/location.png',
+    tag: 'address',
   },
   {
     alt: 'email greenshop',
     description: 'contact@greenshop.com',
+    href: 'mailto:contact@greenshop.com',
     src: '/img/png/message.png',
+    tag: 'a',
   },
   {
     alt: 'phone greenshop',
     description: '+88 01911 717 490',
+    href: 'tel:+8801911717490',
     src: '/img/png/calling.png',
+    tag: 'a',
   },
 ];
 
@@ -250,11 +257,19 @@ class FooterView {
     return wrap;
   }
 
-  private createContactItemHTML(contact: Contact): HTMLDivElement {
+  private createContactItemHTML(contact: Contact): HTMLElement {
+    const attributes: { [key: string]: string } = {};
+
+    if (contact.href) {
+      attributes.href = contact.href;
+    }
+
     const wrap = createBaseElement({
+      attributes,
       cssClasses: [styles.contactItem],
-      tag: 'div',
+      tag: contact.tag,
     });
+
     const icon = createBaseElement({
       attributes: {
         alt: contact.alt,
@@ -263,11 +278,13 @@ class FooterView {
       cssClasses: [styles.contactIcon],
       tag: 'img',
     });
+
     const title = createBaseElement({
       cssClasses: [styles.contactText],
       innerContent: contact.description,
-      tag: 'p',
+      tag: 'span',
     });
+
     wrap.append(icon, title);
     return wrap;
   }