Make toolkit guide cards WCAG compliant

[michaelmagen]

Fixes #2929

What changes did you make and why did you make them ?

• Updated _includes/guide-card.html as specified in issue.
• Moved 2FA.svg to assets\images\guides\2FA directory
• Moved survey-reporting-image.svg to assets\images\guides\2FA directory assets\images\guides\survey-reporting directory
• Updated svg field for all html files in _guide-pages\ directory
• After making these changes, had trouble fixing the spacing between image and text in guid cards (see screenshots below). Created this pull request to allow others to help fix the spacing.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Visuals after changes are applied

Figma design for the Toolkit page

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b michaelmagen-guide-card-wcag-update-2929 gh-pages
git pull https://github.com/michaelmagen/website.git guide-card-wcag-update-2929

[blulady]

@plang-psm Did you get a chance to slack michaelmagen about your findings? If not, feel free to post them here, if you already spoke with him, don't worry about it.

[plang-psm]

Hi @blulady , just wrapped up our meeting regarding the issue! @michaelmagen will be finishing up and submitting for PR review soon.

[angelenelm]

I can't wait to see how you figured out the spacing!

[michaelmagen]

I added the changed I had discussed with @plang-psm. However, there is an extra commit called "Merge brach 'hackforla:gh-pages' into guide-card-wcag-update-2929" from when I tried to incorporate the update my topic branch with the changes made in the hackforla repository. Is this an issue?

[blulady]

I added the changed I had discussed with @plang-psm. However, there is an extra commit called "Merge brach 'hackforla:gh-pages' into guide-card-wcag-update-2929" from when I tried to incorporate the update my topic branch with the changes made in the hackforla repository. Is this an issue?

Shouldn't be.

[blulady]

The issue linked says to make it look like the site. I would argue that you have made it look better than the site, especially for the Responsive view. All of the mobile views seem to have the problem of the default card not being the same size as the website and while, personally, I think it's fine, I am uncertain if it is functioning as designed.

see screen shots

The ipads look good. Until you come to the view of the Surface Duo which seems to have the same issue but the Galaxy Fold has the same problem

The rest look amazing. All of which Matt said way more succinctly.

[MattPereira]

I completely agree with @blulady 's argument that your changes look better than the live site for the small to medium responsive views. Furthermore, you did a great job communicating with the team, asking for help, and fine tuning your solution.

Amazing work on this issue @michaelmagen ! 👍