Avatar, focus status for Avatar

[cdpestitschek]

Background: This iteration is about creating a foundation for User profile / settings / help center which we can start populating with useful information about the health status of users system, quick access settings and link to more preferences.
As the natural place (see Youtube, Gmail, Slack and also contact center competitors) for such content is user avatar in the header which we already have, the first step is to structure that area in a way that is future proof and can handle more items to be added.

Agent Avatar
With the statuses siting outside, the Avatar will be a place where we plan to incorporate the debugger so the agent can see their system status in a snapshot. In future iterations we will also add quick access audio device settings with option to go further to more comprehensive settings and start adding better information and instructions for any occurred issues.

User statement
As an agent, when I click on my avatar I expect to get visual feedback as confirmation that this area has been clicked.

*When the user clicks on the avatar a sidebar/modal will appear.

Main question

Do we need a focus status in Avatar? if yes, how it would look like?

Need: We would like clarification on focus status for Avatars
Stage of design: Define/High-fidelity
Research: TBD
Links to mockups or prototype: Figma file

[nkrantz]

Hi @cdpestitschek - if the component is interactive, it will need to be focusable. That said, it's not the actual Avatar component that will be clickable here, the Avatar will go inside of an interactive component (Menu or Button) in order for it to be used to trigger an action (open your help center). These components already have focus states so you don't have to worry about implementing the design of the focus border.

Feel free to check out the console masthead for an idea of what the focus state on the Avatar Menu should look like. Let us know if you have more questions!