hackforla / hackforla/website

Design System: Recommendations for Page Card CSS/HTML Standard

Open
#4,296 26 comments 0 reactions 0 assignees View on GitHub
Complexity: Large Dependency Feature: Accessibility Feature: Design system manual dependency release role: front end size: 3pt
Dominant language
JavaScript
Stars
363
Forks
872
Avg merge
2d 21h
Merged PRs (30d)
18

Description

### Dependency
- [x] https://github.com/hackforla/website/issues/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 https://github.com/hackforla/website/issues/2061, devs created a new spreadsheet noting all instances of a `.*-card` class and created a [write-up](https://docs.google.com/document/d/1U390nhv2zgftuCdJ5UCGNeWuQAjhDYQck3-icaY0gH0/edit#) with research on accessibility and standard practices. As the developer assigned to this issue, you will:
- [x] Go through all of the instances in the [spreadsheet](https://docs.google.com/spreadsheets/d/10-c3jpf4vtXKcwLiBC4Z3wqN777xlxbErHS4QNq-e8o/edit#gid=960681845) 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.
- [x] Write any "relevant methods" pertaining to accessibility and industry standard (i.e. do they use empty alt texts, are they [WCAG 2.1](https://www.w3.org/TR/WCAG21/) compliant, can they be [tab-focused](https://web.dev/control-focus-with-tabindex/), 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 https://github.com/hackforla/website/issues/2226

### Resources/Instructions
```css
/* Current default for page-card*/
.page-card {
border-radius: 20px;
overflow: hidden;
width: 100%;
}
```
- [WCAG 2.1](https://www.w3.org/TR/WCAG21/)
- Design System: Audit Page Card [write-up](https://docs.google.com/document/d/1U390nhv2zgftuCdJ5UCGNeWuQAjhDYQck3-icaY0gH0/edit#)
- First part of the Design System Audit for Page Card CSS/HTML Standard: https://github.com/hackforla/website/issues/2061

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.