From 4874afeeb29520034738ab080f576c97f93cb90b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Wed, 5 Jul 2023 19:40:29 +0200
Subject: [PATCH] [rdar://109460523] feat: skip navigation without adding an
 anchor to the URL

---
 src/App.vue            | 18 +++++++++++++++++-
 tests/unit/App.spec.js | 16 +++++++++++++++-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 55ee85529..2a1ad135a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,15 @@
     :class="{ fromkeyboard: fromKeyboard, hascustomheader: hasCustomHeader }"
   >
     <div :id="AppTopID" />
-    <a href="#main" id="skip-nav" v-if="!isTargetIDE">{{ $t('accessibility.skip-navigation') }}</a>
+    <a
+      href="#main"
+      id="skip-nav"
+      v-if="!isTargetIDE"
+      @click="skipNavigation"
+    >
+      <span>{{ $t('accessibility.skip-navigation') }}</span>
+      <span class="visuallyhidden" >{{ $t('accessibility.in-page-link') }}</span>
+    </a>
     <InitialLoadingPlaceholder />
     <slot name="header" :isTargetIDE="isTargetIDE">
       <SuggestLang v-if="enablei18n" />
@@ -159,6 +167,14 @@ export default {
     this.detachStylesFromRoot(this.CSSCustomProperties);
   },
   methods: {
+    skipNavigation(event) {
+      const main = document.getElementById('main');
+      if (!main) return;
+      event.preventDefault();
+      main.setAttribute('tabindex', '-1');
+      main.focus();
+      main.removeAttribute('tabindex');
+    },
     onKeyDown() {
       this.fromKeyboard = true;
       window.addEventListener('mousedown', this.onMouseDown);
diff --git a/tests/unit/App.spec.js b/tests/unit/App.spec.js
index 0673b0bf8..7cab1c80e 100644
--- a/tests/unit/App.spec.js
+++ b/tests/unit/App.spec.js
@@ -121,8 +121,22 @@ describe('App', () => {
   it('renders Skip Navigation', () => {
     const wrapper = createWrapper();
     const skipNavigation = wrapper.find('#skip-nav');
-    expect(skipNavigation.text()).toBe('accessibility.skip-navigation');
+    expect(skipNavigation.text()).toBe('accessibility.skip-navigation accessibility.in-page-link');
     expect(skipNavigation.attributes('href')).toBe('#main');
+
+    const mainMock = {
+      focus: jest.fn(),
+      setAttribute: jest.fn(),
+      removeAttribute: jest.fn(),
+    };
+    const getElementSpy = jest.spyOn(document, 'getElementById').mockReturnValue(mainMock);
+    skipNavigation.trigger('click');
+
+    expect(getElementSpy).toHaveBeenCalledTimes(1);
+    expect(mainMock.setAttribute).toHaveBeenCalledWith('tabindex', '-1');
+    expect(mainMock.focus).toHaveBeenCalledTimes(1);
+    expect(mainMock.removeAttribute).toHaveBeenCalledWith('tabindex');
+    getElementSpy.mockRestore();
   });
 
   it('exposes a header slot', () => {