Skip to content

Instantly share code, notes, and snippets.

@gossi
Last active March 19, 2021 13:33
Show Gist options
  • Save gossi/9b4e4fcdb4798f3fc3915ab2dc9a1b9c to your computer and use it in GitHub Desktop.
Save gossi/9b4e4fcdb4798f3fc3915ab2dc9a1b9c to your computer and use it in GitHub Desktop.
Ember: Universal a11y helpers

Universal a11y Helpers

Given the WAI ARIA authoring practices tell you quite good how a particular widget shall behave. What - in case you are developing such a widget as a glimmer component - if you want to write tests for them? What if there is an already ready library of tests to use for them? If you as a developer did a good job and have all the markup done properly, the tests can entirely work on the accessibility tree on top of your markup. If not, the tests will fail anyway.

What about having an ember addon, that provides this a11y test library? In case you are developing a new component, you take that library and throw their tests at your code, without ever writing them yourself and be assured your component is a11y compliant. That library would do a service to the whole ember community.

Example

Here is an example, I've just finished writing. It is the first iteration, I found it quite well and useful and lead me to writing this. Basically, I was developing a select component. For that I first created a list(box) component. So, my tests are testing both there are listbox test "building blocks", which then are re-exported as List respectively Select test functions.

Here is a function, that tests keyboard navigation on a listbox: https://github.com/hokulea/hokulea/blob/426117b760fb8adbf6a5ddfe29b8d822547871ab/packages/inputs/addon-test-support/a11y/-private/listbox.ts#L11-L47

Which is then used ("curried") for a list: https://github.com/hokulea/hokulea/blob/426117b760fb8adbf6a5ddfe29b8d822547871ab/packages/inputs/addon-test-support/a11y/list.ts#L52-L74

And here is how to use these test helpers to write your tests:

    test('it supports keyboard navigation', async function (this: TestContext, assert) {
      this.options = ['apple', 'banana', 'pineapple'];
      await render(hbs`<List @options={{this.options}}/>`);
      await testListKeyboardNavigation(assert, {
        trigger: ListPageObject.root,
        list: ListPageObject.root
      });
    });

Folder with all the tests I've written: https://github.com/hokulea/hokulea/tree/426117b760fb8adbf6a5ddfe29b8d822547871ab/packages/inputs/addon-test-support/a11y

I'd rather see the collection of testListKeyboardNavigation() functions as a library in a package that serves the whole ember community.

More Ideas?

In terms of not only testing structure, mouse and keyboard behavior, there can also be test utilities for example to test "hidden" elements on the page. But hidden in terms of accessibility (= not using display: none).

PS. This is the first shot at the API of such test helper functions, just to explore this surface.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment