[WC-2946] Initial setup of skiplink widget #1764
Conversation
HedwigAR
force-pushed
the
wc-2946-new-skiplink-widget
branch
from
b0791c5 to
6bec63d
Compare
HedwigAR
force-pushed
the
wc-2946-new-skiplink-widget
branch
from
e314e29 to
3d6e3f9
Compare
HedwigAR
changed the title
HedwigAR
force-pushed
the
wc-2946-new-skiplink-widget
branch
from
a974d49 to
e73e93f
Compare
HedwigAR
force-pushed
the
wc-2946-new-skiplink-widget
branch
from
426a61a to
9f1fd25
Compare
| // Insert as the first child of the element with ID 'root' | ||
| const root = document.getElementById("root"); | ||
| if (root) { | ||
| root.insertBefore(link, root.firstChild); |
There was a problem hiding this comment.
| @@ -0,0 +1,20 @@ | |||
| .skip-link { | |||
There was a problem hiding this comment.
We have some convention that we use - we use .widget- prefix in classes.
So, this will be .widget-skip-link use it please for naming.
| import { ReactElement } from "react"; | ||
| import { SkipLinkPreviewProps } from "../typings/SkipLinkProps"; | ||
|
|
||
| export const preview = (props: SkipLinkPreviewProps): ReactElement => { |
There was a problem hiding this comment.
Do we want user to style this live in preview?
There was a problem hiding this comment.
I'm not sure, this is the first editorPreview I've made. So if there's improvements I'm all ears.
| @@ -0,0 +1,55 @@ | |||
| import { useEffect, useRef } from "react"; | |||
There was a problem hiding this comment.
I think you have to resolve this linter issues.
There was a problem hiding this comment.
You're right, I forgot to ran it again after I refactored some stuff. Should all be good now
iobuhov
left a comment
iobuhov
left a comment
There was a problem hiding this comment.
I'm not sure, this is the first editorPreview I've made. So if there's improvements I'm all ears.
I think you can at least pass styleObject from props so people can override preview styles.
Pull request type
New feature (non-breaking change which adds functionality)
Description
This PR contains a new skiplink widget, which is necessary for SC 2.4.1: Bypass Blocks .
The point of this widget is for the user to either give the ID of the main content, or to have a main tag on the page. When tabbing through the page, this widget should appear. When the user activates a link the focus should switch to the main content, skipping over repeating elements (such as the menu for example). This makes navigating the page through only keyboard easier.
What should be covered while testing?
Since this is a new widget, basically everything needs to be tested. This widget does only need to work in Mendix 11, since the option to not have auto focus on the page was introduced there.
The only thing that can't be tested yet is the design, since that's part of another story.
Expectations of this widget: