Automatic Focus Handling issue

[jbrown0824]

The documentation states that AUTOFOCUS will look for the next (or previous) available focusable sibling element. But it seems to only check the DIRECT next sibling. I'm trying to figure out why? It means I can't insert any sort of spacer or header elements between the focusable ones.

It seems like FocusElement.defaultFocusNext and defaultFocusPrevious should look through each sibling in turn until it finds one that matches.

Current Implementation

private defaultFocusNext() {
  if (this.$el) {
    // check if we can find a sibling element
    const next = this.$el.nextElementSibling;
    // check if element exist and has id
    if (next && next.id) {
      // set focus to component
      this.doFocusElement(next.id);
    }
  }
}

Suggested Implementation

private defaultFocusNext() {
  if (this.$el) {
    let next = this.$el;

    // look for the next sibling that has an id
    while ((next = next.nextElementSibling) && !next.id);

    // check if element exists and has id 
    if (next && next.id) {
      // set focus to component
      this.doFocusElement(next.id);
    }
  }
}

Is there a reason that I'm not seeing why it currently only looks for the direct next sibling?

Also on a semi-related note, I was curious to see that the only criteria these seem to use to determine the "next focusable element" is that it contains an id. That doesn't seem very thorough. why not attach a data-focus="" attribute to the tags and check by that or something?