link has no focus style on Safari on MacOS

[jnurthen]

🐛 Bug Report

There is no focus style for links on Safari

🤔 Expected Behavior

It should be possible to tell which element has focus

😯 Current Behavior

Using https://react-spectrum.adobe.com/react-spectrum/Link.html tabbing to the links in the page shows no focus style.

Screen.Recording.2023-01-31.at.2.33.49.PM.mov

💁 Possible Solution

Safari doesn't seem to support

text-decoration: underline double;

It does seem to support

text-decoration-line: underline;
text-decoration-style: double;

🔦 Context

💻 Code Sample

🌍 Your Environment

Software	Version(s)
react-spectrum	3
Browser	Safari 16.3
Operating System	MacOS 13.2

🧢 Your Company/Team

🕷 Tracking Issue (optional)

[jnurthen]

I can resolve this by switching

  &:focus-ring {
    text-decoration: underline;
    text-decoration-style: double;
  }

to

  &:focus-ring {
    text-decoration-line: underline;
    text-decoration-style: double;
  }

but I don't think we should have to as the base CSS seems like it should work to me.
Is this a a parcel bug @devongovett ?

[devongovett]

Appears so. Filed parcel-bundler/lightningcss#411

[LFDanLu]

Will need to do some followup work here when parcel-bundler/lightningcss#411 is fixed

[dannify]

Need to update parcel lightning-css now that it is released.