From d855ea156ccf0be0dbe1f9fac437ca9902f117e4 Mon Sep 17 00:00:00 2001
From: Juan Pablo Mitriatti <juan.mitriatti@gmail.com>
Date: Mon, 24 Mar 2025 10:55:38 -0300
Subject: [PATCH 1/2] fix(unity-bootstrap-theme): added hover white to footer's
 social icon

UDS-1979
---
 .../unity-bootstrap-theme/src/scss/extends/_globalfooter.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss b/packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss
index 0105d40bac..d65dbe0766 100644
--- a/packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss
+++ b/packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss
@@ -141,6 +141,10 @@ footer {
       color: $uds-color-base-gray-4;
       line-height: 1;
       padding-top: 7px; // Magic number. Reducing the padding by 1px to make the height = 48px.
+
+      :hover {
+        color: $uds-color-base-white;
+      }
     }
   }
 }

From 201a77aec078cb98f84dd5c3e2e322872f9769dd Mon Sep 17 00:00:00 2001
From: david ornelas <davidornelas_11@hotmail.com>
Date: Mon, 31 Mar 2025 17:52:52 -0700
Subject: [PATCH 2/2] fix(component-header-footer): add correct outline for
 footer links and buttons onfocus

---
 .../src/footer/components/Social/index.js         |  5 +++++
 .../src/footer/index.styles.js                    | 15 +++++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/component-header-footer/src/footer/components/Social/index.js b/packages/component-header-footer/src/footer/components/Social/index.js
index 0f259984f4..18522e9d84 100644
--- a/packages/component-header-footer/src/footer/components/Social/index.js
+++ b/packages/component-header-footer/src/footer/components/Social/index.js
@@ -69,6 +69,7 @@ const Social = ({ social: { logoUrl, unitLogo, mediaLinks } }) => {
                     <FontAwesomeIcon
                       title="Facebook Social Media Icon"
                       icon={faFacebookSquare}
+                      className="social-icon"
                     />
                   </a>
                 )}
@@ -87,6 +88,7 @@ const Social = ({ social: { logoUrl, unitLogo, mediaLinks } }) => {
                     <FontAwesomeIcon
                       title="Twitter Social Media Icon"
                       icon={faSquareXTwitter}
+                      className="social-icon"
                     />
                   </a>
                 )}
@@ -105,6 +107,7 @@ const Social = ({ social: { logoUrl, unitLogo, mediaLinks } }) => {
                     <FontAwesomeIcon
                       title="Instagram Social Media Icon"
                       icon={faInstagramSquare}
+                      className="social-icon"
                     />
                   </a>
                 )}
@@ -123,6 +126,7 @@ const Social = ({ social: { logoUrl, unitLogo, mediaLinks } }) => {
                     <FontAwesomeIcon
                       title="YouTube Social Media Icon"
                       icon={faYoutubeSquare}
+                      className="social-icon"
                     />
                   </a>
                 )}
@@ -141,6 +145,7 @@ const Social = ({ social: { logoUrl, unitLogo, mediaLinks } }) => {
                     <FontAwesomeIcon
                       title="LinkedIn Social Media Icon"
                       icon={faLinkedin}
+                      className="social-icon"
                     />
                   </a>
                 )}
diff --git a/packages/component-header-footer/src/footer/index.styles.js b/packages/component-header-footer/src/footer/index.styles.js
index bc2f9629f0..b9377a9476 100644
--- a/packages/component-header-footer/src/footer/index.styles.js
+++ b/packages/component-header-footer/src/footer/index.styles.js
@@ -28,6 +28,11 @@ const StyledFooter = styled.footer`
     font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans,
       sans-serif;
     line-height: 1.5rem;
+
+    a:focus, button:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--color-base-white), 0 0 0 4px var(--color-base-grey-7) !important;
+    }
   }
 
   .btn,
@@ -132,6 +137,12 @@ const StyledFooter = styled.footer`
       .nav {
         padding-bottom: 1.5rem;
 
+        .nav-link .social-icon {
+          &:hover {
+            color: var(--color-base-white);
+          }
+        }
+
         @media (min-width: 768px) {
           padding: 2.5rem 0;
           justify-content: flex-end;
@@ -271,8 +282,7 @@ const StyledFooter = styled.footer`
           text-decoration: none;
           display: block;
 
-          &:hover,
-          &:focus {
+          &:hover {
             color: var(--color-base-gold);
             text-decoration: underline;
           }
@@ -282,6 +292,7 @@ const StyledFooter = styled.footer`
           padding: 0;
           display: block;
           min-height: fit-content;
+          overflow: visible;
         }
       }
     }