0

My website has a problem where there is a white expanding and contracting outline animation inside this React button that only appears on Chrome and Safari for mobile that looks annoying. The outline does not appear when I use mobile screens on my local dev environment. Is there any way to remove this by modifying the styling? Is the autofocus property causing issues?

enter image description here

I am using React with Material-UI but this particular button is styled with a global CSS style sheet.

Code for Button in React below:

  <Dialog
    className="onboarding-dialog"
    onClose={() => setOnboardingDialog(false)}
    aria-labelledby="onboarding-dialog"
    open={onboardingDialog}
  >
    <Box className="onboarding-dialog-content">
      {renderLogo()}
      <Typography className="subtitle" variant={"h6"}>
        Join WEBSITE {scrolledPastTwoItemRows ? `to See More! ` : ``}
      </Typography>
      {renderTextContent()}
      {renderErrorText()}
      <Button
        className="auth-button"
        color="primary"
        autoFocus
        onClick={() => {
          mixpanelService.clickOpenSignUpDialog();
          setSignUpDialog(true);
          setOnboardingDialog(false);
        }}
      >
        Continue with email
      </Button>
      <p className="auth-alt-text">
        Already have an account?{" "}
        <span
          style={{ color: "#da2f8e", cursor: "pointer" }}
          onClick={() => {
            mixpanelService.clickOpenSignInDialog();
            setOnboardingDialog(false);
            setSignInDialog(true);
          }}
        >
          Sign In
        </span>
      </p>
      {renderLegalText()}
    </Box>
  </Dialog>

Styling in .css file for the React Button:

.auth-button {
  text-align: center;
  display: inline-block;
  width: 100%;
  color: #fff !important;
  background-color: #da2f8e !important;
  border-radius: 8px !important;
  text-decoration: none;
  margin-top: 10px !important;
  margin-bottom: 5px !important;
  padding: 12px !important;
  font-size: 16px !important;
  font-family: 'Urbanist', sans-serif !important;
}
dev
  • 43
  • 1
  • 6
  • This is a UA style for a11y please do not attempt to remove it – Zach Jensz Sep 18 '22 at 00:27
  • https://stackoverflow.com/questions/17233804/how-to-prevent-sticky-hover-effects-for-buttons-on-touch-devices/19715406#19715406 check this out – rickshinova Sep 18 '22 at 00:53
  • Thanks @rickshinova, ended up just removing the autofocus property to fix it – dev Sep 18 '22 at 01:04
  • @ZachJensz Accessibility is definitely really important but this particular button should not have this autofocus effect. – dev Sep 18 '22 at 01:05

1 Answers1

0

Removing the autofocus property in the button resolved this.

dev
  • 43
  • 1
  • 6