33
loading...
2 ways of making your form inputs accessible
Recently, my team has been working on accessibility for testing. And we've had problems with getting our input elements to be following the principles of the testing-library
As per the priority in the docs, we should be using
getByRole most often for the test to resemble how the user interacts with it in the browser. For example:// get the textbox that has the label of 'Bar'
getByRole('textbox', { name: 'Bar' });So for us to use
getByRole, we should make sure that the <input /> is related to the <label />. There are 2 ways we can do this:
<label htmlFor="foo">Bar</label>
<input id="foo" type="text" />and
<label>Bar
<input type="text" />
</label>This way, we can make sure that our form elements are accessible, not only by the user but also by our tests.
Cheers! ☕ 🍺
33