[accordion] Focusing elements with tabindex=-1 confuses the accordion in dialog

[knoobie]

What is the problem?

Focus gets lost after focusing an element with tabindex=-1 in a accordion/accordionpanel which is inside a dialog.

Example:

    var dialog = new Dialog();
    var accordion = new Accordion();
    var panel1Layout = new VerticalLayout();
    panel1Layout.add(createBtnList(panel1Layout));
    var panel1 = new AccordionPanel("Panel 1", panel1Layout);
    var panel2 = new AccordionPanel("Panel 2", new Button("Just something else"));

    accordion.add(panel1);
    accordion.add(panel2);
    dialog.add(accordion);
    dialog.open();
    
    // helper methods to create content easily
  private Component[] createBtnList(VerticalLayout parent) {
    return new Component[]{
      createBtn(parent, "Question 1"),
      createBtn(parent, "Question 2"),
      createBtn(parent, "Question 3")
    };
  }

  private Button createBtn(VerticalLayout parent, String name) {
    return new Button("Open " + name, e -> {
      parent.removeAll();
      var h3 = new H3(name);
      h3.getElement().setAttribute("tabindex", "-1"); // Workaround: use tabindex = 0
      h3.getElement().executeJs("this.focus();");
      parent.add(h3, new Paragraph("Text"), new Button("Back", ev -> {
        parent.removeAll();
        parent.add(createBtnList(parent));
      }));
    });
  }

• Using Tab to navigate to Open Question 1
• Use Space or Enter to trigger Button
• Keyboard focus is on the header (with tabindex=-1)
• Now press Tab focus is lost (Bug)
• Press Tab again.. Panel heading focused
• press Tab again.. back button focused

Expectation: instead of loosing the focus, the back button should get focused.

Browsers

• Chrome
• Firefox
• Safari
• Safari on iOS
• Edge

Screen Readers

• None
• NVDA
• JAWS
• VoiceOver on MacOS
• VoiceOver on iOS