Studio: Clicking the user avatar in settings should got to their WP.com profile

[katinthehatsite]

Closes https://github.com/Automattic/dotcom-forge/issues/6641

Proposed Changes

This PR adds a link to Gravatar image in the settings modal that brings the user to their WordPress.com account.

Testing Instructions

• Pull the changes from this branch locally
• Start the app with nvm use && npm install && npm start
• Click on the Gravatar image in the right sidebar to open the Settings modal
• Click on the Gravatar icon in the modal
• Confirm that you are brought to your WordPress.com account https://wordpress.com/me

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[derekblank]

LGTM. I was able to verify that clicking the Gravatar button opened https://wordpress.com/me successfully.

[kozer]

I tested it and works as expected!

However, when the button is in :focus or :focus-visible state, the following outline appears.

Also note that the cursor pointer is also displayed if you are not directly on the image ( due to button padding ).

This is not a big deal, but maybe we want to improve that by removing padding/margin and outline on focus.

[katinthehatsite]

Hi @kozer - I think it is because I am using the <Button> component that is wrapping the Gravatar and it seems that this is what it comes with in terms of accessibility. I will check a bit further 👀

[katinthehatsite]

@kozer I have removed the padding at the bottom/top and left/right but left the outline for the accessibility (this is what we already have in the sidebar implementation of Gravatar as well - example below):

What do you think?

[kozer]

@kozer I have removed the padding at the bottom/top and left/right but left the outline for the accessibility (this is what we already have in the sidebar implementation of Gravatar as well - example below):

What do you think?

Yes, that's great Kat! Thanks!