3. Methods

Documentation - The methods property

The methods object is defined at the root of the config object passed into the main function, apart from the rules object. This separation doesn't just keep the rules clean, 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, let's take a closer look at how to write these methods.

---

Custom Methods

When a mouse or keyboard event occurs, you can pass an array of strings via the rules property. The code matches each string to a method name, and then runs each method in order. A set of helpful utilities is passed as the first argument, and the event itself as the second.

addAccessibilityRules({

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

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

})

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.

---

Utilities

Again, the utilities are defined on an object which is passed as the first argument to each of your custom methods. These utilities should cover most common scenarios, since most logic beyond manipulating the focus is probably safe to separate from accessibility concerns.

• 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 not defined, 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 not defined, the function will toggle to the opposite of the current state.