Merge pull request #22 from wswebcreation/feat/accessibility-lines

Feat/accessibility lines

Author: wswebcreation

.eslintrc.js

@@ -12,6 +12,10 @@ module.exports = {
     $: true,
     $$: true,
     browser: true,
+    expect: true,
+    describe: true,
+    it: true,
+    beforeEach: true,
   },
   parser: 'babel-eslint',
   parserOptions: {

.travis.yml

@@ -16,6 +16,7 @@ before_script:
   - npm install
 
 script:
+  - npm run lint
   - npm run compile
   - npm run test.unit.coverage
   - npm run test.saucelabs

README.md

@@ -29,6 +29,7 @@ You can:
 - increase the element dimensions screenshots
 - use different comparison methods
 - **NEW:** We now support Puppeteer with WebdriverIO
+- **NEW:** You can now verify how your website will support tabbing with your keyboard, see also [here](./README.md#tabbing-through-a-website)
 - and much more, see the [options here](./docs/OPTIONS.md)
 
 The module is now based on the power of the new [`webdriver-image-comparison`](https://github.com/wswebcreation/webdriver-image-comparison) module. This is a lightweight module to retrieve the needed data and screenshots for all browsers / devices.
@@ -82,6 +83,18 @@ exports.config = {
             blockOutToolBar: true,
             // NOTE: When you are testing a hybrid app please use this setting
             isHybridApp: true,
+            // Options for the tabbing image
+            tabbableOptions:{
+                circle:{
+                    size: 18,
+                    fontSize: 18,
+                    // ...
+                },
+                line:{
+                    color: '#ff221a', // hex-code or for example words like `red|black|green`
+                    width: 3,
+                },
+            }
             // ... more options
         }],
     ],
@@ -91,11 +104,6 @@ exports.config = {
 
 More plugin options can be found [here](./docs/OPTIONS.md#plugin-options).
 
-### DEV-TOOLS support
-You can also use the Chrome DevTools as automation protocol in combination with this module. You don't need to do anything,
-just change `automationProtocol: 'devtools'` in your config.
-More information about how to use the DEV-TOOLS can be found in [this](https://webdriver.io/blog/2019/09/16/devtools.html) blog post.
-
 ### Writing tests
 *wdio-image-comparison-service* is framework agnostic, meaning that you can use it with all the frameworks WebdriverIO supports like `Jasmine|Mocha`.
 You can use it like this:
@@ -108,24 +116,30 @@ describe('Example', () => {
 
   it('should save some screenshots', () => {
   	// Save a screen
-  	browser.saveScreen('examplePaged', { /* some options*/ });
+  	browser.saveScreen('examplePaged', { /* some options */ });
 
   	// Save an element
-  	browser.saveElement($('#element-id'), 'firstButtonElement', { /* some options*/ });
+  	browser.saveElement($('#element-id'), 'firstButtonElement', { /* some options */ });
+
+  	// Save a full page screenshot
+  	browser.saveFullPageScreen('fullPage', { /* some options */ });
 
-  	// Save a full page screens
-  	browser.saveFullPageScreen('fullPage', { /* some options*/ });
+  	// Save a full page screenshot with all tab executions
+  	browser.saveTabbablePage('save-tabbable', { /* some options, use the same options as for saveFullPageScreen */ });
   });
 
   it('should compare successful with a baseline', () => {
   	// Check a screen
-  	expect(browser.checkScreen('examplePaged', { /* some options*/ })).toEqual(0);
+  	expect(browser.checkScreen('examplePaged', { /* some options */ })).toEqual(0);
 
   	// Check an element
-  	expect(browser.checkElement($('#element-id'), 'firstButtonElement', { /* some options*/ })).toEqual(0);
+  	expect(browser.checkElement($('#element-id'), 'firstButtonElement', { /* some options */ })).toEqual(0);
 
-  	// Check a full page screens
-  	expect(browser.checkFullPageScreen('fullPage', { /* some options*/ })).toEqual(0);
+  	// Check a full page screenshot
+  	expect(browser.checkFullPageScreen('fullPage', { /* some options */ })).toEqual(0);
+
+  	// Check a full page screenshot with all tab executions
+  	expect(browser.checkTabbablePage('check-tabbable', { /* some options, use the same options as for checkFullPageScreen */ })).toEqual(0);
   });
 });
 ```
@@ -184,9 +198,40 @@ const checkResult = {
 
 See the [Check output on failure](./docs/OUTPUT.md#check-output-on-failure) section in the [output](./docs/OUTPUT.md) docs for the images.
 
-### Typescript support
+### Tabbing through a website
+We now support checking if a website is accessible through using the keyboards `TAB`-key. Testing this part of accessibility has always been a time consuming (manual) job and pretty hard to do through automation.
+With the methods `saveTabbablePage` and `checkTabbablePage` you can now draw lines and dots on your website to verify the tabbing order.
+
+Be aware of the fact that this is only useful for desktop browser and **NOT** for mobile devices. All desktop browsers are supporting this feature, see the browser matrix on the top of this page to check which desktop browsers and versions are supported.
+
+> **NOTE:**<br>
+> The work is inspired by [Viv Richards](https://github.com/vivrichards600) his blog post about ["AUTOMATING PAGE TABABILITY (IS THAT A WORD?) WITH VISUAL TESTING"](https://vivrichards.co.uk/accessibility/automating-page-tab-flows-using-visual-testing-and-javascript).<br>
+> The way tabbable elements are selected are based on the module [tabbable](https://github.com/davidtheclark/tabbable). If there are any issues regarding the tabbing please check the [README.md](https://github.com/davidtheclark/tabbable/blob/master/README.md) and especially the [More details](https://github.com/davidtheclark/tabbable/blob/master/README.md#more-details)-section.
+
+#### How does it work
+Both methods will create a `canvas` element on your website and draw lines and dots to show you where your TAB would go if an end-user would use it. After that it will create a full page screenshot to give you a good overview of the flow.
 
-Library supports typescript types. To your `tsconfig.json` add the following entry to `types`:
+> **Use the `saveTabbablePage` only when you need to create a screenshot and DON'T want to compare it with a base line image.**
+
+When you want to compare the tabbing flow with a baseline, then you can use the `checkTabbablePage`-method. You **DON'T** need to use the two methods together. If there is already a baseline image created, which can automatically be done by providing `autoSaveBaseline: true` when you instantiate the service,
+the `checkTabbablePage` will first create the *actual* image and then compare it against the baseline.
+
+##### Options
+Both methods use the same options as the [`saveFullPageScreen`](https://github.com/wswebcreation/webdriver-image-comparison/blob/master/docs/OPTIONS.md#savefullpagescreen-or-savetabbablepage) or the
+[`compareFullPageScreen`](https://github.com/wswebcreation/webdriver-image-comparison/blob/master/docs/OPTIONS.md#comparefullpagescreen-or-comparetabbablepage).
+
+#### Example
+This is an example of how the tabbing works on the website of our amazing sponsor [Sauce Labs](https://www.saucelabs.com):
+
+![Sauce Labs tabbing example](./docs/images/tabbable-sauce-labs-chrome-latest-1366x768.png)
+
+### DEV-TOOLS support
+You can also use the Chrome DevTools as automation protocol in combination with this module. You don't need to do anything,
+just change `automationProtocol: 'devtools'` in your config.
+More information about how to use the DEV-TOOLS can be found in [this](https://webdriver.io/blog/2019/09/16/devtools.html) blog post.
+
+### Typescript support
+We now also support typescript types. Add the following to the `types` in your `tsconfig.json`:
 
 ```json
 {

demo.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>inputs</title>
+</head>
+<body>
+
+<h2>Code example</h2>
+<pre>
+    &lt;input tabindex="3"&gt;
+    &lt;input tabindex="0"&gt;
+    &lt;input tabindex="-1"&gt;
+    &lt;input&gt;
+    &lt;input tabindex="2"&gt;
+    &lt;input tabindex="1"&gt;
+    &lt;span tabindex="4"&gt;This wouldn’t normally receive focus (4) largest value. Next tab will give focus to the rest of tabnavigable elements in code source order.&lt;/span&gt;
+    &lt;a href="#" &gt;Link 1&lt;/a&gt;
+    &lt;a href="#"&gt;Link 2&lt;/a&gt;
+    &lt;a href="#"&gt;Link 3&lt;/a&gt;
+    &lt;a href="#"&gt;Link 4&lt;/a&gt;
+</pre>
+
+<br><br>
+
+<h2>Live elements</h2>
+<p>
+    <input tabindex="3"> (3) Will receive focus third<br><br>
+    <input tabindex="0" style="margin-left: 50px"> (0) In normal source order<br><br>
+    <input tabindex="-1" style="margin-left: 0"> (-1) Will not receive focus<br><br>
+    <input> (n/a) In normal source order<br><br>
+    <input tabindex="2" style="margin-left: 20px"> (2) Will receive focus second<br><br>
+    <input tabindex="1" style="margin-left: 0"> (1) Will receive focus first<br><br>
+    <span tabindex="4" style="margin-left: 40px">This wouldn’t normally receive focus</span>
+    (4) largest value. Next tab will give focus to the
+    rest of tabnavigable elements in code source order.<br><br>
+    <a href="#" style="margin-left: 0">Link 1</a><br><br>
+    <a href="#" style="margin-left: 20px">Link 2</a><br><br>
+    <a href="#" style="margin-left: 30px">Link 3 </a><br><br>
+    <a href="#" style="margin-left: 40px">Link 4</a><br><br>
+</p>
+</body>
+</html>

docs/images/tabbable-sauce-labs-chrome-latest-1366x768.png

@@ -1,3 +1,3 @@
-import WdioICS from './service';
+import WdioICS from './service'
 
-export default WdioICS;
+export default WdioICS