Fixes #6911

What changes did you make?

• Within HTML template _includes/wins-page/wins-card-template.html/wins-card-template.html, replaced current reference to github-icon using the img element, with new inline expression rendering github-icon within a div element.
  Specifically replaced:
  <a target="_blank" class="wins-card-github-icon"><img class="github-icon" alt="" /></a>
  with:

<a target="_blank" class="wins-card-github-icon" style = "color:black">
  <div role = "img" class = "github-icon">
      {% include svg/icon-github.svg %}  
  </div>
</a>

• Within the makeCards function in assets/js/wins.js, removed the img element source definition since we replaced the img element.

~~cloneCardTemplate.querySelector('.github-icon').src = GITHUB_ICON ;~~

• Removed the definition of the constant variable GITHUB_ICON which set the path to the svg used to define the source for the previously used img element.

~~const GITHUB_ICON = '/assets/images/wins-page/icon-github-small.svg';~~

• Made SVG WCAG compliant. Added aria-label attribute and definition to the github-icon's svg div. Used the previous definition of the alt attribute of the img element for the aria-label of the github-icon svg div.

cloneCardTemplate.querySelector('.github-icon').setAttribute('aria-label' ,`GitHub profile for ${card[name]}`);

• Updated _sass/components/_wins-page.scss to ensure the styling of the GitHub icon remained unchanged after replacing the source. Set the github-icon element in _wins-page.scss height and width to 32px. Also set themax-width to 100% to mimic the behavior of the LinkedIn icon. Set the SVG width and height properties nested within the github-icon element divto 100% so they would adhere to the sizing of the parent element. In this case the github-icon div is the parent element. Therefore the SVG should render to be 32x32 px.

.github-icon{
  width: 32px;
  height: 32px;
  max-width: 100%;
}

.github-icon svg{
  width: 100%;
  height: 100%;
}

Why did you make the changes (we will use this info to test)?

• To reduce the number of duplicate images in the codebase.

CodeQL Alerts

After the PR has been submitted and the resulting GitHub actions/checks have been completed, developers should check the PR for CodeQL alert annotations.

Please let us know that you have checked for CodeQL alerts. Please do not dismiss alerts.

• I have checked this PR for CodeQL alerts and none were found.
• I found CodeQL alert(s), and (select one):
  • I have resolved the CodeQL alert(s) as noted
  • I believe the CodeQL alert(s) is a false positive (Merge Team will evaluate)
  • I have followed the Instructions below, but I am still stuck (Merge Team will evaluate)

Screenshots of Proposed Changes To The Website (if any, please do not include screenshots of code changes)

• No visual changes to the website