Design System: Recommendations for Page Card CSS/HTML Standard

[jdingeman]

Dependency

• Design System: Audit Page Card CSS/HTML standard #2061
• Design system for Internship

Overview

We need to document recommendations for the .page-card classes so that we can then standardize and implement them for the HfLA Website.

Action Items

• In issue Design System: Audit Page Card CSS/HTML standard #2061, devs created a new spreadsheet noting all instances of a .*-card class and created a write-up with research on accessibility and standard practices. As the developer assigned to this issue, you will:
• Go through all of the instances in the spreadsheet of the .*-card classes in the HfLA repo
  • Review each instance to see how it was coded, and compare it against the standards written in the write-up.
  • Write any "relevant methods" pertaining to accessibility and industry standard (i.e. do they use empty alt texts, are they WCAG 2.1 compliant, can they be tab-focused, etc.)
  • If a class implements something that is "off" or otherwise non-standard and can be standardized, write specific recommendations on what we can do to make the class more compliant, accessible, etc.
• For each instance, write the in the "Impact" column what the ramifications are for changing/refactoring any instance of the .*page-card if it needs to be changed.

Merge Team

• Release dependency on Design System: Standardize Page Cards #2226

Resources/Instructions

/* Current default for page-card*/
.page-card {
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
  }

• WCAG 2.1
• Design System: Audit Page Card write-up
• First part of the Design System Audit for Page Card CSS/HTML Standard: Design System: Audit Page Card CSS/HTML standard #2061

[github-actions]

Hi @freaky4wrld, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[freaky4wrld]

Availability: Evenings
ETA: Thursday 12/14

[freaky4wrld]

Issue is still in progress. might take sometime due to slow pace work.
Availability: Evenings
ETA: EOD Thursday 12/18

[freaky4wrld]

@jdingeman I'm just confused can you tell me about, to which version of code I've to write the recommendations, the spreadsheet consist of a Permalink that doesn't match with the current version of code in gh-pages. So can you please clear on that. Thanks for the help

[t-will-gillis]

Hey @freaky4wrld FYI I don't believe Justin has been logging in recently so you might not get a response.

If I understand your question: I would ignore the Permalink and review using the current code on gh-pages.

[freaky4wrld]

Waiting for @roslynwythe suggestions for the issue that are going to be addressed on the onboarding meeting at 8th this month

[roslynwythe]

@freaky4wrld I moved this issue into "New Issue Approval" because I realized that the spreadsheet is out of date (for instance, it does not include toolkit and guides pages) and I need to consult with PM about how to proceed.