feat: add a11y support

nerdyman · Oct 18, 2022 · cf02024 · cf02024
2 parents 943dfeb + 86844e5
commit cf02024
Show file tree

Hide file tree

Showing 32 changed files with 7,210 additions and 5,786 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -7,43 +7,39 @@
       "jsx": true
     }
   },
-  "plugins": ["testing-library", "@typescript-eslint", "react", "jest", "jest-dom"],
+  "plugins": ["@typescript-eslint", "react"],
   "extends": [
     "eslint:recommended",
-    "plugin:jest/recommended",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:testing-library/recommended",
-    "plugin:jest-dom/recommended"
+    "plugin:@typescript-eslint/recommended"
   ],
   "env": {
     "browser": true,
-    "es6": true,
-    "jest/globals": true
+    "es6": true
   },
   "settings": {
     "react": { "version": "detect" }
   },
   "rules": {
     "linebreak-style": ["error", "unix"],
     "lines-around-comment": 0,
+    "no-constant-binary-expression": "error",
     "no-confusing-arrow": 0,
-    "no-console": ["warn", { "allow": ["warn"] }],
-    "no-debugger": 0,
-    "no-shadow": "warn",
+    "no-console": "error",
 
     "react/jsx-indent": 0,
     "react/jsx-indent-props": 0,
     "react/prop-types": 0,
 
+    "@typescript-eslint/no-shadow": "warn",
     "@typescript-eslint/no-unused-vars": [
-      "warn",
+      "error",
       {
         "args": "all",
-        "argsIgnorePattern": "^_",
-        "varsIgnorePattern": "^_"
+        "argsIgnorePattern": "^__",
+        "varsIgnorePattern": "^__"
       }
     ]
   }

diff --git a/.eslintrc.precommit.js b/.eslintrc.precommit.js
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -25,15 +25,17 @@ jobs:
             ${{ runner.os }}-yarn-
 
       - name: Install Dependencies
-        run: yarn install --frozen-lockfile
+        run: yarn install --immutable
 
       - name: Build
         run: yarn build
 
-      - name: Test & publish code coverage
-        uses: paambaati/codeclimate-action@v2.7.4
-        env:
-          CC_TEST_REPORTER_ID: '${{ secrets.CC_TEST_REPORTER_ID }}'
+      - name: Test
+        run: yarn test:ci
+
+      - name: Upload Test Coverage
+        uses: codecov/codecov-action@v3
         with:
-          coverageCommand: yarn test --ci --coverage
-          debug: true
+          token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: true
+          verbose: true
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,10 +1,14 @@
 const path = require('path');
+
 const codesandbox = require('remark-codesandbox');
 
-module.exports = {
+const storybookConfig = {
   addons: [
-    '@storybook/addon-viewport',
-    '@storybook/addon-controls',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/jest',
+    '@storybook/addon-coverage',
     '@storybook/addon-storysource',
     {
       name: '@storybook/addon-docs',
@@ -20,53 +24,49 @@ module.exports = {
         },
       },
     },
-    '@storybook/addon-actions/register',
   ],
-  babel: (config) => ({
-    ...config,
-    presets: [...config.presets, require.resolve('@emotion/babel-preset-css-prop')],
-  }),
   /** Files to load as stories */
-  stories: ['../docs/**/*.story.@(mdx|tsx)'],
+  stories: ['../docs/**/*.stories.@(mdx|tsx)'],
   /** Customise webpack config */
   webpackFinal: async (config) => {
-    // @HACK Horrific hack to shoehorn `remark-codesandbox` plugin into presets
-    //       by checking if they have a `remarkPlugins` option.
-    config.module.rules = config.module.rules.map((rule) => {
-      if (Array.isArray(rule.use)) {
-        rule.use = rule.use.map((use) => {
-          if (use.options && use.options.remarkPlugins) {
-            console.log('\t[main][CUSTOM] Found remark plugins.');
-            use.options.remarkPlugins.push([
-              codesandbox,
-              {
-                autoDeploy: process.env.NODE_ENV === 'production',
-                mode: 'iframe',
-                customTemplates: {
-                  'react-compare-slider': {
-                    entry: 'src/App.jsx',
-                    extends: '9si6l',
-                  },
-                },
-                query: {
-                  view: 'preview',
-                  hidedevtools: 1,
-                  hidenavigation: 1,
-                  fontsize: 14,
-                },
-              },
-            ]);
-          }
+    console.group('[webpackFinal]');
+
+    const mdxConfig = config.module.rules
+      .find(
+        (rule) => rule?.test?.test?.('story.mdx') && !rule?.exclude?.test?.('story.mdx')
+      )
+      ?.use?.find?.((use) => use.loader.includes('@storybook/mdx1-csf'));
 
-          return use;
-        });
-      }
+    console.debug('using MDX config', mdxConfig);
 
-      return rule;
-    });
+    mdxConfig.options = mdxConfig.options ?? {};
+    mdxConfig.options.remarkPlugins = mdxConfig.options.remarkPlugins ?? [];
+    mdxConfig.options.remarkPlugins.push([
+      codesandbox,
+      {
+        autoDeploy: process.env.NODE_ENV === 'production',
+        mode: 'iframe',
+        customTemplates: {
+          'react-compare-slider': {
+            entry: 'src/App.jsx',
+            extends: '9si6l',
+          },
+        },
+        query: {
+          view: 'preview',
+          hidedevtools: 1,
+          hidenavigation: 1,
+          fontsize: 14,
+        },
+      },
+    ]);
 
     config.resolve.alias['react-compare-slider'] = path.resolve(__dirname, '..', 'src');
 
+    console.groupEnd();
+
     return config;
   },
 };
+
+module.exports = storybookConfig;
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,26 +4,30 @@
   },
   "editor.rulers": [90],
   "editor.formatOnSave": true,
-  "eslint.autoFixOnSave": true,
   "eslint.packageManager": "yarn",
-  "eslint.validate": [
-    {
-      "language": "javascript",
-      "autoFix": true
-    },
-    {
-      "language": "javascriptreact",
-      "autoFix": true
-    },
-    {
-      "language": "typescript",
-      "autoFix": true
-    },
-    {
-      "language": "typescriptreact",
-      "autoFix": true
-    }
-  ],
-  "javascript.suggest.autoImports": false,
-  "typescript.suggest.autoImports": false
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/*.code-search": true,
+    ".env": false
+  },
+
+  "jest.autoRun": "off",
+  "jest.showCoverageOnLoad": false,
+
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
diff --git a/README.md b/README.md
@@ -32,6 +32,7 @@
 
 - Supports responsive images and any other React components (`picture`, `video`, `canvas`, `iframe` etc.)
 - Supports landscape and portrait orientations
+- Accessible &ndash; includes screen reader and keyboard support
 - Simple API
 - Unopinionated & fully customizable &ndash; optionally use your own components and styles
 - Responsive, fluid
@@ -57,7 +58,7 @@ npm install react-compare-slider
 
 ### Basic Image Usage
 
-You *may* use `ReactCompareSliderImage` to render images or use your own custom
+You _may_ use `ReactCompareSliderImage` to render images or use your own custom
 components.
 
 ```jsx
@@ -66,24 +67,25 @@ import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slide
 <ReactCompareSlider
   itemOne={<ReactCompareSliderImage src="..." srcSet="..." alt="Image one" />}
   itemTwo={<ReactCompareSliderImage src="..." srcSet="..." alt="Image two" />}
-/>
+/>;
 ```
 
 See the [Images docs](https://react-compare-slider.vercel.app/?path=/docs/docs-images--page) for more information and [demos](https://react-compare-slider.vercel.app/?path=/story/demos--images).
 
 ## Props
 
-| Prop | Type | Required | Default value | Description |
-|------|------|:--------:|---------------|-------------|
-| [`boundsPadding`](https://react-compare-slider.vercel.app/?path=/story/docs-bounds-padding--page) | `number` |   | `0` | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait). |
-| [`changePositionOnHover`](https://react-compare-slider.vercel.app/?path=/story/docs-change-position-on-hover--page) | `boolean` |   | `false` | Whether the slider should follow the pointer on hover. |
-| [`handle`](https://react-compare-slider.vercel.app/?path=/story/docs-handles--page) | `ReactNode` |   | `undefined` | Custom handle component. |
-| `itemOne`   | `ReactNode` | ✓ | `undefined` | First component to show in slider. |
-| `itemTwo`   | `ReactNode` | ✓ | `undefined` | Second component to show in slider. |
-| [`onlyHandleDraggable`](https://react-compare-slider.vercel.app/?path=/story/docs-only-handle-draggable--page) | `boolean`  |   | `false` | Whether to only change position when handle is interacted with (useful for touch devices). |
-| [`onPositionChange`](https://react-compare-slider.vercel.app/?path=/story/demos--on-position-change)  | `function`  |   | `undefined` | Callback on position change, returns current position percentage as argument `(position) => { ... }`. |
-| [`portrait`](https://react-compare-slider.vercel.app/?path=/story/demos--portrait) | `boolean`   |   | `false` | Whether to use portrait orientation. |
-| [`position`](https://react-compare-slider.vercel.app/?path=/story/demos--position)  | `number`    |   | `50` | Initial percentage position of divide (`0-100`). |
+| Prop                                                                                                                | Type        | Required | Default value | Description                                                                                           |
+| ------------------------------------------------------------------------------------------------------------------- | ----------- | :------: | ------------- | ----------------------------------------------------------------------------------------------------- |
+| [`boundsPadding`](https://react-compare-slider.vercel.app/?path=/story/docs-bounds-padding--page)                   | `number`    |          | `0`           | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait).       |
+| [`changePositionOnHover`](https://react-compare-slider.vercel.app/?path=/story/docs-change-position-on-hover--page) | `boolean`   |          | `false`       | Whether the slider should follow the pointer on hover.                                                |
+| [`handle`](https://react-compare-slider.vercel.app/?path=/story/docs-handles--page)                                 | `ReactNode` |          | `undefined`   | Custom handle component.                                                                              |
+| `itemOne`                                                                                                           | `ReactNode` |    ✓     | `undefined`   | First component to show in slider.                                                                    |
+| `itemTwo`                                                                                                           | `ReactNode` |    ✓     | `undefined`   | Second component to show in slider.                                                                   |
+| `keyboardIncrement`                                                                                                 | `number`    |          | `20`          | How many pixels to move when the slider handle is focused and keyboard arrow is pressed.              |
+| [`onlyHandleDraggable`](https://react-compare-slider.vercel.app/?path=/story/docs-only-handle-draggable--page)      | `boolean`   |          | `false`       | Whether to only change position when handle is interacted with (useful for touch devices).            |
+| [`onPositionChange`](https://react-compare-slider.vercel.app/?path=/story/demos--on-position-change)                | `function`  |          | `undefined`   | Callback on position change, returns current position percentage as argument `(position) => { ... }`. |
+| [`portrait`](https://react-compare-slider.vercel.app/?path=/story/demos--portrait)                                  | `boolean`   |          | `false`       | Whether to use portrait orientation.                                                                  |
+| [`position`](https://react-compare-slider.vercel.app/?path=/story/demos--position)                                  | `number`    |          | `50`          | Initial percentage position of divide (`0-100`).                                                      |
 
 See the [API docs](https://react-compare-slider.vercel.app/?path=/docs/docs-api--page) for more information.
 
@@ -95,7 +97,7 @@ The library supports all types of React components.
 
 - [Google Maps Demo](https://react-compare-slider.vercel.app/?path=/story/demos-custom-components--google-maps)
 
-Custom components can apply the same base styles as `ReactCompareSliderImage` 
+Custom components can apply the same base styles as `ReactCompareSliderImage`
 by using the [`styleFitContainer` CSS utility](https://react-compare-slider.vercel.app/?path=/docs/docs-api--page#stylefitcontainer).
 
 ### Custom Handles
@@ -104,11 +106,13 @@ by using the [`styleFitContainer` CSS utility](https://react-compare-slider.verc
 
 See the [Handles docs](https://react-compare-slider.vercel.app/?path=/docs/docs-handles--page) for more information.
 
-## Requirements
+## Real World Examples
 
-- React 16.8+
-- The [latest two versions of each major browser](./package.json#L49) are officially supported &ndash; try [version 1.2.1](https://www.npmjs.com/package/react-compare-slider/v/1.2.1) if you require legacy Edge support
+- [Official GOV.UK Coronavirus Dashboard](https://coronavirus.data.gov.uk/details/interactive-map/vaccinations#vaccinations-map-container)
+- [Upscayl, Free and Open Source AI Image Upscaler](https://github.com/upscayl/upscayl#free-and-open-source-ai-image-upscaler)
+- [DevTools-X, A collection of offline first developer utilities](https://github.com/fosslife/devtools-x)
 
-## Notes
+## Requirements
 
-Bootstrapped with [TSDX](https://github.com/formium/tsdx).
+- React 16.8+
+- The [latest two versions of each major browser](./package.json#L50) at time of release are officially supported &ndash; try [version 1.2.1](https://www.npmjs.com/package/react-compare-slider/v/1.2.1) if you require legacy Edge support
diff --git a/docs/.eslintrc b/docs/.eslintrc
@@ -0,0 +1,6 @@
+{
+  "extends": "../.eslintrc",
+  "rules": {
+    "no-console": 0
+  }
+}
diff --git a/docs/00-intro.story.mdx → docs/00-intro.stories.mdx b/docs/00-intro.story.mdx → docs/00-intro.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Docs/Intro" />
 

diff --git a/docs/01-api.story.mdx → docs/01-api.stories.mdx b/docs/01-api.story.mdx → docs/01-api.stories.mdx
@@ -1,4 +1,4 @@
-import { ArgsTable, Description, Meta } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Description, Meta } from '@storybook/addon-docs';
 
 import { ReactCompareSlider, ReactCompareSliderHandle, ReactCompareSliderImage, styleFitContainer } from 'react-compare-slider';
 

diff --git a/docs/02-images.story.mdx → docs/02-images.stories.mdx b/docs/02-images.story.mdx → docs/02-images.stories.mdx
@@ -1,4 +1,4 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 

diff --git a/docs/04-handles.story.mdx → docs/03-handles.stories.mdx b/docs/04-handles.story.mdx → docs/03-handles.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, ArgsTable, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Canvas, ArgsTable, Meta, Story } from '@storybook/addon-docs';
 
 import { ReactCompareSliderHandle } from 'react-compare-slider';
 

diff --git a/docs/05-only-handle-draggable.story.mdx → docs/05-only-handle-draggable.stories.mdx b/docs/05-only-handle-draggable.story.mdx → docs/05-only-handle-draggable.stories.mdx
@@ -1,4 +1,4 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 

diff --git a/docs/06-bounds-padding.story.mdx → docs/06-bounds-padding.stories.mdx b/docs/06-bounds-padding.story.mdx → docs/06-bounds-padding.stories.mdx
@@ -1,4 +1,4 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 

diff --git a/docs/07-change-position-on-hover.story.mdx → docs/07-change-position-on-hover.stories.mdx b/docs/07-change-position-on-hover.story.mdx → docs/07-change-position-on-hover.stories.mdx
@@ -1,4 +1,4 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 

diff --git a/docs/demos/00-props.story.tsx → docs/stories/00-props.stories.tsx b/docs/demos/00-props.story.tsx → docs/stories/00-props.stories.tsx
diff --git a/docs/demos/02-handles.story.tsx → docs/stories/02-handles.stories.tsx b/docs/demos/02-handles.story.tsx → docs/stories/02-handles.stories.tsx
diff --git a/docs/demos/03-custom-components.story.tsx → .../stories/03-custom-components.stories.tsx b/docs/demos/03-custom-components.story.tsx → .../stories/03-custom-components.stories.tsx