As a user of the community forums, I need to feel that the community is a safe and supported space for me to participate in. I need to know that there are rules in place to discourage and handle bad behaviour.

Each of the illustrations below needs to have their colours updated to match the new colour palette. They can then be added to the appropriate page on the documentation site.

• Get started
• Community
• Support

RE: #54

The tabs for component code examples (HTML/React) are missing a programmatic way to determine state. (A screenreader does not know what the link does or what has opened or closed elsewhere on the page)

See. .tab-item--active

Notes.

• WCAG example of tabs

We need unfurl support.

Best sum of them all would be:

<link rel="apple-touch-icon" sizes="180x180" href={ _relativeURL('/assets/apple-touch-icon.png', _ID ) }/>
<link rel="icon" type="image/png" sizes="32x32" href={ _relativeURL('/assets/favicon-32x32.png', _ID ) }/>
<link rel="icon" type="image/png" sizes="16x16" href={ _relativeURL('/assets/favicon-16x16.png', _ID ) }/>
<link rel="manifest" href={ _relativeURL('/assets/manifest.json', _ID ) }/>
<link rel="mask-icon" href={ _relativeURL('/assets/safari-pinned-tab.svg', _ID ) } color="#06262d"/>
<link rel="shortcut icon" href={ _relativeURL('/assets/favicon.ico', _ID ) }/>
<meta name="msapplication-config" content={ _relativeURL('/assets/browserconfig.xml', _ID ) }/>
<meta name="theme-color" content="#ffffff"/>
<meta name="robots" content="index, follow" />
<meta name="author" content="Dominik Wilkowski" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Cuttlebelle" />
<meta name="twitter:description" content="The react static site generator that separates editing and code concerns" />
<meta name="twitter:name" content="cuttlebelle" />
<meta name="twitter:image" content="https://cuttlebelle.com/assets/img/cuttlebelle.jpg" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Cuttlebelle" />
<meta property="og:site_name" content="Cuttlebelle" />
<meta property="og:description" content="The react static site generator that separates editing and code concerns" />
<meta property="og:image" content="https://cuttlebelle.com/assets/img/cuttlebelle.jpg" />
<meta property="og:url" content="https://cuttlebelle.com/" />

Expected

Result

(Screenshot: iOS v8, Safari)

Description

What happened

In the code tab for the direction links component, the code examples reference the breadcrumbs component, giving the wrong instructions to the user.

What I expected to happen

The code should correctly reference the direction link instructions

Reproducing

1. Navigate to /components/direction-links/code
2. Scroll to exports

See screenshot

Expected.
All 24 components live/released.

Result.
Only 2 components.

(Screenshot: iOS v8, Safari)

Description

What happened

The code examples for components only show the default colour scheme. Instructions for how to apply the --dark and --alt colour schemes are not provided.

What I expected to happen

I should be able to see how the dark and alt variations for each component appear in HTML and React so I can copy them directly from the site

Reproducing

1. Navigate to any component
2. Scroll to the code examples for any variation of the component

See screenshot

Related to this discussion on the community forum.

There was some confusion about why CTA links weren't considered a button variation. There was an explanation provided which would be good to include in the rationale section of the CTA component to provide the same information to other users of the design system documentation site.

Our visual regression testing tool is currently owned by Alex in his personal GitHub account (https://github.com/alex-page/pizza). As we're going to be using this tool within the DTA, we've decided to fork the repo into the GOV.AU GitHub organisation.

This will allow us to work with the tool at the DTA, track issues on our organisation's Kanban board, submit PRs against the project, and pull in any updates.

Expected
Released Component Cards to be arranged in a grid.

Result
Desktop: Fourth card missing.
Mobile: Second card missing.

(Desktop Screenshot: Safari 11.0.2
Mobile screenshot: Chrome on iOS.11)

Possibly also an issue in UIKit?

Description

What happened

@TrebBrennan inspected the colours in the example and they didn't line up with the copy pastable section.

What I expected to happen

Colours should be the same.

Reproducing

Steps to reproduce:

1. Go to the core module
2. In the colour example the colours in the example are different to the colours in the copy paste

Component navigation looks like tabs but does not behave like tabs.

Expected
1 - Scroll past the component intro .componentheader__body and status box .componentheader__statusbox
2 - Click 'discussion' link.
3 - page updates without scroll.

Result
3 - page updates and scrolls to top, user must scroll past intro content again.

Possible solutions
Understanding that we don't intend to implement JS style tabs, maybe either:

• remove component intro and status box from Component pages that are not 'overview'
  or
• Link component navigation to page+anchor eg. /discussion#nav

Expected.

Result.

(Screenshot: iOS v8, Safari)

RE #54
As per title, there is an unnecessary nav element in the footer. See .au-footer__end

This could possibly cause accessibility problems, or at the very least it's not semantic.

This seems to be inherited from the UIKIT footer component via<AUfooterEnd>
https://github.com/govau/designsystem/blob/master/src/layout/structure/footer.js#L24

Expected
About 3unit between the components and "Your build" heading.

Result
No space.

(See in multiple browsers)

Needs space between each section and the text for them each

As a user who is prototyping in code. I need to know that .no-js is required on the parent object so that the JS will work properly.

Assuming that people don't read all the docs, how might we resolve this?

Ideas

• Right now we say [ If .no-js change to .js ]
  maybe we could say [ If JS is enabled, add .js then remove .no-js ]
  So that if the .no-js class is missing it's not a show stopper... But that would mean people might forget to add the .no-js class because things seem to work fine for them, soooo;

• Maybe we throw a console error if .no-js is not found but JS is enabled?

As a user on the documentation site looking to use a component from the UI-Kit, I want to know that browsers you've tested these components on so that I can have confidence that it works, and know what bugs not to report.

We have a checklist on the UI-Kit README.md, maybe we can just link to this as a start.

What happened

The discobot on Discourse is a little too cheeky for the tone we're trying to set on the communities of practice forum.

We should update it to be more appropriate and provide more relevant information for new members of the community.

Change

• Change img
• Change name
• Change intro message

How

https://meta.discourse.org/t/how-to-update-discobot-messages/75693
https://meta.discourse.org/t/customize-discobot-user/63233

As a user of the design system documentation site, I need to understand the purpose of the focus state. We should clearly explain that it's done to meet WCAG 2.1: 1.4.11

As a user searching for something I want to clearly know that something was not found so that I know it's not just a broken search, and I can try a different keyword.

What happened

When I perform a search on the design system documentation site and no results are returned, the experience isn't great. There's just an empty page with no results displayed. Did the search actually work? Was there an error? ¯_(ツ)_/¯

What I expected to happen

I should be presented with a nice little message that tells me something that everything worked as expected, there just weren't any results returned. Perhaps something like:

"No results returned for "

Reproducing

1. Go to the design system documentation site
2. Perform a search for an empty string, or something like "djfhaskdjhflsakdjhf"

RE: #54

What happened

On mobile, when the main-menu is closed (items are hidden) the menu items can still receive focus.

Expected

Focus skips over hidden menu items.

Notes

• Seems to be caused by height: 0 on .js .au-accordion__body.au-accordion--closed Should be display:none
• See also #80

Expected
Demos to show components with non-standard colours.

Result
Demos show standard colours.

(Screenshot: Safari 11.0.2, also seen on iOS.11)

As someone who wants to contribute something to the design system (code, design artefacts, research) I need to know what's expected of me so I can provide the correct information to the core team.

I need to know what guidelines I'm expected to follow, what format my contributions should be in, how long it should take for someone to get back to me.

I'm essentially volunteering my time to make the design system better for everyone, so this needs to be laid out clearly so I can make my contributions with the least amount of hurdles to clear.

As someone participating in discussions on the Discourse community forum, I need to understand what personal information is collected, where it might be stored, and how it might be used. I can then make an informed decision as to whether or not I want to participate in the community discussions.

Expected:
The external-link icon should use the link colour.

Result
See screenshot, icon is using normal link colour.

RE #54

The collapsable Components sidebar (accordions) use an <a> tag, however it's href is not valid as it's purely used for a JavaScript function.

Would it be more appropriate and semantic to use a <button> tag?

Description

What happened

If a user tries to scroll away when viewing the keyboard accessibility examples, the screen will automatically be scrolled back to the element that is being focused on.

Because we automatically tab between elements, the focus is constantly changing and the screen will constantly try to return to that area, trapping the user until they press tab to break the automatic tabbing.

What I expected to happen

If I try to scroll away from the keyboard accessibility area of a component, I should be allowed to. The automatic tabbing should stop as soon as I scroll away from that section of the screen.

Reproducing

1. Navigate to /components/buttons/accessibility
2. Go to keyboard accessibility
3. Click show tabbing
4. Try to scroll away from the section

See video

Background gradients and shades are leftover from previous design

govau/design-system-components#309

Description

What happened

When a user expands the "more contributors" button on a components page, it has no information for accessibly as to what it does or what's changed in the DOM. The button also disappears and gives the user no way to collapse the contributors again

What I expected to happen

Needs discussion. One option might be for it to behave similar to an accordion, in that there's a way for the button to expand and collapse the contributors and provide the correct information to screen readers

Reproducing

1. Navigate to any component
2. Use tab to put the focus on the "more contributors" button (usually something like +6
3. Press space to expand the contributors list

We need to decide on the metrics we're going to display in the new metrics component for the design system documentation site.

Once we've agreed, the component should be updated to fetch the appropriate stats automatically.

Expected

Result

Note: I assume this and #5 are related to odd flex-box support.

Expected.
4 sections under "How you can contribute"

• Help with design
• Help with planning
• Help with code
• Help with usability

Result.
Only 1 section. "Help with design"

(Screenshot: iOS v8, Safari)

As seen in ie8.

jumping scroll position is a big no no for sane people :)

Prior to the official launch on April 23rd, we should do a final a11y pass over the design system documentation site.

We've allocated 1 day for testing + additional time as needed to fix any high priority a11y issues that are uncovered.

WAVE test
https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

Keyboard test
Use keyboard navigation for all elements on page. No keyboard traps.

Screenreader test
Use apple screen reader to read pages. mostly looking for weird text or missing explanations.

• WAVE test - Home
• WAVE test - Content page
• WAVE test - Components page
• WAVE test - Component / button
• WAVE test - Download page
• Keyboard test - Home
• Keyboard test - Content page
• Keyboard test - Components page
• Keyboard test - Component / button
• Keyboard test - Download page
• Screenreader test - Home
• Screenreader test - Content page
• Screenreader test - Components page
• Screenreader test - Component / button
• Screenreader test - Download page

https://gold.service.gov.au/components/header/

Currently:

The header at the top of the page. Usually contains an Australian Government Crest, logo and navigation.

Expected:

The header at the top of the page. Usually contains a Commonwealth Coat of Arms, branding and navigation.

Refer:
Style manual, 6th ed. p294:

The arms are sometimes incorrectly referred to as the ‘crest’. In the language of heraldry, a crest is ‘a device above the shield and helmet of a coat of arms’. In the Commonwealth Coat of Arms, the crest is the wreath and the seven-pointed Commonwealth Star.

Time box to 1 hour discussion

We need to decide what types of engagement metrics we want to track for the design system documentation site and downloads / installations for the UI-Kit.

Expected.
Consistent layouts.

• 'Documentation link' not to overlap with 'component name'
• 'Dependencies' to align with 'component name'
  

Result.

(Screenshot: iOS v8, Safari)