SocialButton

The SocialButton component has been designed with accessibility in mind, providing accessible social authentication buttons with proper semantic structure and screen reader support for sign-in flows.

The following props are available to improve the accessibility of your SocialButton component:

• The component automatically manages HTML semantics and ARIA attributes:

  • Renders as a semantic <button> element by default, ensuring proper keyboard focusability and button behavior
  • Renders as a semantic <a> element when href is provided, creating a proper link that assistive technologies can identify
  • Sets type="button" or type="submit" based on the submit prop when rendered as a button
  • Automatically adds rel="noopener noreferrer" for external links when external prop is true
  • Properly handles the disabled state by preventing interaction and removing from tab order

• Focus management is handled automatically:

  • Native focus behavior is preserved based on the rendered element
  • Visible focus indicators are provided for keyboard users
  • Disabled and loading states are properly excluded from tab navigation

• Icon accessibility is managed automatically:

  • Icons are rendered with appropriate semantic structure
  • Both the social icon and the chevron forward icon are automatically hidden from screen readers with ariaHidden attribute
  • Icons receive proper color contrast and sizing for accessibility

• Loading state accessibility:

  • When loading is true, the button becomes disabled and shows a loading indicator
  • The loading spinner inherits the proper color for sufficient contrast
  • Screen readers are informed of the disabled state during loading

• Use clear and specific button text that describes the social sign-in action, such as “Sign in with Google” or “Continue with Apple” rather than just “Google” or “Apple”
• Ensure the button text follows a consistent pattern across all social buttons in your application
• When using the title prop, provide additional context that supplements but doesn’t duplicate the button text
• For social sign-in flows, consider informing users about account creation vs. existing account sign-in behavior
• Ensure sufficient color contrast between the button and its background, especially for custom styled social buttons
• When social buttons trigger modals or popups, use ariaControls and ariaExpanded to establish the relationship between the button and the controlled content
• Avoid nesting interactive elements: Do not place SocialButton inside other interactive elements like buttons or links, as this creates invalid HTML and confusing experiences for assistive technology users

SocialButton components are fully navigable with keyboard:

• When rendered as button (default):

  • Users can focus on the button using the Tab key
  • Users can activate the button using both Enter and Space keys
  • When disabled or loading, the button is skipped in tab navigation

• When rendered as link (with href):

  • Users can focus on the link using the Tab key
  • Users can activate the link using the Enter key
  • Standard link keyboard behavior applies

On mobile devices with on-screen keyboards, standard touch interactions apply while maintaining the same keyboard accessibility patterns when an external keyboard is connected.

<SocialButton type="google">Sign in with Google</SocialButton>

Screen reader announces: “Sign in with Google, button”

<SocialButton type="apple" title="Sign in with Apple ID to access your account">
  Continue with Apple
</SocialButton>

Screen reader announces: “Sign in with Apple ID to access your account, button”

<SocialButton
  type="facebook"
  ariaControls="social-auth-modal"
  ariaExpanded={isModalOpen}
  onClick={handleFacebookSignIn}
>
  Sign in with Facebook
</SocialButton>

Screen reader announces: “Sign in with Facebook, button, collapsed” (when modal is closed) or “Sign in with Facebook, button, expanded” (when modal is open).

<SocialButton type="google" href="https://accounts.google.com/oauth/authorize?..." external>
  Sign in with Google
</SocialButton>

Screen reader announces: “Sign in with Google, link”

<SocialButton type="apple" loading={isAuthenticating} disabled={isAuthenticating}>
  {isAuthenticating ? "Signing in..." : "Continue with Apple"}
</SocialButton>

When loading, screen reader announces: “Signing in…, button, dimmed” (indicating the disabled state).