Test HTML with CSS

[thewatermethod]

Description of change

One of my little projects for this year is to add some additional automated accessibility testing. Inspired by the blog post linked in the file, I've added the basics of some "testing accessibility in HTML via CSS"

This is a small feature that allows developers to test accessibility by setting a local environment variable which will produce ugly red borders around inaccessible elements.

We can expand it further using the parent project, revenge.css .

How to test

In frontend/.env set
REACT_APP_INCLUDE_ACCESSIBILITY_CSS=false
to
REACT_APP_INCLUDE_ACCESSIBILITY_CSS=true

and restart your frontend app.

You will see the red error boxes around the links-as-buttons on the /landing page AR table

Issue(s)

Checklists

Every PR

• Meets issue criteria
• JIRA ticket status updated
• Code is meaningfully tested
• Meets accessibility standards (WCAG 2.1 Levels A, AA)
• API Documentation updated
• Boundary diagram updated
• Logical Data Model updated
• Architectural Decision Records written for major infrastructure decisions
• UI review complete

Before merge to main

• OHS demo complete
• Ready to create production PR

Production Deploy

• Staging smoke test completed

After merge/deploy

• Update JIRA ticket status

[AdamAdHocTeam]

Seems to work as I saw the column headers on the AR page with a red border.

Some thoughts:

• How does this determine accessibility issues in our code (does it follow a standard)?
• Can we adjust certain rules (like linters)?
• Are we planning on writing tests that would check for the bad CSS?
• Will this slow the app in any way?

I would also run the by @kryswisnaskas to get her opinion before moving forward

[thewatermethod]

@AdamAdHocTeam

How does this determine accessibility issues in our code (does it follow a standard)?

Any rules we add we be in the attempt to validate to WCAG AA & AAA.

Can we adjust certain rules (like linters)?

We write the tests

Are we planning on writing tests that would check for the bad CSS?

These are the tests, the premise is that the CSS tests the HTML

Will this slow the app in any way?

No, it's only present if you turn on the variable in the env. The idea is that this is a tool for code review, not something that gets shipped to production.