Merge c5a8732 into 6c9151d

wswebcreation · Feb 23, 2020 · 4981f21 · 4981f21
2 parents 6c9151d + c5a8732
commit 4981f21
Show file tree

Hide file tree

Showing 21 changed files with 816 additions and 135 deletions.
diff --git a/docs/OPTIONS.md b/docs/OPTIONS.md
@@ -137,6 +137,99 @@ accepts an option object can also be used to set the screenshotPath value:
 
 The padding that needs to be added to the toolbar bar on iOS and Android to do a proper cutout of the the viewport.
 
+### `tabbableOptions`
+- **Type:** `object`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The options that can be changed for the lines and dots if you use the `{save|check}Tabbable`-methods. The options are explained below.
+
+#### `tabbableOptions.circle`
+- **Type:** `object`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The options to change the circle.
+
+##### `tabbableOptions.circle.backgroundColor`
+- **Type:** `string`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The background color of the circle.
+
+##### `tabbableOptions.circle.borderColor`
+- **Type:** `string`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The border color of the circle.
+
+##### `tabbableOptions.circle.borderWidth`
+- **Type:** `number`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The border width of the circle.
+
+##### `tabbableOptions.circle.fontColor`
+- **Type:** `string`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The color of the font of the text in the circle. This will only be shown if [`showNumber`](./OPTIONS.md#tabbableoptionscircleshownumber) is set to `true`.
+
+##### `tabbableOptions.circle.fontFamily`
+- **Type:** `string`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The family of the font of the text in the circle. This will only be shown if [`showNumber`](./OPTIONS.md#tabbableoptionscircleshownumber) is set to `true`.
+
+Make sure to set fonts that are supported by the browsers.
+
+##### `tabbableOptions.circle.fontSize`
+- **Type:** `number`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The size of the font of the text in the circle. This will only be shown if [`showNumber`](./OPTIONS.md#tabbableoptionscircleshownumber) is set to `true`.
+
+##### `tabbableOptions.circle.size`
+- **Type:** `number`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The size of the circle.
+
+##### `tabbableOptions.circle.showNumber`
+- **Type:** `showNumber`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+Show the tab sequence number in the circle.
+
+#### `tabbableOptions.line`
+- **Type:** `object`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The options to change the line.
+
+##### `tabbableOptions.line.color`
+- **Type:** `string`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The color of the line.
+
+##### `tabbableOptions.line.width`
+- **Type:** `number`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The width of the line.
+
 ### Plugin compare options 
 The compare options can be set as plugin options, see [Compare options](./OPTIONS.md#compare-options)
 

diff --git a/lib/clientSideScripts/__snapshots__/removeCustomCss.spec.ts.snap b/lib/clientSideScripts/__snapshots__/removeCustomCss.spec.ts.snap
diff --git a/lib/clientSideScripts/__snapshots__/removeElementFromDom.spec.ts.snap b/lib/clientSideScripts/__snapshots__/removeElementFromDom.spec.ts.snap
@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`removeElementFromDom should be able to remove an element from the body 1`] = `
+<body>
+  <div>
+       
+    <span
+      id="id-1"
+    >
+      Hello
+    </span>
+       
+    <span
+      id="id-2"
+    >
+      Hello
+    </span>
+       
+    <div>
+           
+      <span
+        id="id-3"
+      >
+        Hello
+      </span>
+           
+      <span
+        id="id-4"
+      >
+        Hello
+      </span>
+        
+    </div>
+  </div>
+</body>
+`;
+
+exports[`removeElementFromDom should be able to remove an element from the body 2`] = `
+<body>
+  <div>
+       
+       
+    <span
+      id="id-2"
+    >
+      Hello
+    </span>
+       
+    <div>
+           
+      <span
+        id="id-3"
+      >
+        Hello
+      </span>
+           
+      <span
+        id="id-4"
+      >
+        Hello
+      </span>
+        
+    </div>
+  </div>
+</body>
+`;
+
+exports[`removeElementFromDom should be able to remove the custom css 1`] = `"body:{width:100%}"`;
+
+exports[`removeElementFromDom should be able to remove the custom css 2`] = `""`;
+
+exports[`removeElementFromDom should do nothing if custom css is not present 1`] = `""`;
+
+exports[`removeElementFromDom should do nothing if custom css is not present 2`] = `""`;
diff --git a/lib/clientSideScripts/drawTabbableOnCanvas.interfaces.ts b/lib/clientSideScripts/drawTabbableOnCanvas.interfaces.ts
@@ -0,0 +1,4 @@
+export interface ElementCoordinate {
+  x: number;
+  y: number;
+}