Accessibility Integration

We are using the cypress-axe plugin to help us catch accessibility issues in the UI.

Current State

Currently we have 1 test covering a few sections in the owner change page inside cypress/e2e/accessibility/ownerChange.cy.ts.

How to run / view accessibility errors

They will run automatically when running cypress. If an accessibility test errors it will log the information in the console log viewable within cypress. Click on the -ally error! and in the console you will see: the error id (i.e. aria-allowed-attr), impact, tags, description, help information on how to fix it including a link for more detailed info on how and why this is an error, and the node information including which element is causing the issue.

Discovery

We can configure cypress-axe to run specific checks or ignore specific checks based on rule id, tags and impact, and we can implement this across all tests and per check so there is lots of flexibility. For now we are going with the default configuration, but as we run into new challenges updating the UI for accessibility we may need to use this for certain parts of the application.

Documentation on configuring axe: https://github.com/component-driven/cypress-axe?tab=readme-ov-file https://www.deque.com/axe/core-documentation/api-documentation/#api-name-axeconfigure

Future

We will be incrementally updating the UI pieces / and tests in btr-main-app to pass the 'out of the box' accessibility checks that the cypress-axe plugin provides. Once a page is passing all accessibility checks we can replace the section by section tests with checks covering the full page (this will catch new pieces added to it in the future).

Proposed future stories/tickets for btr-main-app for accessibility tests:

• owner change (1st page):
  • datepicker select element
    • fix pre-expansion errors
    • after expanding the datepicker
  • after expanding the form (regular + inside table)
    • form validations active on each element in the form
    • form filled out
    • address dropdown active
    • countries of citizenship dropdown expanded
    • not possible to obtain data checkbox selected
  • summary table
    • populated table fix existing errors
    • empty table
• review/confirm (2nd page)
  • with validation error state on effective date / folio / certify
  • summary table with no data, data, ceased data
  • before folio / certified are entered/checked
  • with effective date / folio / certify entered
• header (expand menu, logged in/out)
• breadcrumb
• footer
• business details
• button layout
• fee summary (with/without active fees)