From 08981fd444bcfb133e9aac1354687b346c5c12c2 Mon Sep 17 00:00:00 2001
From: Sharon Kennedy <sharon@nomadiclabs.ca>
Date: Fri, 14 Feb 2020 17:38:20 +0100
Subject: [PATCH] wcag compliance

---
 src/components/_chat.scss                    | 11 ++--
 src/components/_dark_mode.scss               | 61 ++++++++++++++++++++
 src/components/_loader.scss                  |  2 +-
 src/components/_variables.scss               | 18 ++++--
 src/components/{widget.scss => _widget.scss} |  4 +-
 src/components/chatbox.jsx                   | 21 ++++++-
 src/components/styles.scss                   |  5 ++
 src/components/widget.js                     | 11 ++--
 8 files changed, 111 insertions(+), 22 deletions(-)
 create mode 100644 src/components/_dark_mode.scss
 rename src/components/{widget.scss => _widget.scss} (97%)
 create mode 100644 src/components/styles.scss

diff --git a/src/components/_chat.scss b/src/components/_chat.scss
index 6941fa9..23b8f42 100644
--- a/src/components/_chat.scss
+++ b/src/components/_chat.scss
@@ -6,15 +6,15 @@
   font-family: $theme-font;
   display: flex;
   flex-direction: column;
-  min-height: 50vh;
+  height: 60vh;
+  max-height: 100vh;
+  min-height: 180px;
   border: 1px solid $theme-color;
 
   .message-window {
     background-color: $light-color;
-    flex: 1 0 auto;
+    flex: 1 1 auto;
     padding: 0.5rem;
-    height: 300px;
-    max-height: 100%;
     overflow: auto;
     display: flex;
     flex-direction: column-reverse;
@@ -37,6 +37,7 @@
       margin-top: 0.5rem;
       margin-bottom: 0.5rem;
       width: fit-content;
+      border: 1px solid $theme-color;
     }
 
     &.from-me {
@@ -58,7 +59,6 @@
       .text {
         background-color: $white;
         color: $dark-color;
-        border: 1px solid $theme-color;
         border-radius: 15px 15px 15px 0;
         margin-right: 10%;
       }
@@ -101,4 +101,5 @@
       cursor: pointer;
     }
   }
+
 }
\ No newline at end of file
diff --git a/src/components/_dark_mode.scss b/src/components/_dark_mode.scss
new file mode 100644
index 0000000..0360622
--- /dev/null
+++ b/src/components/_dark_mode.scss
@@ -0,0 +1,61 @@
+@media (prefers-color-scheme: dark) {
+  .dock {
+    background: $dark-theme-color;
+  }
+
+  .loader {
+    color: $dark-theme-color;
+  }
+
+  #ocrcc-chatbox {
+    border: 1px solid $dark-theme-color;
+
+    .widget-header {
+      background-color: $dark-theme-color;
+    }
+
+    .message-window {
+      background-color: $dark-background-color;
+    }
+
+    .notices {
+      color: transparentize($light-text-color, 0.3);
+    }
+
+    .message {
+      .text {
+        border: 1px solid $light-text-color;
+      }
+
+      &.from-me {
+        .text {
+          background-color: $light-background-color;
+          color: $dark-text-color;
+        }
+      }
+
+      &.from-support {
+        .text {
+          background-color: $dark-theme-color;
+          color: $light-text-color;
+        }
+      }
+    }
+
+    .input-window {
+      form {
+        border-top: 1px solid $dark-theme-color;
+      }
+
+      input[type="text"] {
+        background-color: $light-background-color;
+        color: $dark-text-color;
+      }
+
+      input[type="submit"] {
+        background-color: $dark-theme-color;
+        color: $light-text-color;
+      }
+    }
+  }
+}
diff --git a/src/components/_loader.scss b/src/components/_loader.scss
index f31a8d7..6275367 100644
--- a/src/components/_loader.scss
+++ b/src/components/_loader.scss
@@ -10,7 +10,7 @@
   animation: load7 1.8s infinite ease-in-out;
 }
 .loader {
-  color: $teal;  /*purple*/
+  color: $theme-color;
   font-size: 10px;
   margin: 1rem auto;
   margin-bottom: 2rem;
diff --git a/src/components/_variables.scss b/src/components/_variables.scss
index 9d494d7..9b9ba8a 100644
--- a/src/components/_variables.scss
+++ b/src/components/_variables.scss
@@ -1,8 +1,16 @@
-$light-color: #FFF8F0;
-$dark-color: #22333B;
+$light-color: #f6faff;
+$dark-color: #04090F;
 $yellow: #FFFACD;
-$teal: #008080;
+$dark-blue: #2660A4;
 $white: #ffffff;
 $highlight-color: $yellow;
-$theme-color: $teal;
-$theme-font: 'Assistant', 'Helvetica', sans-serif;
\ No newline at end of file
+$theme-color: $dark-blue;
+$theme-font: 'Assistant', 'Helvetica', sans-serif;
+
+/* Dark mode colors */
+
+$dark-background-color: #0F1116;
+$light-background-color: #ffffff;
+$light-text-color: #ffffff;
+$dark-text-color: #0F1116;
+$dark-theme-color: #333C4B;
diff --git a/src/components/widget.scss b/src/components/_widget.scss
similarity index 97%
rename from src/components/widget.scss
rename to src/components/_widget.scss
index f1cfc36..2198c3e 100644
--- a/src/components/widget.scss
+++ b/src/components/_widget.scss
@@ -1,6 +1,4 @@
-@import "variables";
-@import "loader";
-@import "chat";
+
 
 @keyframes slideInUp {
   from {
diff --git a/src/components/chatbox.jsx b/src/components/chatbox.jsx
index 1b8f191..1d872cf 100644
--- a/src/components/chatbox.jsx
+++ b/src/components/chatbox.jsx
@@ -179,6 +179,13 @@ class ChatBox extends React.Component {
     this.setState({ messages })
   }
 
+
+  handleEscape = (e) => {
+    if (e.keyCode === 27 && this.props.opened) {
+      this.props.handleToggleOpen()
+    }
+  }
+
   componentDidUpdate(prevProps, prevState) {
     if (prevState.client !== this.state.client) {
       this.createRoom()
@@ -231,7 +238,12 @@ class ChatBox extends React.Component {
     }
   }
 
+  componentDidMount() {
+    document.addEventListener("keydown", this.handleEscape, false);
+  }
+
   componentWillUnmount() {
+    document.removeEventListener("keydown", this.handleEscape, false);
     this.leaveRoom();
   }
 
@@ -253,12 +265,13 @@ class ChatBox extends React.Component {
   render() {
     const { ready, messages, inputValue, userId, isRoomEncrypted } = this.state;
     const { opened, handleToggleOpen } = this.props;
+    const inputLabel = 'Send a message...'
 
     return (
-      <div id="ocrcc-chatbox">
+      <div id="ocrcc-chatbox" aria-haspopup="dialog" aria-label="Open support chat">
         <div className="widget-header">
           <div className="widget-header-title">
-            { isRoomEncrypted && <span>🔒</span> } Support Chat
+            Support Chat
           </div>
           <button
             type="button"
@@ -284,7 +297,7 @@ class ChatBox extends React.Component {
           </div>
           <div className="notices">
             {
-              isRoomEncrypted && <div>Messages in this chat are secured with end-to-end encryption.</div>
+              isRoomEncrypted && <div role="status">Messages in this chat are secured with end-to-end encryption.</div>
             }
           </div>
         </div>
@@ -294,6 +307,8 @@ class ChatBox extends React.Component {
               type="text"
               onChange={this.handleInputChange}
               value={inputValue}
+              aria-label={inputLabel}
+              placeholder={inputLabel}
               autoFocus={true}
               ref={this.chatboxInput}
             />
diff --git a/src/components/styles.scss b/src/components/styles.scss
new file mode 100644
index 0000000..a031d21
--- /dev/null
+++ b/src/components/styles.scss
@@ -0,0 +1,5 @@
+@import "variables";
+@import "loader";
+@import "widget";
+@import "chat";
+@import "dark_mode";
\ No newline at end of file
diff --git a/src/components/widget.js b/src/components/widget.js
index 5ba6f07..ecc94cd 100644
--- a/src/components/widget.js
+++ b/src/components/widget.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Transition } from 'react-transition-group';
 import Chatbox from './chatbox';
-import './widget.scss';
+import './styles.scss';
 
 class Widget extends Component {
   constructor(props) {
@@ -36,10 +36,10 @@ class Widget extends Component {
     const { opened, showDock } = this.state;
 
     return (
-      <div className="docked-widget">
+      <div className="docked-widget" role="complementary">
         <Transition in={opened} timeout={250} onExited={this.handleWidgetExit}>
           {(status) => (
-            <div className={`widget widget-${status}`}>
+            <div className={`widget widget-${status}`} aria-hidden={!opened}>
               <Chatbox
                 handleToggleOpen={this.handleToggleOpen}
                 opened={opened}
@@ -55,9 +55,10 @@ class Widget extends Component {
             className="dock"
             onClick={this.handleToggleOpen}
             onKeyPress={this.handleToggleOpen}
+            aria-labelledby="open-chatbox-label"
           >
-            <span>Open support chat</span>
-            <span className={`arrow ${opened ? 'opened' : 'closed'}`}>⌃</span>
+            <span id="open-chatbox-label">Open support chat</span>
+            <span className={`arrow ${opened ? 'opened' : 'closed'}`} aria-label={`${opened ? 'Close' : 'Open'} support chat window`}>⌃</span>
           </button>
         )}
       </div>