Learner Dashboard has a broken skip link

[deborahgu]

description

frontend-component-header has, correctly, a Skip to main content link that goes to href=main. However, Learner dashboard has a main element with no ID, so the skip link fails. This is an accessibility issue; it's a violation of WCAG 2.4.1 (and is also just a broken link). This can almost certainly be easily fixed by adding id=main to the main element.

acceptance criteria

a keyboard or screen reader user who loads the page will have the first link be "Skip to main content", and activating that link should take the keyboard or screen reader focus to the primary block (for keyboard users it will be the "my courses" first reachable element, which I believe is the "refine" button; for screen reader users I believe there is the invisible announcement "learner home" followed by the rest of the "my courses" component).

[Ankush1oo8]

Can I fix this issue

[MaxFrank13]

Can I fix this issue

Please do! Feel free to assign yourself in the top right once you get started on it 🙂

[wittjeff]

You can see correct behavior on the Enterprise dashboard.
BTW there are still bugs with learning MFE skip links (first link jumps to the wrong place, second link, which is inside the content iframe, shouldn't appear at all on desktop, is there for use with webview in the mobile apps).

[Ankush1oo8]

I have tried to solve the issue, please if possible check it and let me know if there are mistakes in PR

[Ankush1oo8]

Please check PR #522