Clarity: Wizard title gets double focus attempts

[Shijir]

Describe the bug

Wizard has its own mechanism to set focus on its title. But currently, it gets two attempts to focus on its title: one from its own component and another from Modal's title focus attempt because our Wizard uses Modal component.

How to reproduce

If you open a wizard and check document.activeElement, it will be on the div wrapper of the modal title. It's actually supposed to be a span wrapper element that Wizard tries to focus on.

Expected behavior

There should be only one attempt to focus on Wizard title. And that attempt should be made by Wizard component itself. So we should disable the attempt to focus on the title from Modal component. I am assuming that we could fix this easily once we integrate disable-able clrFocusOnViewInit in the modal.

Additional notes

Another small issue is that we are using tabindex=0 on the wizard title making it permanently focusable like interactive elements. Instead, we should use tabindex=-1 so it will be still focusable manually, but it won't be keyboard focusable.

[AlexMarcuBytex]

HI @Shijir ! I can do the changes but i have some questions first. So, you propose to keep the wizard way of focusing and change the old way of modal title focusing with this new directive, right? I see that clrFocusOnViewInit is integrated in clarity but doesnt seem to work on the current use. Tabindex can be changed immeadiately but first we must be sure that this directive is working properly if this will be the fix.
Also, document.activeElement returns the span in my console, not the div.

[Shijir]

Hi @AlexMarcuBytex! I was wrong about double focus attempts here. Wizard actually doesn't try to set focus on its title when it opens the first time, but the modal it's based on takes care of that initial title focus. When Wizard moves to next steps and new contents appear, Wizard starts managing the title focus. So I would say it's working as expected.

Only issues we should fix here is that the wizard title wrapper must have tabindex=-1 instead of tabindex = 0. And the visible outline should be suppressed on non-interactive elements.

[AlexMarcuBytex]

@gnomeontherun was the wizard intentionally omitted in the scope-enum? i think being a component it should have its name there.. i added it. pls tell me if it s ok.

[gnomeontherun]

Yes thats fine to add, was a mistake to not have it.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.