Please ensure the Google Analtics anonymize IP setting is set to true.

Please ensure the Google Analtics anonymize IP setting is set to true.

stop that flicker on page load

@danprime - Our friends in policy would like to measure how often we incorporate user feedback in our code. One way we can easily do this is everytime we include a feature based on user-feedback we cut another release on GitHub. We did this in VAC (https://github.com/veteransaffairscanada/vac-benefits-directory/releases) and it would be great if we could get a start on this with RCMP as well. Please let me know if you have questions or concerns.

These components should be modified to accept styled-system props to set text & flag colous

Please ensure the Google Analtics anonymize IP setting is set to true.

Please add code climate when convenient

Please ensure the Google Analtics anonymize IP setting is set to true.

Manual testing with a keyboard + voice recognition I am unable to active the language element.
A screen reader user may be able to access this by pulling up a list of links/buttons on the page, but a keyboard user will be unable to do so.

possibly related to Apollo changes in #185

Seems that we're trying to call the API to get the language rather than the cache.

Did you have some thoughts @sleepycat ?

example of usage on second form.

Please ensure the Google Analtics anonymize IP setting is set to true.

Consistent focus color FTW!

Currently we are loading fonts from https://fonts.googleapis.com/css?family=Roboto
Fonts and other assets should be served from the public directory.
External resources like this make our performance dependent on more that one system, make offline development painful, and create trust boundaries that are hard to reason about.

Please ensure the Google Analtics anonymize IP setting is set to true.

I recommend that the green or text on the disabled next button meet a minimum contrast.

Ideally we would not use disabled buttons, and instead would have the button post a proper error message if selected without the proper information being filled in first. It's a good opportunity to improve the user experience.

Here is a good blog post on this by a user tester with a disability.

[https://axesslab.com/disabled-buttons-suck/]

Please ensure the Google Analtics anonymize IP setting is set to true.

Content not included in landmarks
1.3.1 Info and Relationships
HTML5 or WAI-ARIA landmarks are used on the page, but not all content is included.

When using HTML5 or WAI-ARIA landmarks it is best practice to include all content on the page in landmarks. In this way users of assistive technologies can use the landmarks for navigating the page without losing track of content.

Make sure that all content on the page is included in HTML5 or WAI-ARIA landmarks.

How do I meet this criteria?
Use one of the following techniques from WCAG 2:

ARIA11 Using ARIA landmarks to identify regions of a page
These references are taken from the Web Content Accessibility Guidelines 2.0.

It appears that the Google Analytics ID is not being passed into the app.

Please ensure the Google Analtics anonymize IP setting is set to true.

Noticing some issues in the mobile styling of pages, especially on pages with forms

The landing page is longer than the browser window resulting in scroll bars.
The culprit is min-height: calc(100vh - 55px); in src/App.js, but finding an approach to sticky footers that doesn't require fixed pixel heights might be worth exploring.

Currently the identifier visualization used in our prototype is powered by the following data:

{
  "data": {
    "stats": {
      "identifierFlaggingsWithin": {
        "identifier": "555-555-5555",
        "summary": [
          {
            "date": "2019-04-01",
            "total": 1
          },
          {
            "date": "2019-04-02",
            "total": 2
          },
          {
            "date": "2019-04-03",
            "total": 2
          },
          {
            "date": "2019-04-04",
            "total": 1
          },
          {
            "date": "2019-04-05",
            "total": 5
          },
          {
            "date": "2019-04-09",
            "total": 1
          },
          {
            "date": "2019-04-15",
            "total": 1
          }
        ]
      }
    }
  }
}

This data is a naively generated list of days we have data for, rather than a report count for dates within some time period. The result is a misleading chart suggesting continuity that would not actually exist if all the dates were represented.

Suggested fix: modifying identifierFlaggingsWithin to accept start/end dates along with an identifier (it's name suggests that this was the intent of that function anyway):

query {
  stats {
    identifierFlaggingsWithin(startDate: "2019-04-02", endDate: "2019-05-02" identifier: "555-555-5555") {
      identifier
      summary {
        date
        total
      }
    }
  }
}

We may want to limit the date range to something reasonable, but if we do that we might be better off making an explicit query for it:

query {
  stats {
    flaggingsWithinTheLastThreeMonths(identifier: "555-555-5555") {
      identifier
      summary {
        date
        total
      }
    }
  }
}

WAI-ARIA group is missing a name
1.3.1 Info and Relationships
A group created with the WAI-ARIA role="group" or role="radiogroup" is missing a name.

Use either the WAI-ARIA attribute 'aria-label' or 'aria-labelledby' to name the group.

Code

How do I meet this criteria?
Use one of the following techniques from WCAG 2:

ARIA17 Using grouping roles to identify related form controls
These references are taken from the Web Content Accessibility Guidelines 2.0.

get language from browser, and also have a button to switch.

Please ensure the Google Analtics anonymize IP setting is set to true.

The intent is to trigger a compliance API check whenever you app has deployed and ready. Because this is a non-deterministic event, the requirement is for the app to decide when the best point in time for that is.

The compliance watcher application exposes an internal kubernetes endpoint (https://github.com/cds-snc/report-a-cybercrime/blob/master/compliance/watcher-deployment.yaml#L34), which can be triggered by a POST request.

In other words, you need to make a POST request to:

compliance-watcher.symmorfosi.svc.cluster.local:3000/run_compliance

to trigger a compliance run. I would recommend putting it in here or thereabouts:

https://github.com/cds-snc/report-a-cybercrime/blob/master/frontend/src/index.js#L22

No option to skip repeated content
2.4.1 Bypass Blocks
A means of bypassing blocks of content that are repeated on multiple web pages must be provided.

One of the ways to ensure this is to have a link at the top of each page that goes directly to the main content area. (The link should be the first focusable control on the web page and be visible when it receives focus). Such a link is not present on the page. If you have not ensured this by providing this type of links or by other means, this criterion is failed. Another way of ensuring conformance is to provide a heading for each block of content that are repeated on multiple web pages.

How do I meet this criteria?
Use one of the following techniques from WCAG 2:

G1 Adding a link at the top of each page that goes directly to the main content area
These references are taken from the Web Content Accessibility Guidelines 2.0.

VAC implemented this: https://vac-benefits-finder.cds-snc.ca/ please note you can have more then one skip link.

It's a big pain in development (ex if the dev server gets messed up then the app will happily use older, cached content). We should only enable it for production.

Please ensure the Google Analtics anonymize IP setting is set to true.

skips over the breadcrumb links in Firefox on Mac. Chrome works fine. Safari on Mac skips over even more. 😞

refactor the component tests to use react-testing-library

ensure that things work with three languages, not just two
(for example, are we assuming not English === French)