Skip to content

Commit 6111868

Browse files
authored
Swapping icons to Font Awesome, improves icon accessibility (#148)
Concisely, this PR does a couple of things: * we install [Font Awesome](https://fontawesome.com/) and its related react dependencies * we replace all SVG icons (social media + committee logos) with Font Awesome icons (individual imports w/ tree-shaking) * we add `aria-label` tags to make icon links accessible * we delete now-irrelevant CSS + icons from the `public/` folder This PR is related to three issues: * closes #94 and closes #146 * is a required precursor to #136 (due to the current icon implementation relying on the `public/` folder) The components/pages we hit are: * the footer's dark `<SocialMedia/>` CTA, which is on every page - needed to also adjust some in specific CSS * the light `<SocialMedia/>` CTAs on the home page and the about page * the committees page (swapping out committee logo links for a link icon) * the event page (by swapping out an icon in favour of text) And some other relevant notes: * I took a bit of liberty in adjusting what I felt were unclear links (i.e. changing a committee logo to a link logo for the website, removing the YouTube link on events in favour of the word, etc.) * I also changed link hover behaviour: instead of previously applying a very small scale-up (`1.02`), I change the color of the link. I feel that this is easier to see (and thus more accessible), plus causes less layout jank. * FA resolves all the weird SVG issues (notably, the Discord icon) * compared to a full-on rewrite (which may come down the line), this PR looks to do in-place refactoring. Notably, I don't create any new (external) components (i.e. a unified icon-link). This is something we could explore down the line, but I didn't want to bloat this PR. Let me know what y'all think 😊
1 parent 2ae7f31 commit 6111868

24 files changed

+186
-345
lines changed

package-lock.json

Lines changed: 55 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@fortawesome/fontawesome-svg-core": "^1.2.35",
7+
"@fortawesome/free-brands-svg-icons": "^5.15.3",
8+
"@fortawesome/free-solid-svg-icons": "^5.15.3",
9+
"@fortawesome/react-fontawesome": "^0.1.14",
610
"@testing-library/jest-dom": "^4.2.4",
711
"@testing-library/react": "^9.3.2",
812
"@testing-library/user-event": "^7.1.2",

public/images/social_media/discord.svg

Lines changed: 0 additions & 6 deletions
This file was deleted.

public/images/social_media/discordDark.svg

Lines changed: 0 additions & 6 deletions
This file was deleted.

public/images/social_media/facebook.svg

Lines changed: 0 additions & 10 deletions
This file was deleted.

public/images/social_media/facebookDark.svg

Lines changed: 0 additions & 10 deletions
This file was deleted.

public/images/social_media/github.svg

Lines changed: 0 additions & 29 deletions
This file was deleted.

public/images/social_media/githubDark.svg

Lines changed: 0 additions & 29 deletions
This file was deleted.

public/images/social_media/instagram.svg

Lines changed: 0 additions & 5 deletions
This file was deleted.

public/images/social_media/instagramDark.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)