fix: small improvements

Author: HedwigJDoets

packages/pluggableWidgets/skiplink-web/src/SkipLink.editorConfig.ts

@@ -20,12 +20,6 @@ export function check(values: any): Problem[] {
             message: "Link text is required"
         });
     }
-    if (!values.mainContentId) {
-        errors.push({
-            property: "mainContentId",
-            message: "Main content ID is required"
-        });
-    }
     return errors;
 }
 

packages/pluggableWidgets/skiplink-web/src/SkipLink.editorPreview.tsx

@@ -1,4 +1,4 @@
-import { createElement, ReactElement } from "react";
+import { ReactElement } from "react";
 import { SkipLinkPreviewProps } from "../typings/SkipLinkProps";
 
 export const preview = (props: SkipLinkPreviewProps): ReactElement => {
@@ -25,8 +25,26 @@ export const preview = (props: SkipLinkPreviewProps): ReactElement => {
                 </a>
             </div>
         );
+    } else {
+        return <a
+        href={`#${props.mainContentId}`}
+        style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            background: "#fff",
+            color: "#0078d4",
+            padding: "8px 16px",
+            zIndex: 1000,
+            textDecoration: "none",
+            border: "2px solid #0078d4",
+            borderRadius: 4,
+            fontWeight: "bold"
+        }}
+    >
+        {props.linkText}
+    </a>
     }
-    return <div />;
 };
 
 export function getPreviewCss(): string {

packages/pluggableWidgets/skiplink-web/src/SkipLink.tsx

@@ -28,7 +28,15 @@ export function SkipLink({ linkText, mainContentId }: SkipLinkProps): null {
         // Handler to move focus to the main content
         function handleClick(event: MouseEvent) {
             event.preventDefault();
-            const main = document.getElementById(mainContentId);
+            let main: HTMLElement;
+            const mainByID = document.getElementById(mainContentId);
+            if(mainContentId !== "" && mainByID !== null){
+                main = mainByID;
+            } 
+            else {
+                main = document.getElementsByTagName("main")[0];
+            }
+
             if (main) {
                 // Store previous tabindex
                 const prevTabIndex = main.getAttribute("tabindex");

packages/pluggableWidgets/skiplink-web/src/SkipLink.xml

@@ -4,16 +4,16 @@
     <description>A skip link for accessibility, allowing users to jump directly to the main content.</description>
     <studioProCategory>Accessibility</studioProCategory>
     <studioCategory>Accessibility</studioCategory>
-    <helpUrl>https://docs.mendix.com/appstore/widgets/skiplink</helpUrl>
+    <helpUrl></helpUrl>
     <properties>
         <propertyGroup caption="General">
             <property key="linkText" type="string" defaultValue="Skip to main content">
                 <caption>Link text</caption>
-                <description>The text displayed for the skip link.</description>
+                <description>The text displayed in the skip link.</description>
             </property>
-            <property key="mainContentId" type="string" defaultValue="main-content">
+            <property key="mainContentId" type="string">
                 <caption>Main content ID</caption>
-                <description>The id of the main content element to jump to.</description>
+                <description>The id of the main content element to jump to, if left empty the skip link widget will search for a main tag on the page.</description>
             </property>
         </propertyGroup>
     </properties>

packages/pluggableWidgets/skiplink-web/tsconfig.json

@@ -18,8 +18,7 @@
         "skipLibCheck": true,
         "noUnusedLocals": true,
         "noUnusedParameters": true,
-        "jsx": "react",
-        "jsxFactory": "createElement",
+        "jsx": "react-jsx",
         "allowSyntheticDefaultImports": true,
         "esModuleInterop": true,
         "useUnknownInCatchVariables": false,