arrow-keys

ArrowKeysMixin

The ArrowKeysMixin enables the user to move focus using the arrow keys. The right/down arrow keys move focus to the next element or the first element if focus is currently at the end. The left/up arrow keys move focus to the previous element, or the last element if focus is currently at beginning. The home and end key apply focus to the first and last elements respectively.

Usage

The focusable elements can be provided in one of two ways:

If the elements are known up-front and are in the element's local DOM scope, simply add the d2l-arrowkeys-focusable class.

import { ArrowKeysMixin } from '@brightspace-ui/core/mixins/arrow-keys/arrow-keys-mixin.js';
class MyElement extends ArrowKeysMixin(LitElement) {
  render() {
    return this.arrowKeysContainer(html`
      <div>
        ...
        <a href="..." class="d2l-arrowkeys-focusable">link 1</a>
        <a href="..." class="d2l-arrowkeys-focusable">link 2</a>
        ...
      </div>
    `);
  }
}
customElements.define('my-element', MyElement);

If the elements are not known up front, or the elements cannot be simply queried in the element's local DOM-scope, an async arrowKeysFocusablesProvider may be implemented.

import { ArrowKeysMixin } from '@brightspace-ui/core/mixins/arrow-keys/arrow-keys-mixin.js';
class MyElement extends ArrowKeysMixin(LitElement) {
  render() {
    return this.arrowKeysContainer(html`
      <div>
        ...
        <a href="...">link 1</a>
        <a href="...">link 2</a>
        ...
      </div>
    `);
  }
  async arrowKeysFocusablesProvider() {
    return [ /* array containing focusable elements */]
  }
}
customElements.define('my-element', MyElement);

Properties:

• arrowKeysDirection (String): Indicates which arrow keys are allowed (default is leftright)
• arrowKeysNoWrap (Boolean): Whether focus should wrap from end-to-start and start-to-end

Methods:

• arrowKeysContainer(innerHtmlTemplate): Hooks up the event listener, to be used in your render function to wrap the focusable elements
• async arrowKeysFocusablesProvider() (Array): Optional - Override to provide the focusable elements if necessary (see above)
• async arrowKeysOnBeforeFocus(elemToBeFocused): Optional - Override to provide an async callback invoked before focus is applied