Safari shows blue focus outline on s-clickable after mouse click - expected behavior or styling issue?

Polaris
1

I’m building an embedded app using Polaris web components and noticed that in Safari, clicking on an s-clickable element causes a prominent blue focus outline to appear and persist until clicking elsewhere.

image
image2142×1088 222 KB

The setup:

I’m using s-clickable for expandable/collapsible section headers in a modal:

Section title

The behavior:

  • In Chrome/Firefox: No visible focus ring after mouse click
  • In Safari: Blue focus outline appears after clicking and stays visible

This seems to be Safari’s default focus styling. Other browsers use :focus-visible to only show focus rings for keyboard navigation, not mouse clicks.

My question:

  1. Is this expected behavior for Polaris web components in Safari?
  2. Is there a recommended way to handle this, or should I leave it as-is for accessibility reasons?

I want to avoid hacky solutions like calling blur() after click, since that could negatively impact keyboard users and screen readers.