inclusive-design / guide.inclusivedesign.ca Goto Github PK

Describe the bug

The Try It activity under the Insight of Diverse Participation and Perspectives does not include anything to do with diverse participation. Add another Try It, or change the activity to reflect both diverse participation and diverse perspectives.

See: https://guide.inclusivedesign.ca/insights/DiverseParticipationAndPerspectives.html

Originally filed as FLOE-516

Describe the bug

Some links on the Guide show the raw URL instead of using descriptive text.

Originally filed as FLOE-523

Instances

• Tools > Infusion > "http://build.fluidproject.org/infusion/demos/uiOptions/"
• Tools > Metadata Authoring > "http://handbook.floeproject.org/Metadata.html"
• Tools > UX Walkthroughs > "https://wiki.fluidproject.org/display/fluid/User+Experience+Walkthroughs"
• Tools > Mindmaps > "https://wiki.fluidproject.org/display/fluid/%28PGA%29+Mind+Mapping"
• Practices > Facilitate Inclusively > "https://en.wikipedia.org/wiki/Yes,_and..."
• Tools > Usability Testing > "https://wiki.fluidproject.org/display/fluid/User+Testing"

Expected behavior

The link text should be descriptive and fit within the context of the page. Someone using a screen reader should be able to understand the destination of the link by the description alone.

Describe the bug

The padding on the left and right side of the main content on all Insights/Practices/Tools/Activities pages is unbalanced. It's worse when the topics panel is hidden, but is also unbalanced when the topics panel is open. It should be the same on either side, in both cases (topics panel open or closed)

Originally filed as FLOE-514

Screenshots

In the screenshot above, notice the left margin is different from the right.

Describe the bug

The images in the Inclusive Design Mapping activity are png's with transparent backgrounds. Replace these images that have transparent backgrounds, with versions that have a white background.

See: https://guide.inclusivedesign.ca/activities/InclusiveDesignMapping.html

Originally filed as FLOE-519

Related info

The original SVGs or Illustrator files will be added to this Issue once they're located.

within "tools" in "use case" and inside of try section.

• page link - https://guide.inclusivedesign.ca/tools/UseCases.html
  

Is your feature request related to a problem?

Add French localization of the "Cause and Effect" card deck found in the Cause and Effect activity.

Describe the solution you'd like

Translation provided by @bliz-ward on #77
https://drive.google.com/file/d/1n0KN_ZdGhAyxaU7Ji2WYl2RqT2T8QcZ9/view?usp=sharing

Is your feature request related to a problem?

The Design Guide is very text heavy and does not incorporate many images or other visual elements. It would be good to add more images, both in the form of specific diagrams/figures as well as supporting visuals that speak to the different concepts. This would help to make the Guide more engaging.

Originally filed as FLOE-520

Describe the bug

On mobile, the text lacks any visual distinction or visual hierarchy. For example, the page header visually appears the same size and emphasis as the body text. For example, the site name, breadcrumb, article title, and body text should have different size and emphasis to give better visual structure.

Screenshots

Describe the bug

It's not obvious how to navigate to the Home page once viewing content in one of the four categories.

Originally filed as FLOE-511

You should be your within practice in Facilitate Inclusively section.
It is present in the third point of "try"

• page link - https://guide.inclusivedesign.ca/practices/FacilitateInclusively.html
  

Is your feature request related to a problem?

Currently the site uses Stylus, Foundation 5.5.2, and relies on styles from docs-core. docs-core is essentially a retired project at this point, and the styles in general could be simplified and take advantage of modern CSS features.
We've started to strip out reliance on docs-core by removing the sidebar (see: #75). It's a good opportunity to remove the styling dependency as well.

Describe the solution you'd like

Remove dependencies on third party tools wherever possible, and use latest CSS features that are widely enough supported and needed to simplify and improve styling.

Additional context or notes

Should address the following issues at the same time.

• #66
• #67
• #70
• #71
• #72
• #76
• #80
• #81

In "Activities" under "Cause and effect"
page link - https://guide.inclusivedesign.ca/activities/CauseAndEffect.html

Display preference button is changed to Show/Hide for few seconds when any other page is opened. For example when i click insights button than #2 Show Display preference button is changed to reset and show/hide button and than changes to Show Display Preference

Create a stronger association between categories and content by adding a larger shape icons to header of each individual page to make this association clearer.

Originally filed as FLOE-512

Is your feature request related to a problem?

In #53 we're adding localization support for English and French. This is a simple link toggle being worked on for that issue, but it would be good to use a disclosure widget, incase we have additional locales to support in the future.

Describe the solution you'd like

@greatislander suggested using the disclosure widget (see: #53 (comment) ) and referenced this example https://www.w3.org/TR/wai-aria-practices/examples/disclosure/disclosure-navigation.html

Additional context or notes

Depends on #53

Is your feature request related to a problem?

On occasion, there is a need to have the Design Guide available in a more portable format - this includes print versions, EPUB, and PDF.

Originally filed as FLOE-490

Describe the solution you'd like

Have the ability to generate EPUB and PDF copies of the design guide that can be printed or viewed offline.

In considering a solution, consultation should be made with the designers (like @cherylhjli , @dayotte) about the intended output dimensions, whether the card format is to be maintained, and what to do about long content that does not fit completely on a single double-sided page.

Is your feature request related to a problem?

Add French localization of the "Inclusive Design Mapping Facets" pdf found in the Inclusive Design Mapping activity.

Describe the solution you'd like

Translation provided by @bliz-ward on #77
https://drive.google.com/file/d/19NCagyJlcoqw8G3HsmP_tdEpIxY1Nypm/view?usp=sharing

Is your feature request related to a problem?

Now that @bliz-ward has created French translations for the Inclusive Design Guide, we need to implement multilingual support in our Eleventy configuration.

Describe the solution you'd like

See fluid-project/trivet#48.

Describe alternative solutions you've considered

Not applicable.

Additional context or notes

Not applicable.

Describe the bug

The Three Dimensions of Inclusive Design content box on the home page should have larger left and right padding on mobile, and the header text should be larger (it is currently too similar to the body text size).

Originally filed as part of FLOE-478

Screenshots

Describe the bug

Some links in the Design Guide are using http:// as the protocol and should be using https:// instead.

For example http://www.w3.org/2000/svg should be https://www.w3.org/2000/svg, and
http://build.fluidproject.org/infusion/demos/uiOptions/ should be https://build.fluidproject.org/infusion/demos/uiOptions/.

Is your feature request related to a problem?

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like

A clear and concise description of what you want to happen.

Describe alternative solutions you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context or notes

Add any other context or screenshots about the feature request here.

Describe the bug

Mismatch(in activities in why section) is not alligned properly in mobile screen with disability.

Screenshots

Smartphone / tablet

• OS: [e.g. andorid 6.1]

Describe the bug

Currently the UIO panel is restricted to the width of the content area of the Guide site. It would be better to take advantage of the full width of the browser window if possible.

Originally filed as FLOE-513

To reproduce

Steps to reproduce the behavior:

1. Go to https://guide.inclusivedesign.ca/practices/collaborate
2. Expand the UI Options panel
3. Resize window past 80rem
4. Notice how UIO stays within the 80rem max.

Screenshots

Screenshot of UIO stuck within the 80rem width.

Additional context or notes

A solution would be to add a new parent container to docs-template-container and move UIO that new parent container.

Describe the bug

The hamburger menu on mobile shows and hides in an unexpected manner. Hovering the icon reveals the menu, and selecting the hamburger menu while the menu is showing does not hide the menu.

Originally filed as FLOE-477

To reproduce

Steps to reproduce the behavior:

1. Go to https://guide.inclusivedesign.ca/
2. Resize the client so the hamburger menu appears
3. Hover over the hamburger icon
4. notice the menu appears without any user action and the menu does not hide if selecting the hamburger menu icon.

Expected behavior

The hamburger menu icon should behave like a toggle to show and hide the menu.

Describe the solution you'd like

We've been using Matomo for our site analytics, however, the guides site currently isn't tracked and should be added.

Is your feature request related to a problem?

With the localization work, the front page and other elements on the site will also require French translation.

The following items require translation:

• Site name "The Inclusive Design Guide"
• Front page content
• Footer content
• "Edit this page on Github"
• "Skip to Content"
• "Insights"
• "Tools"
• "Practices"
• "Activities"
• "Home"

Related to #53

Is your feature request related to a problem?

As a prerequisite for further updates, this website should be converted from Docpad to Eleventy.

Describe the solution you'd like

Rearchitect the site using fluidic-11ty.

Describe alternative solutions you've considered

Not applicable.

Additional context or notes

Not applicable.

Describe the bug

When the client window shrinks, the categories on the Guide stack from 4 in a row to 3x1, before jumping to a hamburger menu.

Originally filed as part of FLOE-478

Expected behavior

Consider the switch to hamburger earlier to avoid the 3x1 stacking, or get rid of hamburger menu all together and keep the category tabs.

Screenshots

Additional context or notes

Some prototyping may be required to try different approaches which should be reviewed by designers.

Describe the bug

The site currently supports an experimental print feature, attempting to print to a duplex page. However, it has proven to be a bit buggy in practice and dependent on specific printer/driver setup. To simplify the current site structure and ease future development, we should remove this experimental feature and related infrastructure.

To reproduce

Steps to reproduce the behavior:

1. Go to https://guide.inclusivedesign.ca
2. Click on "Print the Guide (experimental)" link
3. Attempt to print the document

Screenshots

When trying to print from Safari 14.1.2 on macOS 11.5.2. It is attempting to print in portrait instead of landscape.

Additional context or notes

A new method for printing and creating portable versions will be addressed in #57

Describe the solution you'd like

The logos are used across every page of the site. The IDRC logo in the header, and the Floe and P4A logos in the footer. Instead of inlining them into every page, we should pull them in as SVG sprites with <use>. If we reference the sprite sheet as an external SVG we also gain the benefit of browser cacheing.

Additional context or notes

We'll need to compile the SVGs into a single SVG sprite sheet. This can either be done manually or we can investigate automated processes.

Additional work may be needed to allow the SVG sprites to be properly styled. This may just involve updating the CSS, or could require some minor changes to the SVG itself. For example CSS custom properties can be used to pull in external styles into an imported SVG.

see: https://css-tricks.com/a-complete-guide-to-custom-properties/#custom-properties-and-web-components-shadow-dom

Describe the bug

Modify/simplify the image used on the Virtuous Cycles page. It is confusing and also some of the text is covered up. The colours are not great either.

See: https://guide.inclusivedesign.ca/insights/VirtuousCycles.html

Originally filed as FLOE-518

Expected behavior

Diagram should have good colour contrast and the diagram's meaning is comprehensible.

Screenshots

Is your feature request related to a problem?

Currently, when an image is selected (e.g. Virtuous Cycles diagram, or Inclusive Design Mapping figures), the image is rendered by loading the image URL in the browser. To go back to the content, one must use the browser's back button.

Originally filed as FLOE-517

Describe the solution you'd like

In some situations, it may be better that the image load in a modal which is displayed in context of the content, and the user selects "Close" or selects outside the modal to dismiss it.

Additional context or notes

This modal implementation will have consequences for accessibility (see Accessible Modal Dialogs). Also these modals may be confusing on mobile devices where the modal takes up nearly 100% of the space (in these situations does navigating back close the image, or does the user have to select "Close?).

Remove the sidebar navigation, and replace with a breadcrumb and landing page navigation. This will bring it in line with redesign of the ILDH, as well as make navigation more intuitive and usable for mobile.

This will address FLOE-511 - "It's not obvious how to navigate back to the home/intro page of Design Guide", and remove older version of Infusion that is included in docs-core library (which we are trying to deprecate).

Mock-up: See comment below
Figma file: https://www.figma.com/file/X0m2dKT90dlPcYVw8VrRYu/Design-Guide-Navigation?node-id=0%3A1

Describe the bug

When listing articles on the Design Guide, the articles should appear in alphabetical order.

Originally filed as FLOE-485

Additional context or notes

Some issues to consider:

• Should ordering be based on their short or long title if both are available, but have different starting letters?
• If alphabetical order is the convention, if article content has a list of links to other articles in the Guide, those should be alphabetically ordered as well.