[ListKeyManager] updates & export the cdk list key manager

[rayroman]

Issue/Task

The main task is to export cdk/a11y/key-manager/ListKeyManager.js file to the main exports. This will involve a couple of tasks:

1. Add export * from './cdk/a11y'; to the src/index.js file.
2. Update the methods setTypeAhead and onKeyDown in the ListKeyManager.js file.

Exporting file

The a11y folder already has exports. This just has to be put into the main src/index.js file.

Updating the methods

The ListKeyManager is used to handle arrow keys for several components like tags and autocomplete to handle focus. It also comes with the ability to type several keys in a row like F L O, which in a list of states, would focus on the state Florida in a dropdown. This is known as typeahead.

As I have come to develop, I've realized that we should be able to disable typeahead for tracking keys that shouldn't be "searched" for (for example, enabling arrow keys for the recruiting contact modal, but disabling typeahead so we don't jump to the nth candidate just because we typed their name).

The typeahead implementation is set as a prop this.props.typeAhead, where it is a number, which represents the debounce time in milliseconds of how long before the manager focuses on the next key. When we don't want typeahead, we would want to be able to pass null into it instead.

To give the possibility to disable it, make the following changes:

  setTypeAhead = (debounceInterval = 200) => {
+    if (debounceInterval == null) {
+      this.getStringFromKeys = null;
+      return;
+    }

    const typeAhead = _.toNumber(debounceInterval);
    const fn = getStringFromKeys.bind(this);
    this.getStringFromKeys = typeAhead > 0 ?
      _.debounce(fn, typeAhead, { trailing: true }) :
      fn;
  };

as well as in onKeyDown, near the default part of the switch tree:

      default:
+       if (this.getStringFromKeys == null) return;
        if (isModifierAllowed || event.shiftKey) {
          if (key && key.length === 1) {
            addKey.call(this, key.toLocaleUpperCase());
          } else {
            // Attempt to use the `event.key` which also maps it to the user's keyboard language,
            // otherwise fall back to resolving alphanumeric characters via the keyCode.
            const keyCode = event.keyCode;
            if (
              (keyCode >= 'A'.charCodeAt(0) && keyCode <= 'Z'.charCodeAt(0))
              || (keyCode >= '0'.charCodeAt(0) && keyCode <= '9'.charCodeAt(0))
            ) {
              addKey.call(this, String.fromCharCode(keyCode));
            }
          }
        }

Testing

Please run the sandbox and test out this new feature by replacing some of the ListKeyManager implementation of the Tags, for instance by having typeAhead={null} or something. Also make sure that it works with a normal typeAhead value instead.