build: 🔥 build for Skip Lniks

docs/_sidebar.md

@@ -16,6 +16,7 @@
   - [Dark Mode Toggle Widget](/web-widgets/dark-mode-toggle-widget.md)
   - [Drag & Drop Widget](/web-widgets/drag-and-drop-widget.md)
   - [Image Carousel Widget](/web-widgets/image-carousel-widget.md)
+  - [Skip Link Widget](/web-widgets/skip-link-widget.md)
 
 * **[Utilities](/utilities/index.md)**
 

docs/web-widgets/index.md

@@ -6,3 +6,4 @@
 - [Dark Mode Toggle Widget](/web-widgets/dark-mode-toggle-widget.md)
 - [Drag & Drop Widget](/web-widgets/drag-and-drop-widget.md)
 - [Image Carousel Widget](/web-widgets/image-carousel-widget.md)
+- [Skip Link Widget](/web-widgets/skip-link-widget.md)

docs/web-widgets/skip-link-widget.md

@@ -0,0 +1 @@
+[ReadME](https://raw.githubusercontent.com/mendixlabs/app-services-components/main/packages/web-widgets/skip-link-widget/README.md ':include')

packages/web-widgets/skip-link-widget/README.md

@@ -2,12 +2,12 @@
 
 An Implementation of Skip links for Mendix.
 
-Skip links or Skip Navigation links are used to help assistive technologies skip long navigation and let its users get
-to the page content quicker:
+Skip links or Skip Navigation links are used to help assistive technologies skip long navigation and lets users get to
+the page content quicker:
 
 Read more about A11Y and Skip links [here](https://webaim.org/techniques/skipnav/)
 
-If you don't see anything when "tabbing" through your Mendix app see [here](http://www.outlinenone.com/)
+\*\* If you don't see anything when "tabbing" through your Mendix app see [here](http://www.outlinenone.com/)
 
 <table style="width:100%">
     <tr>
@@ -16,10 +16,10 @@ If you don't see anything when "tabbing" through your Mendix app see [here](http
     </tr>
   <tr>
     <td  >
-    <img align="center" width="550" alt="headerIMG" src="./assets/Before.gif" target="_blank" />
+    <img align="center" width="550" alt="headerIMG" src="https://raw.githubusercontent.com/mendixlabs/app-services-components/main/packages/web-widgets/skip-link-widget/assets/Before.gif" target="_blank" />
     </td>
     <td>
-    <img align="center" width="550" alt="headerIMG" src="./assets/After.gif" target="_blank" />
+    <img align="center" width="550" alt="headerIMG" src="https://raw.githubusercontent.com/mendixlabs/app-services-components/main/packages/web-widgets/skip-link-widget/assets/After.gif" target="_blank" />
 
 </td>
   </tr>
@@ -32,28 +32,29 @@ class names, but should you need some customizability please continue.
 
 The widget works best when added to your main layout page:
 
-<img align="center" width="550" alt="headerIMG" src="./assets/ex1.png" target="_blank" />
+<img align="center" width="550" alt="headerIMG" src="https://raw.githubusercontent.com/mendixlabs/app-services-components/main/packages/web-widgets/skip-link-widget/assets/ex1.png" target="_blank" />
 <br/>
 <br/>
-The widget adds some HTML in the dom - This is known as the skip link itself. You are free the style this div and button
-as you want by targeting `.skip_link`.
+The widget adds some HTML in the dom - This is known as the skip link itself.
+
+### Setup in Studio Pro
 
 <table style="width:100%">
   <tr>
-    <td  style="width:50%"><img align="center" width="550" alt="headerIMG" src="./assets/ex2.png" target="_blank" /></td>
+    <td  style="width:50%"><img align="center" width="550" alt="headerIMG" src="https://raw.githubusercontent.com/mendixlabs/app-services-components/main/packages/web-widgets/skip-link-widget/assets/ex2.png" target="_blank" /></td>
     <td>
     <table style="width:100%">
         <tr>
             <th>Name</th>
             <th>Desc.</th>
         </tr>
         <tr>
-            <td>Before/After</td>
-            <td>Sets if the skip link div and button must be added before or After Button class</td>
+            <td>Button Class</td>
+            <td>The class name to target to add the skip div/button to. Defaults to `.navbar-brand`</td>
         </tr>
         <tr>
-            <td>Button Class</td>
-            <td>The class name to target to add the skip div or button to. Defaults to `.navbar-brand`</td>
+            <td>Before/After</td>
+            <td>Sets if the skip link div and button must be added before or After Button class</td>
         </tr>
         <tr>
             <td>Main Content Class</td>
@@ -63,3 +64,31 @@ as you want by targeting `.skip_link`.
 </td>
   </tr>
 </table>
+
+### SCSS/CSS
+
+The widget provides some basic styling to the Skip link that comes in when tabbing through the app.
+
+Feel free to override this styling in your own `.css` or `.scss` files
+
+```css
+#skip_link {
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+#skip_link:focus {
+    position: static;
+    width: auto;
+    height: auto;
+}
+```
+
+### Issues / Limitations
+
+There are currently no know limitations, but adding your own classnames can result in some trail and error to get it
+working properly

packages/web-widgets/skip-link-widget/src/Skiplinkwidget.tsx

@@ -1,20 +1,23 @@
-import { createElement, useEffect, Fragment } from "react";
+import React, { createElement, useEffect, Fragment } from "react";
 
 import { SkiplinkwidgetContainerProps } from "../typings/SkiplinkwidgetProps";
 
 import "./ui/Skiplinkwidget.css";
 
-const ID_TO_ADD_TO_ELEMENT: string = "MAIN_CONTENT_SKIP_TO";
+const ID_TO_ADD_TO_ELEMENT = "MAIN_CONTENT_SKIP_TO";
+const ID_FOR_SKIP_LINK = "skip_link";
 
 const Skiplinkwidget: React.FC<SkiplinkwidgetContainerProps> = ({ before, addButtonTo, mainContentArea }) => {
     useEffect(() => {
         addSkipLinkButton();
         findMainContentAndAddIdToIt();
-    }, []);
+    });
 
-    const addSkipLinkButton = () => {
-        const r = document.getElementById("skip_link");
-        console.log(`r`, r?.remove());
+    const addSkipLinkButton = (): void => {
+        const foundSkipLink = document.getElementById(ID_FOR_SKIP_LINK);
+        if (foundSkipLink) {
+            foundSkipLink.remove();
+        }
         // Create Skip Link Div
         const newDiv = document.createElement("div");
         // Create Skip Link Button
@@ -24,7 +27,7 @@ const Skiplinkwidget: React.FC<SkiplinkwidgetContainerProps> = ({ before, addBut
         // Function To Go To Main Content
         button.onclick = () => onClickFunction();
         // Set Id
-        button.setAttribute("id", "skip_link");
+        button.setAttribute("id", ID_FOR_SKIP_LINK);
         // Set Classnames
         button.setAttribute("class", "btn");
         // Set Role
@@ -42,15 +45,14 @@ const Skiplinkwidget: React.FC<SkiplinkwidgetContainerProps> = ({ before, addBut
         if (!mainButtonElementToTarget.length) {
             throw new Error("addButtonTo class not found");
         }
-        console.log(`before`, before);
         if (before) {
             mainButtonElementToTarget[0].before(newDiv);
         } else {
             mainButtonElementToTarget[0].after(newDiv);
         }
     };
 
-    const findMainContentAndAddIdToIt = () => {
+    const findMainContentAndAddIdToIt = (): void => {
         let mainArea: HTMLCollectionOf<HTMLDivElement>;
 
         if (mainContentArea) {
@@ -68,7 +70,7 @@ const Skiplinkwidget: React.FC<SkiplinkwidgetContainerProps> = ({ before, addBut
         mainAreaId.setAttribute("tabindex", "0");
     };
 
-    const onClickFunction = () => {
+    const onClickFunction = (): void => {
         const mainAreaContent = document.getElementById(ID_TO_ADD_TO_ELEMENT);
         if (mainAreaContent) {
             mainAreaContent.focus();

packages/web-widgets/skip-link-widget/src/Skiplinkwidget.xml

@@ -8,14 +8,14 @@
     <icon/>
     <properties>
         <propertyGroup caption="General">
-           <property key="before" type="boolean" defaultValue="true">
-                <caption>Before</caption>
-                <description>Insert skip link button before or after targeted element</description>
-            </property>
             <property key="addButtonTo" type="string" required="false">
                 <caption>Button Class</caption>
                 <description>Class to add Skip Link Button to</description>
             </property>
+           <property key="before" type="boolean" defaultValue="true">
+                <caption>Before</caption>
+                <description>Insert skip link button before or after targeted element</description>
+            </property>
             <property key="mainContentArea" type="string" required="false">
                 <caption>Main Content Class</caption>
                 <description>Main Content Area Class Name To Target (Default: 'region-content')</description>

packages/web-widgets/skip-link-widget/src/ui/Skiplinkwidget.css

@@ -1,25 +1,13 @@
 /*
 Place your custom CSS here
 */
-.widget-hello-world {
-}
-a:focus,
-div:focus,
-h2:focus,
-button:focus {
-    outline-color: darkblue;
-    outline: 2px solid darkblue !important;
-    /* background-color: rgb(163, 42, 165)  */
-}
-
 #skip_link {
     position: absolute;
     left: -10000px;
     top: auto;
     width: 1px;
     height: 1px;
     overflow: hidden;
-    background-color: white;
 }
 
 #skip_link:focus {

packages/web-widgets/skip-link-widget/typings/SkiplinkwidgetProps.d.ts

@@ -10,15 +10,15 @@ export interface SkiplinkwidgetContainerProps {
     class: string;
     style?: CSSProperties;
     tabIndex?: number;
-    before: boolean;
     addButtonTo: string;
+    before: boolean;
     mainContentArea: string;
 }
 
 export interface SkiplinkwidgetPreviewProps {
     class: string;
     style: string;
-    before: boolean;
     addButtonTo: string;
+    before: boolean;
     mainContentArea: string;
 }