Content: Icon component

[adorayi]

Summary: Documentation of component guidance in EN for the Icons component on the Design System website. Including use cases, how to use guidance, accessibility guidelines and more.

Existing draft to be rewritten to reflect the new icon set built in house that's replacing the FontAwesome set. New content specifically around individual use of icons.

Acceptance Criteria:

• [x] Component Kickoff
• [x] Component review
• [ ] Sync with Dev and Design
• [x] Research and consulting other design libraries
• [x] Component ID (name, definition, example image
• [x] Use case (when to use guidance & related components)
• [x] How to use guidance
• [x] Accessibility guidelines
• [x] Inclusive language
• [ ] Descriptive text for images
• [ ] Translation & Localization
• [ ] Bilingual review – content design
• [ ] Ensure consistency: ordering, terminology, high level voice/tone/style
• [ ] Final review

[anikbrazeau]

Icon documentation on canada.ca: https://design.canada.ca/common-design-patterns/icons.html design-GC-conception Slack thread: https://design-gc-conception.slack.com/archives/CPTK3SH24/p1693321999836589

[SmartMouthWords]

Notes from a past dev/design sync on icons. Outstanding questions were around:

• when to recommend the use of alt text and when it should not be used (if it has a label that renders the alt text redundant/repetitive)
• how can a user determine if their use of an icon is decorative only
• Which icons come with built in labels and which don't
• what to do with alt text when the label doesn't match the message the icon is being used to communicate Notes from a past dev/design sync on icons: https://docs.google.com/document/d/1azuCFDh3R4D0Qsz5N6S2Vxe2zxbgb2Qrb4aPgLCxtXc/edit

[anikbrazeau]

English draft documentation

https://docs.google.com/document/d/1ZsUnSfni07k8HfaRJiTN0Cmo3gCutlTBd5hReAWJxj8/edit

[nmakuch]

some of the images in the documentation I created can be found here: https://www.figma.com/file/mh2maMG2NBtk41k1O1UGHV/Canadian-Digital-Service%E2%80%A8---GC-Design-System?type=design&node-id=1847-5001&mode=design&t=XfqhPtRcfelbixFF-0

[ClementineHahn]

Need to rethink the different visuals to make it more easy to distinguish

[ClementineHahn]

https://docs.google.com/document/d/1ZsUnSfni07k8HfaRJiTN0Cmo3gCutlTBd5hReAWJxj8/edit

[SmartMouthWords]

20-Sept-23: Discussed icons issues in dev/design sync

Cleared up some confusion about

Guidance to add: Solo icons get a descriptive label for low vision and vision impaired users Icons with accompanying text that has the same meaning as the icon don’t get alt text to avoid redundancy and needless repetition from assistive technology that would be annoying Icons with accompanying text that carries a different meaning from the text get a descriptive label for low vision and vision impaired users

Icon customization is not recommended. The value does not outweigh the effort. A user could opt not to use the icon component if they want to apply their own icons.

Given that the style types for icons are visual and have no functionality difference, guidance on these will go on the design page rather than the use case / selection page where component types and roles go. Types and roles distinguish function and information handling differences.

[ClementineHahn]

Next teps will be : talk with dev for guidance, send to translation and start the design work. So next steps and cards to create for grooming @adorayi

[ClementineHahn]

@nmakuch can you update the acceptance criteria progress on this card by cehcking off the steps already done so we can visualize what is left to be done ? thank you