Getting the most out of jest-axe

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Most important thing With a little more effort jest-axe can be a lot more useful

Slide 3

Slide 3 text

Agenda 1. What is jest-axe? 2. How do we set it up? 3. What could we test? 4. What else could we do?

Slide 4

Slide 4 text

Steve Barnett Technical Digital Accessibility Analyst at Xero Wellington, Aotearoa New Zealand naga.co.za

Slide 5

Slide 5 text

Agenda ! 1. What is jest-axe? 2. How do we set it up? 3. What could we test? 4. What else could we do?

Slide 6

Slide 6 text

What is jest? “Jest is a delightful JavaScript Testing Framework with a focus on simplicity.” — jestjs.io

Slide 7

Slide 7 text

What is jest-axe? Custom Jest matcher for axe for testing accessibility expect(1 + 2).toBe(3);

Slide 8

Slide 8 text

Agenda ✔ 1. What is jest-axe? ! 2. How do we set it up? 3. What could we test? 4. What else could we do?

Slide 9

Slide 9 text

# ! Installation $ npm install --save-dev jest-axe

Slide 10

Slide 10 text

// ! Configuration. Option 1: per component // component.test.js import { axe, toHaveNoViolations } from 'jest-axe'; expect.extend(toHaveNoViolations);

Slide 11

Slide 11 text

// ! Configuration. Option 2: with helpers // testutils.js import { configureAxe } from 'jest-axe'; const axe = configureAxe({ rules: { region: { enabled: false } } }); export default axe;

Slide 12

Slide 12 text

Axe manifesto "It returns zero false positives" — deque.com/axe (axe is probably right)

Slide 13

Slide 13 text

// ! Configuration. Option 2: with helpers // testutils.js import { toHaveNoViolations } from 'jest-axe'; expect.extend(toHaveNoViolations);

Slide 14

Slide 14 text

// ! Test! // component.test.js // imports and things it('should not have any a11y errors', async () => { // render or mount the component into const container expect(await axe(container)).toHaveNoViolations(); }) // what's in the expect depends on your // framework and testing setup

Slide 15

Slide 15 text

Agenda ✔ 1. What is jest-axe? ✔ 2. How do we set it up? ! 3. What could we test? 4. What else could we do?

Slide 16

Slide 16 text

What could we test? Test everything? Probably no. Test nothing? Deﬁnitely no. Take the middle way. (Hint: UI changed? jest-axe it!)

Slide 17

Slide 17 text

// ! Add a jest-axe when we... // Have a mount or render? // " Probably yes. it('should be accessible', async () => { const component = mount(); // some other tests checking classes and text and things expect(await axe(component.html())).toHaveNoViolations(); });

Slide 18

Slide 18 text

// ! Add a jest-axe when we... // Have lots of mounts or renders in one file? // " Probably yes, in a cheeky afterEach. let component; afterEach(async () => { if (!component) { return; } expect(await axe(component.html())).toHaveNoViolations(); } // ... lots of tests with mount

Slide 19

Slide 19 text

Add a jest-axe... For every variant (colours, states)? Probably yes. For every Boolean prop? We probably have two tests, so probably yes twice. Could use the afterEach trick.

Slide 20

Slide 20 text

Add a jest-axe? Changing an ARIA attribute? Very probably yes. Special shout-out: errors! aria-invalid, aria-describedby

Slide 21

Slide 21 text

How much interaction could we test? Every (click, keyboard) interaction? Probably no. None of the interactions? Probably no. Take the middle way. (Hint: use ARIA attributes as selectors)

Slide 22

Slide 22 text

Add a jest-axe? For the same stuff as we put in storybook (storybook.js.org)? Very probably yes! (Storybook does bits of UI in isolation)

Slide 23

Slide 23 text

Add the accessibility addon for Storybook? Yes please! Runs axe on your stories Keep jest-axe, though!

Slide 24

Slide 24 text

We have a design system, but it doesn't have jest-axe Chat to some peeps about getting it in

Slide 25

Slide 25 text

We have a design system, and it has jest-axe Still worth adding jest-axe to our stuff! 1. We might pick up bugs the DS hasn’t spotted 2. We might pick up where we’re not implementing the DS quite right

Slide 26

Slide 26 text

Agenda ✔ 1. What is jest-axe? ✔ 2. How do we set it up? ✔ 3. What could we test? ! 4. What else could we do?

Slide 27

Slide 27 text

What else could we do? Manual testing: keyboard; zoom; screen reader.

Slide 28

Slide 28 text

What else could we do? Involve people with disabilities in our research and usability testing.

Slide 29

Slide 29 text

Recap ✔ 1. What is jest-axe? ✔ 2. How do we set it up? ✔ 3. What could we test? ✔ 4. What else could we do?

Slide 30

Slide 30 text

Most important thing With a little more effort jest-axe can be a lot more useful

Slide 31

Slide 31 text

Thanks for listening!