Add skip to component, id attribute for <main>

[marcus-herrmann]

Description

Adds skipTo functionality

Unfortunately vue-router has problem with the usual approach to implent skip link functionality, with links <a href="#main">Skip to main content</a>. Issues around this are open for years (#1668 being the main and original one. But none of the workarounds listed there are actually moving focus to the container with the "#"-provided id (they are rather meddling with window.history or scrolling things into visible viewport, both of which hasn't reliable influence on the keyboard focus). So I solved the skipTo functionality with a button, which is not ideal, but at least a comprehensible way (compared to changes in the router itself). Once/if this behaviour will be resolved we could easily swap the <skip-to> component with a link.

Why no component in ODS?

Several reasons:

• The skipTo component can't be properly presented in the Design System since it starts invisible
• The component is not independent from the DOM structure
• I do not expect the CSS to be ever reused somewhere else.

Related Issue

#2324.

• Fixes <issue_link>

Motivation and Context

Reasoning

How Has This Been Tested?

Manually, only.

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Technical debt
• Tests

Checklist:

• Code changes
• Unit tests added
• Acceptance tests added
• Documentation ticket raised:

Open tasks:

• ...

[PVince81]

would it be possible to use UIKit's 'uk-invisible` class instead ?

[marcus-herrmann]

No, since it works with visibility: hidden which removes an object from the tabindex. But a skip link needs to be in there, albeit not visually present without being focused.

[PVince81]

depending how often we're going to need this, maybe we can implement this in the design system ?

[marcus-herrmann]

If the interface stays like this (the navigation being hidden away off-screen initially anyway) only one instance of a skip link (the one going to main) is necessary, in my opinion. Regarding other thoughts on SkipTo and ODS, see "Why no component in ODS?" above.

[PVince81]

Makes sense, thanks for the explanations 👍