From 2f6b63dbbfa634645d571631c33510b282b37898 Mon Sep 17 00:00:00 2001 From: jlsantia21 Date: Tue, 14 Oct 2025 23:40:45 -0700 Subject: [PATCH 1/3] Replaced the current github icon used within wins card template to the github icon with file type of svg. --- _includes/wins-page/wins-card-template.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/_includes/wins-page/wins-card-template.html b/_includes/wins-page/wins-card-template.html index b616a5f9ab..1598eaa0a2 100644 --- a/_includes/wins-page/wins-card-template.html +++ b/_includes/wins-page/wins-card-template.html @@ -7,7 +7,11 @@ - + + +
From 86a2bb420f6a033002e1b98725f1410034389553 Mon Sep 17 00:00:00 2001 From: jlsantia21 Date: Tue, 14 Oct 2025 23:45:13 -0700 Subject: [PATCH 2/3] Removed the line of code which set the srouce of the github icon div to the github icon saved within assets: /asstes/images/wins-page/icon-github-small.svg. Also Removed the literal definition of GITHUB_ICON where the path to this icon svg which is being replaced. Modified line where the alt property was defined for the img which used to store the svg. To comply with WCAG, we instead add the description to the aria-label using the setAttribute method. --- assets/js/wins.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/assets/js/wins.js b/assets/js/wins.js index 45bd6886f2..531b664f4d 100644 --- a/assets/js/wins.js +++ b/assets/js/wins.js @@ -290,7 +290,6 @@ const cardTemplate = document.getElementById("wins-card-template"); const QUOTE_ICON_PATH = '/assets/images/wins-page/quote-icon.svg' const AVATAR_DEFAULT_PATH = "/assets/images/wins-page/avatar-default.svg" - const GITHUB_ICON = '/assets/images/wins-page/icon-github-small.svg'; const LINKEDIN_ICON = '/assets/images/wins-page/icon-linkedin-small.svg' const winsCardContainer = document.querySelector('#responses'); @@ -330,8 +329,7 @@ if (card[github_url].length > 0){ cloneCardTemplate.querySelector('.wins-card-github-icon').href = card[github_url]; - cloneCardTemplate.querySelector('.github-icon').src = GITHUB_ICON ; - cloneCardTemplate.querySelector('.github-icon').alt = `GitHub profile for ${card[name]}`; + cloneCardTemplate.querySelector('.github-icon').setAttribute('aria-label' ,`GitHub profile for ${card[name]}`); } else { cloneCardTemplate.querySelector('.wins-card-github-icon').setAttribute('hidden', 'true') } From db760ed6ff1edb8fa3ac9cd55c9361be56902542 Mon Sep 17 00:00:00 2001 From: jlsantia21 Date: Tue, 21 Oct 2025 01:09:35 -0700 Subject: [PATCH 3/3] Added styling for github-icon class and the nested svg to match the appearance of linkedin-icon class elements. Because the github-icon svg is rendered inline, the viewBox inherits a larger sizing from the source file than the Linkedin icon. Inspecting the linked-in image revealed a base size of 32px x 32px. To replicate this sizing, we set github-icon div width and height to 32px by 32px and made a rule for the svg to fill the container width and height by 100%. --- _sass/components/_wins-page.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/_sass/components/_wins-page.scss b/_sass/components/_wins-page.scss index 913eefd091..088e559265 100644 --- a/_sass/components/_wins-page.scss +++ b/_sass/components/_wins-page.scss @@ -280,6 +280,17 @@ display: flex; } +.github-icon{ + width: 32px; + height: 32px; + max-width: 100%; +} + +.github-icon svg{ + width: 100%; + height: 100%; +} + @media #{$bp-below-desktop} { .wins-card { position: relative;