Change taborder on aa-InputWrapperPrefix and aa-InputWrapperSuffix

[NiklasBr]

We are trying to resolve a UX issue where it was discovered that visitors expect tab order to be like this: the first tab should place focus on input, a second the clear “x”, another tab should focus the loupe/submit button

What settings can we use to control this tab order?

[Haroenv]

There's no setting for this, but you can change the dom elements, we always use the same reference, for example:

  // Re-order dom to match the expected keyboard navigation order
  document
    .querySelector("#autocomplete .aa-Form")!
    .replaceChildren(
      document.querySelector("#autocomplete .aa-InputWrapper")!,
      document.querySelector("#autocomplete .aa-InputWrapperPrefix")!,
      document.querySelector("#autocomplete .aa-InputWrapperSuffix")!
    );