CRDCDH-633 Accessibility Audit & 508 Compliance

[amattu2]

Overview

This PR audits our frontend implementation for any accessibility or 508 issues and fixes them. The specific changes are detailed below.

This audit was partially supported by the chrome extensions:

• Deque axe DevTools
• WAVE Evaluation Tool

Color Scheme Audit

“Start a Submission Request” button
color: #fff
background: #22A584

“View” submission request button
color: #156071
background: #74D9E7

Approved “Review Comments” submission request button
color: #0B7F99
background: #1976D2

“CRDC Submission Request” in “Submission History” dialog
color: #98A7C6
background: #2E4D7B

Questionnaire Switch (No / Yes toggle)
disabled color: #89A2A7 (The color thats shown when the option is not picked)
“Save” submission request button
color: #fff
background: #22A584

Data Submission “Data Upload” table headers
color: #fff
background: #5C8FA7

“No Data Found” message on tables (Questionnaire, Data Upload, Organizations, Users, ….)
color: #AAA
page backgrounds: #fff

Data Submission “Status” label (above the actual status)
color: #1D91AB
background: XXX (image)

“Data Submission Request” in “Data Submission History” dialog
color: #98A7C6
background: #2E4D7B

“User Profile” header text on User Profile
color: #fff
background: XXX (image)

“Cancel” button on Edit User page
color: #949494
background: transparent

“Add Organization” button on Manage Organizations
color: #fff
background: #22A584

“Edit Organization” header text on Organization Management
color: #fff
background: XXX (image)

“Cancel” button on Edit Organization page
color: #949494
background: transparent

Change Details (Specifics)

• Add aXe HTML audit to DEV tiers
  • This audits the HTML output of our React App. It doesn't quite work with React Router, so you need to reload the page any time you navigate to a different URL in order for the audit to work
• Add A11Y eslint rule
  • This does a very basic audit of our code for potential issues.
• Add aXe Jest integration with basic coverage of core elements
  • Home page
  • Header
  • Footer
  • 404 Page
• PageBanner did not provide a L1 heading
• PageBanner did not use sequential headings
• Page loader did not have a aria label
• Gov. shutdown header did not have a unique label
• Invalid aria-selected on ProgressBar link
• Invalid h6 on StatusBar titles
• User Name / Login was not contained in a UL
• Copy Submission ID had no content and needed a label
• Missing label relationships on User Profile
• Page headings should not be empty (PageBanner)
• Missing label relationships on Organization Edit
• All footers rendered causing duplicate labels
• TablePagination rows per page input missing label
• Hidden checkboxes on sect. A/B missing labels
• TextInput missing label relationship
• Tooltip button does not have discernible txt
• SwitchInput missing label relationship
• SelectInput ProxySelect missing label relationship
• DatePickerInput missing label relationship
• FormGroupCheckbox proxy c-box missing label relationship
• File Types table missing aria-labels on all fields
• Data Submission metadata upload input missing aria-label
• API Token Dialog copy token button missing label
• API Token fake input missing label
• User List filters missing aria-label relationships
• User Edit missing aria-label relationships
• Organization List filters missing aria-label relationships
• Organization Edit missing aria-label relationships
• Questionnaire ProgressBar used an invalid DOM structure (ul > a instead of ul > li > a)
• Questionnaire ListView loader missing aria-label
• Data Submissions ListView loader missing aria-label
• Data Submissions Batch Table loader missing aria-label
• Organization List View loader missing aria-label
• User List View loader missing aria-label
• Footer newsletter asterisk did not meet min contrast ratio
• Questionnaire Section D Remove File Type button empty with no label
• Fix all header sizes being rendered at the same time
• Multiple header links with identical IDs

Related Ticket(s)

https://tracker.nci.nih.gov/browse/CRDCDH-633

[amattu2]

Still need:

• Updated color scheme
• Massive DMN update

[Alejandro-Vega]

Please add missing @types/jest-axe dependency to avoid type issues. See https://www.npmjs.com/package/jest-axe

[Alejandro-Vega]

LGTM!