microsoft-graph-toolkit icon indicating copy to clipboard operation
microsoft-graph-toolkit copied to clipboard

[BUG] Setting MGT Person outline to none no longer working

Open NathZ1 opened this issue 2 years ago • 4 comments

I have previously been setting MGT Person outline to none by wrapping it with div and using focus-within pseudo-class. This seems to have broken at some stage between 2.3.1 and 2.4.

Describe the bug Can no longer set MGT Person component outline to none (e.g. when using it as a button with custom focus styling of parent).

To Reproduce Steps to reproduce the behavior:

simple example using React/Tailwind:

<div className='focus-within:outline-none'>
    <Person 
      userId='xxxxxxxxxxxx'
      onClick={() => console.log('click')}
    />
</div>

Screenshots My current prod environment (using MGT 2.3.1): image

Same component in dev environment (using MGT 2.4): image

Environment (please complete the following information):

  • OS: Windows 10
  • Browser: Chromium
  • Framework: React
  • Version: 2.4
  • Provider: MSAL2Provider

NathZ1 avatar Mar 09 '22 03:03 NathZ1

Hello NathZ1, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

ghost avatar Mar 09 '22 03:03 ghost

These might be related to accessibility changes we have done. Having a border on clicked elements is critical for users with accessibility needs. Can you provide a repro with both Tailwind + MGT? It would help for investigating! Thanks!

sebastienlevert avatar Mar 09 '22 19:03 sebastienlevert

Trying to setup a repro in codesandbox but can't get MGT to work due to login requiring redirect.

Code flow is not supported inside an iframe. Please ensure you are using MSAL.js in a top frame of the window if using the redirect APIs, or use the popup APIs. (window.parent !== window) => true

Any suggestions for easiest way to setup?

NathZ1 avatar Mar 19 '22 11:03 NathZ1

This would be a good starting point. You'll find a client-id in the index.tsx and you could fork it!

https://stackblitz.com/edit/mgt-react-starter-sebastienlevert-1488?file=src%2FApp.tsx

sebastienlevert avatar Mar 30 '22 19:03 sebastienlevert

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment.

ghost avatar Nov 01 '22 21:11 ghost