fix: Remove auto focus from Modal Content

[Pr1ncek]

📃 Summary

1. When the Modal opens, it automatically sets focus to the first element within the ModalContent.
   This behavior can be unwanted sometimes. See discussion within the Asana ticket for more context.

Solution

1. We add a tabindex to the Modal component, so it does not set focus to the first element within the modal until the user presses tab.

Important Note
If you have a form within a modal and you want the first input to auto focus when the modal opens, then you have to pass the auto focus prop to the Input itself.
As shown here. https://github.com/heydoctor/molekule/blob/master/src/Modal/Modal.example.js#L39

🏷 Asana Task

https://app.asana.com/0/1172482803331797/1176612299695449/f

QA

1. Run Molekule story book locally.
2. Check out the No Auto Focus example within the story book

Expect
When you open this modal, none of the elements should have focus until you press tab.

I will remove this example before merging because I don't really think this needs to be an entirely separate example in our story book.

📈 Risk Analysis

• Does this affect patients?
• Does this affect clinical?
• Does this mutate data?
• Does it touch PHI?
• Does it touch payments?
• Does it update Node packages?

[kylealwyn]

Could we add another Modal story with no input and some buttons to verify?

[kylealwyn]

I'm not sure we need this. The input in the Modal stories still autofocuses without setting to true.

[Pr1ncek]

That is because the Input itself has an auto focus prop.
https://github.com/heydoctor/molekule/blob/master/src/Modal/Modal.example.js#L39

[Pr1ncek]

Could we add another Modal story with no input and some buttons to verify?

I have added an example with an input included to show that even if you have an input, the modal won't auto focus it.
unless you specifically write <Input autofocus />
https://github.com/heydoctor/molekule/blob/master/src/Modal/Modal.example.js#L39

[kylealwyn]

Looks great @Pr1ncek! Could we remove the outline on ModalContent?

[Pr1ncek]

Looks great @Pr1ncek! Could we remove the outline on ModalContent?

Behavior of the Basic Modal has an outline already. So it takes four tabs to cycle through the elements. 1 input, 2 buttons, and the Modal itself.

There are two approaches we can take here.

1. We can set outline: none, but the modal will still be focusable. you just wont see an outline. So it will still take 4 tabs to cycle through the elements.

2. Better approach I think is to set tabIndex to -1, so the modal is not a focusable element. Only the input, and the 2 button are focusable.
   Looks like this
   

[kylealwyn]

@Pr1ncek Will approach #2 still support the core requirement? If so, seems ideal.

[Pr1ncek]

@Pr1ncek Will approach #2 still support the core requirement? If so, seems ideal.

Had to go with approach 1, outline: none
Setting tab index to -1, automatically focuses the first element in the modal and that is the original issue we are trying to solve.

[kylealwyn]

works great!