gctools-outilsgc / aurora-website Goto Github PK

In order to migrate things into the gatsby v1 version that works with IE I need all the changes/branches to be added to the master. At the moment the master is not the deployable version found in the gh-pages branch.

Current branches that need to be reviewed or finalized and submitted as pull requests:

• final-style
• french-documentation
• tables
• jsxify-nav
• dropdownButtonState
• features (branch removed)

Make sure all code that is already written passes the linter test.

Configuration on Codacy.

Things to fix:

• Get started button needs more context in hidden text
• Alt text for the FiP elements and Aurora logo

Give context for screen readers on different state examples.

See above. Need hidden text indicating that they are spinners.

in data overview, any part that has an image that there is a component built for we should replace the image with the component. or is it the other way around?

Originally created by Rick Massie on Sept. 25

The NAV menu is missing the last menu item, but there is no indication to scroll left. A sighted user would have no idea it exists. It would be good to jump to a hamburger menu when the NAV expands beyond the device width.

Increase padding to make it cut off the screen.

Now that the site is built using the design-system-code repo we have no use for the original repository. To go through and save a copy of the files as needed, and transfer important issues, then delete the old repository.

Originally created by Rick Massie on Sept. 18

When creating an anchor link, the page jumps to the correct anchor.

However, the anchor ends up being hidden underneath the top nav menu. I'm not sure exactly what is happening, but somehow the Nav menu seems to be "floating" above the rest of the content, and since the browser bring anchor links to the top of the content area, it actually ends up hidden under the nav menu.

Integrate accessibility testing with continuous integration software tool.

Ressources/Solutions:

• TravisCI
• Jenkins
• CircleCI

Once launched, the Aurora website should undergo a usability test to ensure efficient navigation and task completion by key users. A test will need to be designed an planned to ensure we meet our goals for usability.

Needs top and bottom margins so there is spacing between rows when seen on smaller screen sizes.

On scatterplot page. Image needs alt text. Graph needs darker colour for data points

Originally created by Rick Massie on Sept. 25

The text on the table page says tables should have informative.titles, but the examples do not have titles. Would be good to demonstrate it in the examples.

Gen asked for a page outlining planned improvements to the Aurora design system, based on versions. This information is to be added prior to communications is sent.

English content for this page is written. When translation is completed, a new page will need to be created in both EN and FR and deployed to the site.

Went over accessibility review provided IMTD and determined actionable items on each page of Aurora.

addressing users, referring to product creators (GCtools), referring to Government of Canada, validation messages (positive, neutral and negative), localization/translation, active voice, calls-to-action

To be completed after A/B testing on voice and tone.

To be included in the branding package, and design system at a later date.

Formatting guidelines for help articles. Includes tone and any common terms that may be used in help material.

Can use article on: https://gccollab.gctools-outilsgc.ca/a/solutions/articles/2100041947-help-article-formatting

Some updates are required on all components pages:

• Skip over code block elements
• Look for replicated IDs
• Consider adding more context to page titles

Cards page needs updates:

• Review headings in the Components of Card section

Documentation should include guidelines on when to use magnifying glass icon or not.

Icon - when completing a query leads to a new search results page
No icon - for auto-complete search results

When a name for the design system is decided, change the url to match the name and make the correction needed for pathing to work with the new url.

When common navigation has been tested and approved, the template should be added to the Aurora design system. Documentation should include design specifications, how and when to use, usability considerations, and design files.

Can be added to a new "Layouts" sub-section on the Components section of the site.

Includes tone as well as formatting guidelines

When Aurora website is complete, add do and don't images to documentation with text and consistent style. A custom component for the do/don't text style will need to be created.

Custom component and respective images + text will need to be added to corresponding article.

Button inputs page needs updates for accessibility:

• Review component examples (switch esp.)
• Checkbox examples
• Badges need black text (#96A8B2)

Form design and labels needs updates:

• Submit button is in French on the English page
• File upload needs to match component in the design system
• Components do not match design specifications
• French, change "Email" label to "Courriel"
• Microcopy text may be a colour contrast issues
• Review radio buttons

Documentation in Aurora design system for system status definitions, styles, and how to implement styles on application logos, splash pages, alerts etc.

See work done by @sabrinatbs on beta sprints card #3709

The component(s) shown on this page https://design.gccollab.ca/component/file-upload don't match the style identified in the documentation and the UI kit.

Create a custom component using Bootstrap to match the style we created.

Conduct user testing for preferred tone on the new GCtools/OADW platforms. Will help determine writing style within applications (i.e. micro-copy, alerts etc.)

Will be conducted using multi-variant testing.

Now that we have designs for pilot services, we should write documentation to add to the design system relating to these designs.

Several changes were made to EN documentation during reviews. French documentation will need to be compared and matched to corresponding EN articles.

• Add helmet tag to all articles
• Add hex code pills to

Overview

• Add images to Blogues

Content

• Content Guidelines missing section in FR
• Typographie needs do/don't for emphasis (with translation)
• Back to top needs FR wb component
• Missing Progress Indicators article in FR (with translation)

Data

• In Data Overview need FR version of Illustrator images
• Add images to Choosing visualizations
• Add images to column and bar graphs
• Add component images in Legends and Tooltips
• Add image to Scatterplots
• Need French images for interactive Tables
• Add images to Line Graphs

• Table components need titles.
• Tabe scope to identify cells

Design and develop download page with option to download either the UI kit or the Aurora CSS file.

Some review changes apply to multiple pages:

• Table components need titles
• Review accessibility of tables
• Table scope to identify cells
• Verify if components are actually built, if so, add them to pages

In progress indicators page.

• Remove code blocks with basic text elements (headers, paragraph)
• Remove do/don't images

when to use, writing descriptive text,

Error Box component currently on Aurora doesn't match our design specifications in UI kit and documentation.

Customize this component to match.

Integrate or assert the best way to add images to the gatsby site.

Possible solutions:

• Gatsby-Plugin-Sharp or Gatsby-Image plugin.
• React based solution to image rendering.

Resources:

• Gatsby plugins.
• Gatsby documentation for image processing.

Title is self-explanatory. says sierra

Find how best to implement language switching/i18n in a react based app/static site.

Possible solutions:

• Hold the text in data files to be switched when required.
• Create a copy of the site in french.

Resources:

• Luc Belliveau implemented a version of i18n for our react tools in the gctools-component repo.
• The digital playbook hosts a static site with language switching using the WET component.

Additional queries:

• Do sections in the url paths need to change to reflect the change in language?

Maple.com/en/Components/buttons/ 
Maple.com/fr/Composants/buttons/

• Does the application need to detect the locale of the user and direct the user to the correct front page?

In tags, chips and pills page