meetfranz · adlk · Dec 9, 2018 · Dec 10, 2018
diff --git a/.eslintrc b/.eslintrc
@@ -39,7 +39,8 @@
         "allowChildren": false
       }
     ],
-    "jsx-a11y/click-events-have-key-events": 1
+    "jsx-a11y/click-events-have-key-events": 1,
+    "no-bitwise": 1
   },
   "globals": {
     "window": true,

diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
@@ -58,7 +58,7 @@ export default @observer class Sidebar extends Component {
     const { intl } = this.context;
 
     return (
-      <div className="sidebar">
+      <div className="sidebar" role="navigation">
         <Tabbar
           {...this.props}
           enableToolTip={() => this.enableToolTip()}
@@ -69,6 +69,7 @@ export default @observer class Sidebar extends Component {
           onClick={toggleMuteApp}
           className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
           data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
+          aria-label={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)}`}
         >
           <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} />
         </button>
@@ -77,6 +78,7 @@ export default @observer class Sidebar extends Component {
           onClick={() => openSettings({ path: 'recipes' })}
           className="sidebar__button sidebar__button--new-service"
           data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
+          aria-label={`${intl.formatMessage(messages.addNewService)}`}
         >
           <i className="mdi mdi-plus-box" />
         </button>
@@ -85,6 +87,7 @@ export default @observer class Sidebar extends Component {
           onClick={() => openSettings({ path: 'app' })}
           className="sidebar__button sidebar__button--settings"
           data-tip={`${intl.formatMessage(messages.settings)} (${ctrlKey}+,)`}
+          aria-label={`${intl.formatMessage(messages.settings)}`}
         >
           <i className="mdi mdi-settings" />
         </button>

diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { autorun } from 'mobx';
 import { observer } from 'mobx-react';
@@ -88,34 +88,47 @@ export default @observer class ServiceWebview extends Component {
     }
 
     return (
-      <div className={webviewClasses}>
-        {service.hasCrashed && (
-          <WebviewCrashHandler
-            name={service.recipe.name}
-            webview={service.webview}
-            reload={reload}
-          />
-        )}
-        {service.isEnabled && service.isLoading && service.isFirstLoad && (
-          <WebviewLoader
-            loaded={!service.isLoading}
-            name={service.name}
-          />
-        )}
-        {service.isError && (
-          <WebviewErrorHandler
-            name={service.recipe.name}
-            errorMessage={service.errorMessage}
-            reload={reload}
-            edit={edit}
-          />
+      <div
+        className={webviewClasses}
+        role="tabpanel"
+        id={service.DOMID}
+        tabIndex={service.isActive ? 0 : -1}
+      >
+        {service.isActive && (
+          <Fragment>
+            {service.hasCrashed && (
+              <WebviewCrashHandler
+                name={service.recipe.name}
+                webview={service.webview}
+                reload={reload}
+              />
+            )}
+            {service.isEnabled && service.isLoading && service.isFirstLoad && (
+              <WebviewLoader
+                loaded={!service.isLoading}
+                name={service.name}
+              />
+            )}
+            {service.isError && (
+              <WebviewErrorHandler
+                name={service.recipe.name}
+                errorMessage={service.errorMessage}
+                reload={reload}
+                edit={edit}
+              />
+            )}
+          </Fragment>
         )}
         {!service.isEnabled ? (
-          <ServiceDisabled
-            name={service.recipe.name}
-            webview={service.webview}
-            enable={enable}
-          />
+          <Fragment>
+            {service.isActive && (
+              <ServiceDisabled
+                name={service.recipe.name}
+                webview={service.webview}
+                enable={enable}
+              />
+            )}
+          </Fragment>
         ) : (
           <Webview
             ref={(element) => { this.webview = element; }}

diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
@@ -37,8 +37,9 @@ class TabBarSortableList extends Component {
     } = this.props;
 
     return (
-      <ul
+      <div
         className="tabs"
+        role="tablist"
       >
         {services.map((service, index) => (
           <TabItem
@@ -67,7 +68,7 @@ class TabBarSortableList extends Component {
             <span className="mdi mdi-plus" />
           </button>
         </li> */}
-      </ul>
+      </div>
     );
   }
 }

diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
@@ -150,24 +150,29 @@ class TabItem extends Component {
     }
 
     return (
-      <li
+      <button
+        type="button"
         className={classnames({
           'tab-item': true,
           'is-active': service.isActive,
           'has-custom-icon': service.hasCustomIcon,
           'is-disabled': !service.isEnabled,
         })}
-        onClick={clickHandler}
+        role="tab"
         onContextMenu={() => menu.popup(remote.getCurrentWindow())}
         data-tip={`${service.name} ${shortcutIndex <= 9 ? `(${ctrlKey}+${shortcutIndex})` : ''}`}
+        aria-label={service.name}
+        aria-selected={service.isActive}
+        aria-controls={service.DOMID}
+        onClick={clickHandler}
       >
         <img
           src={service.icon}
           className="tab-item__icon"
           alt=""
         />
         {notificationBadge}
-      </li>
+      </button>
     );
   }
 }

diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js
@@ -36,7 +36,13 @@ export default @observer class SettingsLayout extends Component {
 
     return (
       <Appear transitionName="fadeIn-fast">
-        <div className="settings-wrapper">
+        <div
+          id="settings__window"
+          className="settings-wrapper"
+          role="dialog"
+          aria-modal
+          aria-labelledby="modal__header"
+        >
           <ErrorBoundary>
             <button
               type="button"
@@ -50,6 +56,7 @@ export default @observer class SettingsLayout extends Component {
                 type="button"
                 className="settings__close mdi mdi-close"
                 onClick={closeSettings}
+                aria-label="Close Settings"
               />
             </div>
           </ErrorBoundary>

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
@@ -142,7 +142,7 @@ export default @observer class EditSettingsForm extends Component {
     return (
       <div className="settings__main">
         <div className="settings__header">
-          <h1>{intl.formatMessage(messages.headline)}</h1>
+          <h1 id="modal__header">{intl.formatMessage(messages.headline)}</h1>
         </div>
         <div className="settings__body">
           <form

diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.js
@@ -53,7 +53,10 @@ export default @observer class Radio extends Component {
             {field.label}
           </label>
         )}
-        <div className="franz-form__radio-wrapper">
+        <div
+          className="franz-form__radio-wrapper"
+          role="radiogroup"
+        >
           {field.options.map(type => (
             <label
               key={type.value}
@@ -62,6 +65,9 @@ export default @observer class Radio extends Component {
                 'franz-form__radio': true,
                 'is-selected': field.value === type.value,
               })}
+              role="radio"
+              aria-checked={field.value === type.value}
+              tabIndex="0"
             >
               <input
                 id={`${field.id}-${type.value}`}

diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js
@@ -37,13 +37,20 @@ export default @observer class Toggle extends Component {
     }
 
     return (
-      <div
+      <button
+        type="button"
         className={classnames([
           'franz-form__field',
           'franz-form__toggle-wrapper',
           'franz-form__toggle-disabled',
           className,
         ])}
+        onClick={() => {
+          console.log('value', field.value);
+          field.value = !field.value;
+        }}
+        role="checkbox"
+        aria-checked={field.value}
       >
         <label
           htmlFor={field.id}
@@ -60,11 +67,19 @@ export default @observer class Toggle extends Component {
             value={field.name}
             checked={field.value}
             onChange={e => (!disabled ? this.onChange(e) : null)}
+            tabIndex={0}
           />
         </label>
         {field.error && <div className={field.error}>{field.error}</div>}
-        {field.label && showLabel && <label className="franz-form__label" htmlFor={field.id}>{field.label}</label>}
-      </div>
+        {field.label && showLabel && (
+          <label
+            className="franz-form__label"
+            htmlFor={field.id}
+          >
+            {field.label}
+          </label>
+        )}
+      </button>
     );
   }
 }
diff --git a/src/helpers/id-helpers.js b/src/helpers/id-helpers.js
@@ -0,0 +1,5 @@
+export const createRandomIdString = (length = 40) => {
+  const chars = [...'ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz_-'];
+
+  return [...Array(length)].map(() => chars[Math.random() * chars.length | 0]).join``;
+};
diff --git a/src/models/Service.js b/src/models/Service.js
@@ -2,11 +2,15 @@ import { computed, observable, autorun } from 'mobx';
 import path from 'path';
 import normalizeUrl from 'normalize-url';
 
+import { createRandomIdString } from '../helpers/id-helpers';
+
 const debug = require('debug')('Franz:Service');
 
 export default class Service {
   id = '';
 
+  DOMID = createRandomIdString();
+
   recipe = '';
 
   webview = null;

diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
@@ -42,6 +42,11 @@
   &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(0.2); }
   &.has-custom-icon .tab-item__icon { border-radius: $theme-border-radius; }
   &:active .tab-item__icon { opacity: .7; }
+
+  button {
+    width: 100%;
+    height: 100%;
+  }
 
   .tab-item__icon {
     height: auto;

diff --git a/src/webview/darkmode.js b/src/webview/darkmode.js
@@ -3,11 +3,11 @@
 import path from 'path';
 import fs from 'fs-extra';
 
-const debug = require('debug')('Franz:DarkMode');
+import { createRandomIdString } from '../helpers/id-helpers';
 
-const chars = [...'abcdefghijklmnopqrstuvwxyz'];
+const debug = require('debug')('Franz:DarkMode');
 
-const ID = [...Array(20)].map(() => chars[Math.random() * chars.length | 0]).join``;
+const ID = createRandomIdString();
 
 export function injectDarkModeStyle(recipePath) {
   const darkModeStyle = path.join(recipePath, 'darkmode.css');