diff --git a/src/App.vue b/src/App.vue
index b51b9a1d6..d38a67921 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,15 @@
:class="{ fromkeyboard: fromKeyboard, hascustomheader: hasCustomHeader }"
>
- {{ $t('accessibility.skip-navigation') }}
+
+ {{ $t('accessibility.skip-navigation') }}
+ {{ $t('accessibility.in-page-link') }}
+
@@ -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 60ed525dd..784474728 100644
--- a/tests/unit/App.spec.js
+++ b/tests/unit/App.spec.js
@@ -116,8 +116,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', () => {