Build Design System and Site ADA Compliance

[chalimar]

Please build a design system for the UI components used for the website.

Find a free Figma template to reuse.

• Include the Classes in the Figma document following HFLA's Figma design.
  • Dev currently has a UI library that they reference separate from Figma
• Develop a system to check that any design changes are in-line with the Design System

Related Issues

• Copy Review: Periods and punctuation #1152
• Link Indicator for leaving the site #1144
• Which accessibility testing tool should you use? #1033
• Adjust the Tag generator font size according to Figma #993
• Create an "On Loading" Spinner #828
• CTI Communication (style) Guide for Document Creation template/examples #711
• Review hover state of buttons and links #673
• Update cursor appearance for text links & other interactive components across site #195
• Create a writing style guide #178
• Breadcrumbs update with each new page and audit breadcrumbs #125
• Banner Illustrations #82
• Update link colors to pass accessibility test #1122

[chalimar]

In Progress:

• Test WCAG compliance with site colors.
• Live video or audio content includes captions
• Text on pages can be resized to 200% while still maintaining form
• Images are not used where text can achieve the same purpose
• Pages on the site can be accessed in multiple ways
• Keyboard focus is visible and clear
• The language of content is identified in code with any language changes
• Menus and buttons are used consistently regardless of the user’s location in the site
• Users are given suggestions on how to solve input errors
• An error prevention technique is used whenever the user is entering sensitive data
• Underlined text that does not provide a link is removed
• Redundant links on the same page are eliminated or minimized

Resources:
Compliance Checklist
WCAG

[chalimar]

Still in process. Some desktop screens are still being stylized to meet contrast and font size standards.

[ExperimentsInHonesty]

@mealthebear @chalimar @ayusheeaithal to discuss grid system and breakpoint definitions for developers

[Olivia-Chiong]

@ExperimentsInHonesty and @chalimar to discuss #141 and #87

[chalimar]

I currently have a WIP of a new type system for desktop screens based on what was gathered from the Figma file and a combination of recommended sizing from material.io.

• Font sizing no longer is below 14px
• Class names have been created
• Will provide rem units to style guide

[chalimar]

1/10/21

Currently testing new font sizes in all screen sizes (mobile still pending). Also defining padding within container spaces and spacers in style guide.

[chalimar]

1/14/21
Met with the HfLA UI/UX community for best practices for style guide development. I'm currently looking at best practices and standards within various design systems. Below are screenshots of my WIP.

[chalimar]

1/17/2021

1:Progress: Still incorporating styling, grid and component usage for the CTI.
2:Blocks: Need to continue adding finalized elements to the design system.
3:Availability: Will be traveling out of state to Montana, will be back after 1/23. Reachable on Slack when I have internet.
4 ETA: On going process, aiming for a solid system by the end of February once reviewed and approved.

[chalimar]

1/24/2021

1:Progress: I have not been able to work on the Figma file while out of town.
2:Blocks: None, just time and availability to add onto the system.
3:Availability: Will make time after today's meeting to add onto the file.
4 ETA: On going process, aiming for a solid system by the end of February once reviewed and approved.

[chalimar]

Currently working on site layout and margins. Next step for this would be gathering all of the iconography and components and listing where and how they are used.

[chalimar]

1/31/2021 Update

More pages have been created. Currently gathering all existing components and their usage into this document.

[chalimar]

2/4/2021

Currently undergoing site audit for UI components. List can be viewed here.

The design system will evolve as we refine our content, but this will help ensure that we have at least MVP components created.

[chalimar]

Currently reviewing comment left by @kevinashworth

Question: Should I now redo the wireframes to match 600, 960 and 1280 pixel width?

[Olivia-Chiong]

@chalimar will finalize columns before Sunday

[chalimar]

@chalimar will finalize columns before Sunday

Layouts using 1280 (12), 960 (6) and 600 (4) width for review.

[chalimar]

3.4.21
Been a busy week, have not worked on my issue. Sorry!

[chalimar]

still working on gathering components and documentation.

[Olivia-Chiong]

@chalimar What portions are left and how can we help you to finish this? If there is any part that we can break out for others to work on, please let Product know.

[chalimar]

Still pending on my end. I need to go through my components checklist and ensure all the elements I have noted are added at the very least.

WIll have a more accurate update for sunday.

[chalimar]

Still gathering all components and placing documentation with usage.

Components checklist can be viewed here

[mariastudnicka]

@chalimar and @meismith We need to add a Modal as UI design component as well.

[chalimar]

Added in some additional components (we're about 80% done).

Need to create an inventory of any new components from updated pages after this. (Index Contributors, organizations, etc).

[chalimar]

7.1.21

On-going work on the design system. I am trying to wrap it up and create an interactive ToC that will lead all designers to the appropriate reference.

[chalimar]

Reviewing design file again to gather remaining components for documentation and current MVP styling.

[smsada]

• Copy Review: Periods and punctuation #1152
• Link Indicator for leaving the site #1144
• Which accessibility testing tool should you use? #1033
• Adjust the Tag generator font size according to Figma #993
• Create an "On Loading" Spinner #828
• CTI Communication (style) Guide for Document Creation template/examples #711
• Review hover state of buttons and links #673
• Update cursor appearance for text links & other interactive components across site #195
• Create a writing style guide #178
• Breadcrumbs update with each new page and audit breadcrumbs #125
• Banner Illustrations #82
• Update link colors to pass accessibility test #1122

[smsada]

@chalimar Reference: HFLA's Design System