Merge pull request #518 from orangemug/fix/color-accessibility-ua-switch

Toggle color accessibility based on user agent

package-lock.json

@@ -4116,6 +4116,11 @@
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
       "dev": true
     },
+    "detect-browser": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/detect-browser/-/detect-browser-4.5.0.tgz",
+      "integrity": "sha512-uwyZNBwMhvRIOBIBTuDu+h4/a2bfFE/elUIvAOuKuBZcuy6yAJ/9dOe4r3wyWO/ZW2PcsP0dhEwiVwTPTTJp2Q=="
+    },
     "detect-node": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz",

package.json

@@ -26,6 +26,7 @@
     "classnames": "^2.2.6",
     "codemirror": "^5.40.2",
     "color": "^3.0.0",
+    "detect-browser": "^4.5.0",
     "file-saver": "^1.3.8",
     "jsonlint": "github:josdejong/jsonlint#85a19d7",
     "lodash.capitalize": "^4.2.1",

src/components/Toolbar.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import {detect} from 'detect-browser';
 
 import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
 
@@ -9,6 +10,11 @@ import logoImage from 'maputnik-design/logos/logo-color.svg'
 import pkgJson from '../../package.json'
 
 
+// This is required because of <https://stackoverflow.com/a/49846426>, there isn't another way to detect support that I'm aware of.
+const browser = detect();
+const colorAccessibilityFiltersEnabled = ['chrome', 'firefox'].indexOf(browser.name) > -1;
+
+
 class IconText extends React.Component {
   static propTypes = {
     children: PropTypes.node,
@@ -137,18 +143,22 @@ export default class Toolbar extends React.Component {
       {
         id: "filter-deuteranopia",
         title: "Map (deuteranopia)",
+        disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-protanopia",
         title: "Map (protanopia)",
+        disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-tritanopia",
         title: "Map (tritanopia)",
+        disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-achromatopsia",
         title: "Map (achromatopsia)",
+        disabled: !colorAccessibilityFiltersEnabled,
       },
     ];
 
@@ -201,7 +211,7 @@ export default class Toolbar extends React.Component {
             <select onChange={(e) => this.handleSelection(e.target.value)} value={currentView.id}>
               {views.map((item) => {
                 return (
-                  <option key={item.id} value={item.id}>
+                  <option key={item.id} value={item.id} disabled={item.disabled}>
                     {item.title}
                   </option>
                 );