@defra/flood-webchat 0.0.1-beta.36 → 0.0.1-beta.38-draft

package/src/client/components/availability/availability.jsx

@@ -6,9 +6,10 @@ import { SkipLink } from '../skip-link.jsx'
 
 import { useApp } from '../../store/useApp'
 import { historyPushState, historyReplaceState } from '../../lib/history.js'
+import { LiveRegion } from '../live-region.jsx'
 
 export function Availability () {
-  const { availability, isChatOpen, setChatVisibility, unseenCount, threadId, setUnseenCount, setInstigatorId } = useApp()
+  const { availability, isChatOpen, setChatVisibility, unseenCount, threadId, setUnseenCount, setInstigatorId, setLiveRegionText } = useApp()
 
   const buttonRef = useRef()
 
@@ -38,6 +39,16 @@ export function Availability () {
     }
   }
 
+  useEffect(() => {
+    if (!isChatOpen && unseenCount > 0) {
+      setLiveRegionText(`Floodline Webchat - ${unseenCount} new messages`)
+    }
+
+    return () => {
+      setLiveRegionText()
+    }
+  }, [unseenCount, isChatOpen])
+
   useEffect(() => {
     const onScroll = () => {
       if (!threadId) {
@@ -93,7 +104,14 @@ export function Availability () {
                 data-module='govuk-button'
               >
                 {TextComponent}
-                {unseenCount > 0 && !isChatOpen ? <span className='wc-availability__unseen'>{unseenCount}</span> : null}
+                {unseenCount > 0 && !isChatOpen
+                  ? (
+                    <>
+                      <span className='wc-availability__unseen'>{unseenCount}</span>
+                      <LiveRegion />
+                    </>
+                    )
+                  : null}
               </a>
             </div>
           </div>

package/src/client/components/chat/chat.jsx

@@ -7,9 +7,10 @@ import { Message } from '../message/message.jsx'
 import { useApp } from '../../store/useApp.js'
 import { useTextareaAutosize } from '../../hooks/useTextareaAutosize.js'
 import { formatTranscript } from '../../lib/transform-messages.js'
+import { agentStatusHeadline } from '../../lib/agent-status-headline.js'
 
 export function Chat ({ onEndChatScreen, onSettingsScreen }) {
-  const { availability, thread, messages, agent, agentStatus, isAgentTyping, settings, isKeyboard } = useApp()
+  const { availability, thread, messages, agent, agentStatus, isAgentTyping, isChatOpen, settings, isKeyboard, setLiveRegionText } = useApp()
 
   const [userMessage, setUserMessage] = useState('')
   const [focusVisibleWithin, setFocusVisibleWithin] = useState(false)
@@ -41,21 +42,39 @@ export function Chat ({ onEndChatScreen, onSettingsScreen }) {
 
   const agentName = agent?.nickname || agent?.firstName
 
-  let connectionHeadlineText = 'Connecting to Floodline'
+  const connectionHeadlineText = agentStatusHeadline(availability, agentStatus, agentName)
 
-  if (agentStatus === 'closed') {
-    connectionHeadlineText = agentName ? `${agentName} ended the session` : 'Session ended by advisor'
-  } else if (agentStatus) {
-    if (agentName) {
-      connectionHeadlineText = `You are speaking with ${agentName}`
-    } else {
-      connectionHeadlineText = 'No advisers currently available'
+  useEffect(() => {
+    if (connectionHeadlineText) {
+      setLiveRegionText(`Floodline Webchat - ${connectionHeadlineText}`)
     }
-  }
 
-  if (availability === 'UNAVAILABLE') {
-    connectionHeadlineText = 'Webchat is not currently available'
-  }
+    return () => {
+      setLiveRegionText()
+    }
+  }, [connectionHeadlineText])
+
+  useEffect(() => {
+    if (isAgentTyping && isChatOpen) {
+      setLiveRegionText(`${agentName} is typing...`)
+    }
+
+    return () => {
+      setLiveRegionText()
+    }
+  }, [isAgentTyping, isChatOpen])
+
+  useEffect(() => {
+    const lastAgentMessage = messages[messages.length - 1]
+
+    if (lastAgentMessage?.direction === 'outbound') {
+      setLiveRegionText(`${agentName} said: ${lastAgentMessage.text}`)
+    }
+
+    return () => {
+      setLiveRegionText()
+    }
+  }, [messages])
 
   const sendMessage = () => {
     if (messageRef.current.value.length === 0) {
@@ -63,19 +82,15 @@ export function Chat ({ onEndChatScreen, onSettingsScreen }) {
     }
 
     try {
-      thread.sendTextMessage(messageRef.current.value.trim())
+      const message = messageRef.current.value.trim()
+      thread.sendTextMessage(message)
+      setLiveRegionText(`You said: ${message}`)
     } catch (err) {
       console.log('[Chat Error] sendMessage', err)
     }
 
     setUserMessage('')
   }
-  const handleKeyPress = e => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault()
-      sendMessage()
-    }
-  }
 
   const handleSubmit = e => {
     e.preventDefault()
@@ -90,13 +105,51 @@ export function Chat ({ onEndChatScreen, onSettingsScreen }) {
     saveChatLink.setAttribute('href', `data:text/plain;charset=utf-8,${transcript}`)
   }
 
+  const handleKeyPress = e => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      switch (e.target.id) {
+        case 'text-area':
+          e.preventDefault()
+          sendMessage()
+          break
+        case 'end-chat':
+          onEndChatScreen(e)
+          break
+        case 'wc-settings':
+          onSettingsScreen(e)
+          break
+        case 'transcript-download':
+          saveChat()
+          break
+        default:
+          break
+      }
+    } else if (e.key === ' ') {
+      if (e.target.id === 'end-chat') {
+        onEndChatScreen(e)
+      } else if (e.target.id === 'wc-settings') {
+        onSettingsScreen(e)
+      }
+    }
+  }
+
   return (
     <>
       <PanelHeader />
 
       <div className='wc-status'>
         <p className='wc-status__availability'>{connectionHeadlineText}</p>
-        <a className='wc-status__link' href='#' role='button' data-module='govuk-button' onClick={onEndChatScreen}>End chat</a>
+        <a
+          id='end-chat'
+          className='wc-status__link'
+          href='#'
+          data-module='govuk-button'
+          role='button'
+          onClick={onEndChatScreen}
+          onKeyDown={handleKeyPress}
+        >
+          End chat
+        </a>
       </div>
 
       <div className='wc-body' tabIndex='0'>
@@ -132,7 +185,7 @@ export function Chat ({ onEndChatScreen, onSettingsScreen }) {
             rows='1'
             aria-required='true'
             className='wc-form__textarea'
-            id='wc-form-textarea'
+            id='text-area'
             name='message'
             onChange={onChange}
             onKeyDown={handleKeyPress}
@@ -155,6 +208,7 @@ export function Chat ({ onEndChatScreen, onSettingsScreen }) {
             id='wc-settings'
             className='wc-footer__settings-link'
             data-module='govuk-button'
+            onKeyDown={handleKeyPress}
             onClick={onSettingsScreen}
           >
             Settings
@@ -165,6 +219,7 @@ export function Chat ({ onEndChatScreen, onSettingsScreen }) {
             className='wc-footer__settings-link'
             data-module='govuk-button'
             download='floodline-webchat-transcript.txt'
+            onKeyDown={handleKeyPress}
             onClick={saveChat}
           >
             Save chat

package/src/client/components/live-region.jsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState, useCallback } from 'react'
+import debounce from 'lodash.debounce'
+import { useApp } from '../store/useApp'
+
+export const LiveRegion = () => {
+  const { agentStatus, liveRegionText, setLiveRegionText } = useApp()
+
+  const [textA, setTextA] = useState()
+  const [textB, setTextB] = useState()
+
+  const isSessionEnded = agentStatus === 'closed' || agentStatus === null
+
+  const clearText = () => {
+    setTextA()
+    setTextB()
+  }
+
+  const setText = useCallback(debounce(text => {
+    if (textA) {
+      setTextB(text)
+    } else {
+      setTextA(text)
+    }
+  }, 2000), [textA, textB])
+
+  useEffect(() => {
+    console.log('liveRegionText', liveRegionText)
+
+    if (liveRegionText) {
+      clearText()
+      setText(liveRegionText)
+    }
+
+    if (isSessionEnded) {
+      clearText()
+      setLiveRegionText()
+    }
+
+    return () => {
+      clearText()
+      setLiveRegionText()
+    }
+  }, [liveRegionText])
+
+  return (
+    <>
+      <div className='wc-live' aria-live='polite' aria-atomic='true'>
+        {textA}
+      </div>
+      <div className='wc-live' aria-live='polite' aria-atomic='true'>
+        {textB}
+      </div>
+    </>
+  )
+}

package/src/client/components/panel/panel.jsx

@@ -9,6 +9,7 @@ import { Unavailable } from '../screens/unavailable.jsx'
 import { EndChat } from '../screens/end-chat.jsx'
 import { Settings } from '../screens/settings.jsx'
 import { Feedback } from '../screens/feedback.jsx'
+import { LiveRegion } from '../live-region.jsx'
 
 import { useApp } from '../../store/useApp.js'
 import { useChatSdk } from '../../store/useChatSdk.js'
@@ -136,6 +137,7 @@ export function Panel () {
       <div className='wc-panel__inner'>
         {ScreenComponent}
       </div>
+      <LiveRegion />
     </div>
   )
 

package/src/client/components/screens/end-chat.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react'
 import { PanelHeader } from '../panel/panel-header.jsx'
 import { useApp } from '../../store/useApp.js'
+import { historyReplaceState } from '../../lib/history.js'
 
 export function EndChat ({ onChatScreen, onEndChatConfirm }) {
   const { setCustomerId, setThreadId, setMessages, agentStatus, thread, setUnseenCount, isKeyboard } = useApp()
@@ -19,17 +20,26 @@ export function EndChat ({ onChatScreen, onEndChatConfirm }) {
       thread.endChat()
     }
 
+    historyReplaceState()
     onEndChatConfirm(e)
   }
 
   useEffect(() => {
     if (isKeyboard) {
       setTimeout(() => {
-        document.querySelector('#confirmEndChat').focus()
+        document.querySelector('#confirm-endchat').focus()
       }, 10)
     }
   }, [])
 
+  const handleKeyPress = e => {
+    if ((e.key === 'Enter' || e.key === ' ') && e.target.id === 'confirm-endchat') {
+      confirmEndChat(e)
+    } else if ((e.key === 'Enter' || e.key === ' ') && e.target.id === 'resume-chat') {
+      onChatScreen(e)
+    }
+  }
+
   return (
     <>
       <PanelHeader />
@@ -37,8 +47,28 @@ export function EndChat ({ onChatScreen, onEndChatConfirm }) {
         <div className='wc-content'>
           <h3 className='wc-heading' aria-live='polite'>Are you sure you want to end the chat?</h3>
           <div className='govuk-button-group'>
-            <a href='#endChat' role='button' className='wc-button govuk-button' data-module='govuk-button' id='confirmEndChat' onClick={confirmEndChat}>Yes, end chat</a>
-            <a href='#resumeChat' role='button' className='wc-link govuk-link' data-module='govuk-button' onClick={onChatScreen}>No, resume chat</a>
+            <a
+              id='confirm-endchat'
+              href='#endChat'
+              role='button'
+              className='wc-button govuk-button'
+              data-module='govuk-button'
+              onClick={confirmEndChat}
+              onKeyDown={handleKeyPress}
+            >
+              Yes, end chat
+            </a>
+            <a
+              id='resume-chat'
+              href='#resumeChat'
+              role='button'
+              className='wc-link govuk-link'
+              data-module='govuk-button'
+              onClick={onChatScreen}
+              onKeyDown={handleKeyPress}
+            >
+              No, resume chat
+            </a>
           </div>
         </div>
       </div>

package/src/client/components/screens/feedback.jsx

@@ -6,6 +6,12 @@ export function Feedback ({ onCancel }) {
     onCancel(e)
   }
 
+  const handleKeyPress = e => {
+    if ((e.key === 'Enter' || e.key === ' ') && e.target.id === 'feedback-cancel') {
+      onCancel(e)
+    }
+  }
+
   return (
     <>
       <PanelHeader />
@@ -14,8 +20,29 @@ export function Feedback ({ onCancel }) {
         <div className='wc-content'>
           <h3 id='wc-subtitle' className='wc-heading'>Give Feedback on Floodline webchat</h3>
           <p>Please note we’re unable to respond to feedback.</p>
-          <p><a className='govuk-link' href='#' target='_blank' rel='noreferrer' role='button' data-module='govuk-button'>Feedback Link</a></p>
-          <p><a id='feedback-cancel' className='wc-link govuk-link' href='#' data-module='govuk-button' role='button' onClick={feedbackCancel}>Close</a></p>
+          <p>
+            <a
+              className='govuk-link'
+              href='#'
+              target='_blank'
+              rel='noreferrer'
+            >
+              Feedback Link
+            </a>
+          </p>
+          <p>
+            <a
+              id='feedback-cancel'
+              className='wc-link govuk-link'
+              href='#'
+              data-module='govuk-button'
+              role='button'
+              onKeyDown={handleKeyPress}
+              onClick={feedbackCancel}
+            >
+              Close
+            </a>
+          </p>
         </div>
       </div>
     </>

package/src/client/components/screens/settings.jsx

@@ -16,6 +16,14 @@ export function Settings ({ onCancel }) {
     onCancel(e)
   }
 
+  const handleKeyPress = e => {
+    if ((e.key === 'Enter' || e.key === ' ') && e.target.id === 'settings-save') {
+      onSave(e)
+    } else if ((e.key === 'Enter' || e.key === ' ') && e.target.id === 'settings-cancel') {
+      onCancel(e)
+    }
+  }
+
   return (
     <>
       <PanelHeader />
@@ -59,8 +67,28 @@ export function Settings ({ onCancel }) {
           </fieldset>
 
           <div className='govuk-button-group'>
-            <a id='settings-save' href='#' className='wc-button govuk-button' data-module='govuk-button' role='button' onClick={onSave}>Save</a>
-            <a id='settings-cancel' href='#' className='wc-link govuk-link' data-module='govuk-button' role='button' onClick={onCancel}>Cancel</a>
+            <a
+              id='settings-save'
+              href='#'
+              className='wc-button govuk-button'
+              data-module='govuk-button'
+              role='button'
+              onClick={onSave}
+              onKeyDown={handleKeyPress}
+            >
+              Save
+            </a>
+            <a
+              id='settings-cancel'
+              href='#'
+              className='wc-link govuk-link'
+              data-module='govuk-button'
+              role='button'
+              onClick={onCancel}
+              onKeyDown={handleKeyPress}
+            >
+              Cancel
+            </a>
           </div>
         </div>
       </div>

package/src/client/lib/agent-status-headline.js

@@ -0,0 +1,19 @@
+export const agentStatusHeadline = (availability, agentStatus, agentName) => {
+  let connectionHeadlineText = 'Connecting to Floodline'
+
+  if (agentStatus === 'closed') {
+    connectionHeadlineText = agentName ? `${agentName} ended the session` : 'Session ended by advisor'
+  } else if (agentStatus) {
+    if (agentName) {
+      connectionHeadlineText = `You are speaking with ${agentName}`
+    } else {
+      connectionHeadlineText = 'No advisers currently available'
+    }
+  }
+
+  if (availability === 'UNAVAILABLE') {
+    connectionHeadlineText = 'Webchat is not currently available'
+  }
+
+  return connectionHeadlineText
+}

package/src/client/scss/_settings.scss

@@ -73,3 +73,24 @@
     line-height: 1.25;
     margin: 0 0 25px;
 }
+
+// stylelint-disable declaration-no-important
+.wc-live {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    -webkit-clip-path: inset(50%) !important;
+    clip-path: inset(50%) !important;
+    border: 0 !important;
+    white-space: nowrap !important;
+
+    &::before,
+    &::after {
+        content: ' ';
+    }
+}
+// stylelint-enable declaration-no-important

package/src/client/store/AppProvider.jsx

@@ -27,12 +27,13 @@ export const AppProvider = ({ sdk, availability, options, children }) => {
     dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.case.status })
   }
 
-  const onAgentTypingStarted = () => {
+  const onAgentTypingStarted = e => {
     dispatch({ type: 'SET_AGENT_TYPING', payload: true })
   }
 
   const onAgentTypingEnded = () => {
     dispatch({ type: 'SET_AGENT_TYPING', payload: false })
+    dispatch({ type: 'SET_LIVE_REGION_TEXT' })
   }
 
   const onMessageCreated = e => {
@@ -149,6 +150,10 @@ export const AppProvider = ({ sdk, availability, options, children }) => {
     dispatch({ type: 'SET_INSTIGATOR_ID', payload: id })
   }
 
+  const setLiveRegionText = text => {
+    dispatch({ type: 'SET_LIVE_REGION_TEXT', payload: text })
+  }
+
   /**
    * Application-wide state and state functions
    */
@@ -163,6 +168,7 @@ export const AppProvider = ({ sdk, availability, options, children }) => {
     setUnseenCount,
     setChatVisibility,
     setInstigatorId,
+    setLiveRegionText,
     onLiveChatRecovered,
     onAssignedAgentChanged,
     onAgentTypingStarted,

package/src/client/store/actions-map.js

@@ -61,17 +61,18 @@ const setThread = (state, payload) => {
   }
 }
 
-const setMessage = (state, payload) => {
+const setMessages = (state, payload) => {
   return {
     ...state,
-    messages: [...state.messages, transformMessage(payload)]
+    messages: transformMessages(payload).reverse()
   }
 }
 
-const setMessages = (state, payload) => {
+const setMessage = (state, payload) => {
   return {
     ...state,
-    messages: transformMessages(payload).reverse()
+    message: transformMessage(payload),
+    messages: [...state.messages, transformMessage(payload)]
   }
 }
 
@@ -110,6 +111,13 @@ const setInstigatorId = (state, payload) => {
   }
 }
 
+const setLiveRegionText = (state, payload) => {
+  return {
+    ...state,
+    liveRegionText: payload
+  }
+}
+
 const toggleIsMobile = (state, payload) => {
   return {
     ...state,
@@ -138,6 +146,7 @@ export const actionsMap = {
   SET_AGENT_STATUS: setAgentStatus,
   SET_UNSEEN_COUNT: setUnseenCount,
   SET_INSTIGATOR_ID: setInstigatorId,
+  SET_LIVE_REGION_TEXT: setLiveRegionText,
   TOGGLE_IS_MOBILE: toggleIsMobile,
   TOGGLE_IS_KEYBOARD: toggleIsKeyboard
 }