Accessibility notes

[obr42]

Notes on using @axe-core/react tooling to meet WCAG level AA (mid range) compliance - alerts that still exist in the React app, and 18F Checklist for WCAG 2.0 AA compliance

Global Components

Tables

Most pages contain a table. These findings are common across all/most tables.

• Elements must have sufficient color contrast
  • Tooltip - see tooltip check note
  • Sort Icon & Label - alerts when hovered over a non-sorted header. See color check note
  • Highlighted text in light mode #352 When filter chip is highlighted in light mode, text should be white so it is still visible
• All page content should be contained by landmarks
  • Tooltip - Unsure how to fix, see tooltip check note
  • Visible columns selector - everything in it triggered a separate alert
  • Rows per page drop-down
• Keyboard Navigation
  • Accessible names in tables #353
  • Modals should have a close button #354
  • Adjust tooltips for accessibility #355 Tooltip about enter/click to submit filter should remain until focus is lost

Snackbar Alerts

• Elements must have sufficient color contrast
  • Error, light mode - see color check note
  • Info , light mode - see color check note
  • Warning, light mode - see color check note
  • Success, light mode - see color check note
• Snackbar alert auto-dismiss timing #356 Alerts should not automatically close without user interaction, or this feature should be configurable

Inline Alerts

• none

Specific Pages

Nav Drawer/App bar

(these "show up" on every page as the nav bar is always present, hidden/closed or not)

• All page content should be contained by landmarks
  • Area surrounding list item text is missing role for some reason
  • Admin menu section, no further context
  • Need to put whole navigation drawer into the nav landmark see 18F checklist for details
• Certain ARIA roles must contain particular children
  • Components with ARIA roles must have specific children #301 The two List components are flagged - This is because the roles are wrong. They are button/link when they should be menuitem
• Heading levels should only increase by one
  • Heading level for user greeting #300 If logged in, the Hello, <user>! in the top App bar is being rendered as h6 level, despite having variant="subtitle1".
• Keyboard Navigation
  • Keyboard navigation #357
  • Improve Navigation Bar #358
  • Optional Nav Bar improvements #359
• Color Contrast
  • Highlighted text in light mode #352 When menu item is highlighted in light mode, text and icons should be white so it is still visible
• ARIA
  • ARIA labels in navigation bar #360
• Text spacing
  • Improve Navigation Bar #358 The version/docs part clips when applying the test's styling (increased letter spacing) - text should wrap instead of clip

Systems Index

• Table alerts

Command Index

• Elements must have sufficient color contrast
  • Breadcrumb links - see color check note
• Table alerts

Command View

• Heading levels should only increase by one
  • RJSF styling for 508 compliance #302 Its the labels for the rjsf form that have a divider bar under them - can't figure out how to apply a class name override the docs are not helpful
• Elements must have sufficient color contrast
  • Breadcrumb links & input labels - see color check note
  • JSON card - see JSON card note
• Buttons must have discernible text
  • RJSF styling for 508 compliance #302 Remove message from parameter list is just a - icon with no aria-label, cannot easily modify as it is a rjsf form stub
• Keyboard Navigation
  • Adjust tooltips for accessibility #355 Tooltips follow mouse too closely instead of anchoring to the text - when using keyboard navigation they all appear in the top left corner of the page
  • Keyboard navigation #357 Cannot navigate to remove items from a list ex echo_list_model list of strings

Requests Index

• Table alerts
• Form elements must have labels
  • Date-time picker - see widget check note
• Elements must have sufficient color contrast
  • Links - see color check note
• Keyboard Navigation
  • Difficult to use the date picker modal, but can type in a date directly but it won't apply unless you type in a full date - time - AM/PM

Notes:

• Table header buttons have inconsistent styling #303 The Refresh button is not styled to match the new Jobs table header buttons

Request View

• Elements must have sufficient color contrast
  • Links - see color check note
  • Request View page toggle #305 Toggle for Formatted - The alert is for the text, which passes. However the toggle icon itself currently does NOT pass color contrast requirements for either theme, very difficult to style this Switch component beyond the props provided by MUI which only give color options of success, info, error, primary etc which none are contrast enough to our chosen theme colors. Could override the actual color itself in the theme settings I believe, but would affect all of the UI not just the switch (which may be fine?)
  • Tooltip - see tooltip check note
  • JSON card - see JSON card note
• Keyboard Navigation
  • Keyboard navigation #357 can't access the tooltip on the STATUS with only keyboard
• Request view loading button #361 Loading button (inplace of Refresh) is difficult to read because of contrast but that may be ok

Notes:

• Fix Request View's Remake Request button #306 Remake Request button, dark mode - nearly impossible to see when disabled, color is just alpha over the background, could not quickly figure out how to adjust color
• Navbar Drawer jumps on Request View #307 Sometimes the nav bar spacing becomes off and icons are squished left/together and possibly slightly smaller sized
• Fix Request View's Remake Request button #306 If I close the Parameters or Output card, the Remake Request button becomes disabled until refresh

Jobs Index (Scheduler)

• Table alerts
• Elements must have sufficient color contrast
  • Links - see color check note
• Form elements must have labels
  • Date-time picker - see widget check note

Notes:

• Dropzone modal bug #308 After making necessary header modifications, clicking Import modal reverts styling on main page. Seems like this is a bug in the material-ui-dropzone code. The repo seems abandoned. Try switching to a forked repo that is supposed to support MUI5 (which we use).

Choose System (Create Job)

• Table alerts
• Elements must have sufficient color contrast
  • Global filter, dark mode - see color check note
• Keyboard Navigation
  • Keyboard navigation #357 Can't access x button in global filter

Notes:

• Table header buttons have inconsistent styling #303 The Cancel Scheduling button is now styled differently than the buttons on the main Jobs View page. In dark mode it is very difficult to see (despite contrast ratios being ok)

Choose Command (Create Job)

• Table alerts
• Elements must have sufficient color contrast
  • Global filter, dark mode - see color check note

Notes:

• Table header buttons have inconsistent styling #303 The Cancel Scheduling and Back buttons are now styled differently than the buttons on the main Jobs View page. In dark mode it is very difficult to see (despite contrast ratios being ok)

Create Job form page

• Elements must have sufficient color contrast
  • Breadcrumb links & input label - see color check note
  • JSON card - see JSON card note
• Heading levels should only increase by one
  • RJSF styling for 508 compliance #302 Its the labels for the rjsf form that have a divider bar under them - can't figure out how to apply a class name override the docs are not helpful
• All page content should be contained by landmarks
  • Any drop-down selection, ex for Trigger Type

Job View

• Elements must have sufficient color contrast
  • Links - see color check note
  • JSON card - see JSON card note

Update Job

• Elements must have sufficient color contrast
  • Breadcrumb links & input label - see color check note
  • JSON card - see JSON card note
• All page content should be contained by landmarks
  • Any drop-down selection, ex for Trigger Type
• Heading levels should only increase by one
  • RJSF styling for 508 compliance #302 Its the labels for the rjsf form that have a divider bar under them - can't figure out how to apply a class name override the docs are not helpful

Notes:

• Update Job form spacing #309 Need space between JSON cards and reset/schedule button group
• Update Job form spacing #309 To match Create Job page, form inputs should be slightly inset and button group should align with input (cards spacing is ok)

Admin Gardens

• None

Notes:

• Spacing between buttons at top of page #310 Needs space between header buttons

Create Garden modal

• Elements must have sufficient color contrast
  • Tooltip - see tooltip check note
• All page content should be contained by landmarks
  • Dark mode only. All form components, does not alert for modal itself or Add Header and Create Garden buttons.
  • Tooltip - see tooltip check note

Notes:

• Controlled input when creating garden #311 Setting host/port for first time throws A component is changing an uncontrolled input to be controlled DevTools error. This happens when a value tied to an input is initialized as undefined and then later defined when the user types in something. Code smell, should not impact functionality
• Create garden form styling #312 Add header button difficult to see in dark mode
• Create garden form styling #312 Lots of empty space at the bottom of the modal, outside the square border around the form
• Create garden form styling #312 Modal styled differently than other modals

Garden Info View

• Elements must have sufficient color contrast
  • Input labels - see color check note

Notes:

• Create garden form styling #312 Add header button difficult to see in dark mode

Admin Systems

• Elements must have sufficient color contrast
  • Select Namespace label - see color check note
  • System Card description, light mode - see color check note
  • Tooltip - see tooltip check note
• All page content should be contained by landmarks
  • Tooltip - Unsure how to fix, see tooltip check note
  • Each menu item for instance menu
  • Select Namespace menu content
• Interactive controls must not be nested
  • Admin systems 508 changes #313 Checkboxes inside select drop-down
• Form elements must have labels
  • Admin systems 508 changes #313 Checkboxes inside select drop-down
• ARIA input fields must have an accessible name
  • ARIA input fields must have an accessible name #314 Instance card version select drop-down MenuItem - adding aria-label to MenuItem or Alert did not resolve. See MUI docs, similar dilemma as widget check note
• Keyboard Navigation
  • Highlighted text in light mode #352 Highlighting the namespaces selection should have white text in light mode

Notes:

• System Admin card ellipsis #315 System card title when truncated, the ellipsis is the wrong color (can't even see it in light mode because it is black on dark blue)

Admin Blocklist

• Table alerts
• All page content should be contained by landmarks
  • Select filter menu options
• ARIA input fields must have an accessible name
  • ARIA input fields must have an accessible name #314 Select filter menu options - adding aria-label to MenuItem did not resolve. See MUI docs, similar dilemma as widget check note

Add command modal

• Form elements should have a visible label
  • Command Blocklist 508 compliance #316 Checkboxes

Login

• Elements must have sufficient color contrast
  • Input labels - see color check note

Notes:

• Login submit button in dark mode #317 Dark mode, submit button is difficult to see

Admin Users Index

• Table alerts
• Elements must have sufficient color contrast
  • Links - see color check note

Notes:

• Refresh bad on Admin User page #318 Refresh triggers 404 and get sent back to Systems page (logged in as Admin)

Sync Users Modal

• Table alerts

Notes:

• Sync Users modal table #319 Table has an extra row - probably just needs disable filters flag (... turns out there is no flag to turn it off, it only turns off if Global filter is turned on)

Add User Modal

• Elements must have sufficient color contrast
  • Input labels - see color check note

User View

• Table alerts
• Elements must have sufficient color contrast
  • Input labels - see color check note
• IDs used in ARIA and labels must be unique
  • User View Roles IDs #320 Have more than 1 role
• All page content should be contained by landmarks
  • Select filter menu options

Notes

Manually checked color contrast

Colors were manually checked using color contrast analyzer and verified to meet level AA contrast ratios, but the color choice does not meet level AAA small text contrast ratio (generally meets AAA large text ratio). The @axe/core-react alert is still going off for some reason despite axe docs saying AAA is disabled by default. Alert may also be due to opacity levels or for some other reason that requires manual checking (which is now done)

Tooltip reporting inconsistencies

The tooltip sometimes alerts, sometimes does not. Sometimes alert is for colors which do not meet any WCAG contrast ratios, but are not colors we have explicitly set for the tooltip so unsure where they come from. Maybe the reporter is catching transition in/out color?

Additionally, sometimes there is an alert for "All page content should be contained by landmarks" indicating that the tooltip is not inside a landmark. Unsure that this is fixable as the tool-tip rendering is handled by MUI.

JSON Cards

• JSON Card 508 compliance #321
• Keyboard navigation #357 No keyboard navigation at all

The type display that is tiny font of int, string, etc needs to be a darker shade than it currently is presenting since it is so small. Even with changes on this branch, the font does not pass. This color is set as an offset from the theme color for the actual data value that we set and provided to RJV. The only way we could make this color pass is to darken the overall color - but then it darkens/dulls out the overall presentation as the color is linked to the larger text. Some alerts may be because it is indicating manual check required due to opacity set by RJV on elements

Date-time-picker widget

• Date-time picker 508 compliance #304

For some reason labels are flagged as wrong/missing. Adding aria-label or aria-labelledby adds "Elements must only use allowed ARIA attributes" flag but doesn't remove the "Form elements must have labels" flag. Can remove flags by adding label (and InputLabelProps={{shrink: true}} to make the label stay superscript-ed) but can't find a way to then hide the label and it is incompatible with existing ticket to remove extra space around the filter inputs to have the label showing. Adding InputLabelProps={{'aria-label': 'Start date'}} did not remove the flag either.

Other

• Ticket made to handle all landmark alerts since they will all be related Landmarks for 508 Compliance #299
• Form input helper text #362 Form inputs with helperText might not be correctly linked to the input