DefaultButton shows square box around it

KshamaShrey commented 2 years ago

Environment Information

Package version(s) office-ui-fabric-react: "^6.189.2", spfx: 1.11.0
Browser and OS versions: Safari iPhone 12: Original: iOS 14.1

Steps to reproduce:

Include office-ui-fabric-react DefaultButton as mentioned in the documentation
The following css is added to the button to style it. .goToTop{ position: fixed; min-width: 0px; min-height: 62px; bottom: 55px; right: 20px; align-items: center; justify-content: center; z-index: 1000; border: 3px solid; border-radius: 50%; border-color:white!important; background-color:red!important; cursor: pointer; animation: fadeIn 0.3s; transition: opacity 0.4s; i { color: white; top: -1px; font-size: 25px; font-weight:bolder!important; position: relative; margin: 0px; } }
The button should display round as the border-radius is mentioned as 50% which is displayed as expected.
There shouldn't be a square box around the round button. As per the analysis, the issue is caused due to the fabric ui react package.
This issue shown below(square box around the rounded button) is visible intermittently.

The square box around the rounded button is shown in following scenarios.

User clicks on a button to open ui fabric panel
User hovers to view a tooltip.
Without any actions done by user.

Actual behavior:

The square box around the rounded button is visible by default without adding any css.

Expected behavior:

No square box around rounded button should be visible

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: High as it is a bad UI behavior

Products/sites affected: Production site is affected.

Manjunatha123 commented 2 years ago

We are also facing the same issue in our project. Unwanted border for the button is getting added which is a bad behaviour from a user experience perspective.

layershifter commented 2 years ago

Please follow our issue template and create Codepen or Codesandbox with a repro case 🙏

I created a CodeSandbox to reproduce the issue: https://codesandbox.io/s/admiring-bell-v4kwx

🔽🔽🔽

As I understood, your problem is related to the focus indicator which remains square:

Applying the same border-radius to it, fixes the problem:

.goToTop:focus::after {
  border-radius: 50%;
}

https://codesandbox.io/s/clever-rgb-ni9fn?file=/src/styles.scss

⚠️ It's not correct to remove focus indicators as it's an accessibility requirement, but if you want:

// please don't do this
// ⬇️⬇️⬇️

.goToTop:focus::after {
  display: none;
}

https://codesandbox.io/s/exciting-curran-85008?file=/src/styles.scss

Closing as it's not a library issue - there are no circular buttons by design: https://developer.microsoft.com/en-us/fluentui?fabricVer=6#/controls/web/button

microsoft / fluentui