AddingNewUIComponents

Adding new npm dependencies

When adding any new visualization npm dependencies to the dashboard or client-display, where appropriate, try to select libraries that have addressed accessibility issues. For all new npm dependencies added to the dashboard or client-display, try to choose the smallest library that satisfies the desired capability. If adding a dependency on a large library, try to import only the necessary components (for example, don't import all of bootstrap-vue, only import the components used).

Accessibility/508 Compliance

When adding new features/ui components to the dashboard or client-display, accessibility issues must be taken into consideration. The topic is substantial but some basic items to address:

• Don't mess with the tabindex, leave it at 0.
• Ensure that all links and buttons have text. When displaying text is not desired for visual presentation, this can be accomplished by using an aria-label attribute in some cases but if using a component from a 3rd party library you may need to rely on creating text wrapped with the .sr-only css class.
• Ensure that all input fields have a label - this can be accomplished via an aria-label attribute on the input field if a visible label is not desired.
• Form validation
  • Ensure that input fields have aria-describedby and aria-errormessage attributes that reference the id of the associated error message container for that field. Also include an aria-invalid attribute based off the error state of the input field (examples in existing dashboard components).
  • Ensure that labels reference the id of the input field via the for attribute
• Color contrast - see WebAIM for details, but this will probably be addressed in response to failed e2e tests or browser extension validations.
• Ensure that focus is returned to any buttons that trigger a dialog or action that does not transition to a new view. This can involve some coordination between components, for example Badge.vue and EditBadge.vue

Automated Accessibility Tests

Primarily we rely on the cypress-axe plugin via the customA11y command. If new UI features or components are being added, make sure that they are either covered by the existing tests in accessibility_specs.js or add new tests to accessibility_specs.js to ensure that those components are covered.

Tools

• Note that Wave and Axe extensions may report more issues than the cypress accessibility tests. This is generally due to issues with 3rd party libraries that are out of our control. Configuration for the cypress-axe integration ignores certain elements that are out of our control
• Wave browser extension
• Axe browser extension
• Color Contrast Checker