Accessibility Tests Example

Let’s look at an example that tests an expandable section. When you click Codey’s name, the section expands to tell you more about him, and when you click his name again, the section collapses.

Here’s some pseudocode for an Aura component test that toggles the collapsed and expanded state of an expandable section.

testToggleExpandCollapse : {
  test : [
    function(cmp) {
      // Default: collapsed
      this.assertCollapsed(cmp);
      // Toggle to expanded
      this.clickToggleButton(cmp);
      this.assertExpanded(cmp);
      // Toggle back to collapsed
      this.clickToggleButton(cmp);
      this.assertCollapsed(cmp);
    }
  ]
}

First, we assert the element is collapsed by default, then we click the toggle button, verify it’s expanded, click the toggle button again, and verify it’s collapsed.

How can we embed accessibility checks into this test? Let’s explore the two helper functions assertCollapsed and assertExpanded.

assertCollapsed : (cmp) {
  var button = this.getButton(cmp);
  var section = this.getSection(cmp);
  // Button indicates section is collapsed
  aura.test.assertEquals(
    button.getAttribute('aria-expanded'),
    "false",
    "Button should indicate it's collapsed"
  );
  // Section is visually closed
  aura.test.assertFalse(
    section.classname.indexOf('slds-is-open') > -1,
    "Section should be collapsed"
  );
}

For an expandable section to be accessible, it must communicate its expanded or collapsed state to assistive technology users, such as screen reader users. The best way to make the section accessible is with an ARIA state attribute, aria-expanded, on the button, which is true when the section is expanded and false otherwise. To make sure that this attribute is always properly set, we can assert it has the correct value. In assertCollapsed, we assert that aria-expanded has a value of false. Now, in assertExpanded, we can assert that aria-expanded has a value of true.

assertExpanded : (cmp) {
  var button = this.getButton(cmp);
  var section = this.getSection(cmp);
  // Button indicates section is expanded
  aura.test.assertEquals(
    button.getAttribute('aria-expanded'),
    "true",
    "Button should indicate it's expanded"
  );
  // Section is visually open
  aura.test.assertTrue(
    section.classname.indexOf('slds-is-open') > -1,
    "Section should be open"
  );
}

If the code that’s setting aria-expanded regresses, we catch the bug before it reaches screen reader users. Now let’s go back to our testToggleExpandCollapse test case. Let’s add $A.test.assertAccessible() in two strategic places so that we run Salesforce’s default set of accessibility checks against the section’s expanded and collapsed states. Remember, we want to test every state, not just one. If we test only the collapsed state, we might miss accessibility bugs in the expanded section.

testToggleExpandCollapse : {
  test : [
    function(cmp) {
      // Default: collapsed
      this.assertCollapsed(cmp);
      // Toggle to expanded
      this.clickToggleButton(cmp);
      this.assertExpanded(cmp);
      $A.test.assertAccessible(); 
      // Toggle back to collapsed
      this.clickToggleButton(cmp);
      this.assertCollapsed(cmp);
      $A.test.assertAccessible();
    }
  ]
}

Now we have accessibility checks running automatically in our custom tests.