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', () => {