3. Methods

Documentation - The methods property

The methods object is defined, not as a child, but as a sibling of the rules object. This doesn't just clean up our rules, but it also makes each method reusable by more than one rule at a time. The rules section outlines how to connect rules to methods. In this section, lets take a closer look at how to write these methods.

When a mouse or keyboard event occurs, the code looks for methods matching each string in the given array, and runs them in order. A set of helpful utilities is passed as the first argument, and the event itself as the second. These utilities should cover most common scenarios, since any logic beyond manipulating the focus probably doesn't belong in the accessibility rules.

• focus(option)
  • option may be either a selector or an element, or one of 'previous', 'next', or 'off'. If a selector or element is used, the matching element in the document is focused. focus('previous') will have the same effect as hitting shift+tab, focus('next') is the same behavior as just tab, and focus('off') will blur (remove focus from) the active element.
• toggleExpanded(parentSelector, childSelector, override)
  • parentSelector is used to select one element (like a button) that controls the expansion or collapse of content. childSelector is used to select one element containing the content which is being expanded or collapsed. Running this function will not impact style, and therefore will not visually hide or show the content in question. It will, however, toggle aria-expanded on the parent and aria-hidden on the child. To visually hide/show the content, try adding [aria-hidden="true"] { display: none; } to your stylesheet. override is optional, and is a boolean which will force expand when true, and force collapse when false. If override is undefined, it is ignored and the function will toggle to the opposite of the current state.
• getExpanded(item)
  • This function simply returns the expanded state of an element. item is optional, and can either be a selector or an element, and it defaults to the current element to which the rule is applied.
• toggleFocusTrap(item, override)
  • This function traps the focusable area inside of an element. item is optional, and can either be a selector or an element, and it defaults to the current element to which the rule is applied. override is optional, and is a boolean which will force add the focus trap when true, and force remove the focus trap when false. If override is undefined, it is ignored and the function will toggle to the opposite of the current state.

All of the above utilites are attached to the object passed into every custom method you define. See the example below.

addAccessibilityRules({

  methods: {
    toggleContent(utils, event) {
      event.preventDefault()
      utils.toggleExpanded('.toggleBtn', '#Content')
    }
  },

  rules: {
    '.toggleBtn': {
      keyboard: {
        Enter: ['toggleContent']
      }
    }
  }

})

Again, see the rules section to read more about how to connect these methods to the rules.

NOTE: When applying events to both click and the 'Enter' key, remember that hitting 'Enter' on certain elements (such as buttons) will also trigger the click event. For something like a menu toggle, you will need event.preventDefault() in order to prevent it from toggling twice and cancelling itself out. This is a JavaScript caveat, not a problem with this library. Similar situations may occur with other events, remember these are just normal event listeners in the end.