This is happening in Safari and can be viewed here by clicking the "chat now" button in the lower right side of the screen: https://online.calvin.edu/
When you click on "chat now" button the minimize button in the chat window has a focus outline on it. I can't figure out why it defaults to having that outline applied to it anywhere in the CSS.
When the dialog opens, the browser thinks that <embeddedservice-chat-header> has focus. You can see this by issuing the command document.activeElement in the console panel of the code inspector. If you tab through the rest of the dialog and issue document.activeElement after every tab, you'll see the focus moves to the "welcome" <div> (why?), the three <input> elements, the "by submitting" <label> (again, why?), and then the "start chat" <button>.
(The <div> and <label> elements are not interactive elements which is why I was asking "why" the focus is moving to them.)
Keep tabbing and the focus moves back to the top of the dialog. It moves to the minimize button and then the close button. However, rather than the actual <button> elements receiving focus, the <embeddedservice-chat-header> receives focus. So that leads me to think that the custom <embeddedservice-chat-header> element might have some built in javascript that is moving the focus to an internal element.
