fix(link): added delegateFocus for Safari tab index issue in shadow root

.changeset/free-candles-scream.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/link': patch
+---
+
+** Fixed ** : Safari keyboard navigation compatibility for sp-link component by implementing an approach with shadow DOM delegatesFocus and explicit tabindex.

packages/link/src/Link.ts

@@ -10,7 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import { CSSResultArray, TemplateResult } from '@spectrum-web-components/base';
+import {
+    CSSResultArray,
+    LitElement,
+    TemplateResult,
+} from '@spectrum-web-components/base';
 import {
     property,
     query,
@@ -22,6 +26,7 @@ import linkStyles from './link.css.js';
 
 /**
  * @element sp-link
+ *
  */
 export class Link extends LikeAnchor(Focusable) {
     public static override get styles(): CSSResultArray {
@@ -48,6 +53,17 @@ export class Link extends LikeAnchor(Focusable) {
     }
 
     protected override render(): TemplateResult {
-        return this.renderAnchor({ id: 'anchor' });
+        return this.renderAnchor({
+            id: 'anchor',
+            tabindex: 0,
+        });
     }
+    /**
+     * Static property to configure shadow root options
+     * This enables delegatesFocus for Safari compatibility
+     */
+    static override shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    };
 }

packages/link/test/link.test.ts

@@ -15,6 +15,7 @@ import { Link } from '@spectrum-web-components/link';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
 import { spy } from 'sinon';
+import { isWebKit } from '@spectrum-web-components/shared';
 
 describe('Link', () => {
     testForLitDevWarnings(
@@ -76,4 +77,34 @@ describe('Link', () => {
         el.click();
         expect(clickSpy.callCount).to.equal(0);
     });
+
+    it('has proper Safari keyboard navigation support when running in WebKit', async () => {
+        const el = await fixture<Link>(html`
+            <sp-link href="test_url">WebKit Test Link</sp-link>
+        `);
+
+        await elementUpdated(el);
+
+        // Always verify basic configuration
+        expect(el.shadowRoot).to.not.be.null;
+        expect(el.shadowRoot?.delegatesFocus).to.be.true;
+
+        const anchor = el.shadowRoot?.querySelector(
+            '#anchor'
+        ) as HTMLAnchorElement;
+        expect(anchor.getAttribute('tabindex')).to.eq('0');
+
+        // WebKit-specific enhanced tests
+        if (isWebKit()) {
+            // Verify that the anchor element is properly focusable in Safari
+            expect(anchor.tabIndex).to.be.greaterThan(-1);
+
+            // Verify that the link maintains proper ARIA attributes in Safari
+            expect(anchor.hasAttribute('href')).to.be.true;
+            expect(anchor.getAttribute('role')).to.not.equal('button');
+        }
+
+        // Common verification for all browsers
+        await expect(el).to.be.accessible();
+    });
 });