@defra/flood-webchat 0.0.1-beta.40 → 0.0.1-beta.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/flood-webchat",
-  "version": "0.0.1-beta.40",
+  "version": "0.0.1-beta.41",
   "description": "",
   "main": "dist/server.js",
   "browser": "dist/client.js",
@@ -62,6 +62,7 @@
     "@nice-devone/nice-cxone-chat-web-sdk": "^1.3.0",
     "axios": "^1.5.0",
     "jwt-decode": "^3.1.2",
+    "lodash.debounce": "^4.0.8",
     "luxon": "^3.4.3",
     "querystring": "^0.2.1",
     "react": "^18.2.0",

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

@@ -6,12 +6,15 @@ 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()
 
+  const showUnseenCount = unseenCount > 0 && !isChatOpen
+
   const onClick = e => {
     e.preventDefault()
     setUnseenCount(0)
@@ -38,6 +41,16 @@ export function Availability () {
     }
   }
 
+  useEffect(() => {
+    if (showUnseenCount) {
+      setLiveRegionText(`Floodline Webchat - ${unseenCount} new messages`)
+    }
+
+    return () => {
+      setLiveRegionText()
+    }
+  }, [unseenCount, isChatOpen])
+
   useEffect(() => {
     const onScroll = () => {
       if (!threadId) {
@@ -66,12 +79,6 @@ export function Availability () {
     }
   }, [threadId, isChatOpen, availability])
 
-  let TextComponent = (<>Show chat</>)
-
-  if (!threadId) {
-    TextComponent = (<>Start chat</>)
-  }
-
   switch (availability) {
     case 'AVAILABLE':
       return (
@@ -92,12 +99,13 @@ export function Availability () {
                 role='button'
                 data-module='govuk-button'
               >
-                {TextComponent}
-                {unseenCount > 0 && !isChatOpen ? <span className='wc-availability__unseen'>{unseenCount}</span> : null}
+                {!threadId ? <>Start chat</> : <>Show chat</>}
+                {showUnseenCount ? <span className='wc-availability__unseen'>{unseenCount}</span> : null}
               </a>
             </div>
           </div>
           {isChatOpen && <Panel />}
+          {showUnseenCount ? <LiveRegion /> : null}
           <SkipLink />
         </>
       )

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

@@ -10,7 +10,7 @@ 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)
@@ -44,13 +44,47 @@ export function Chat ({ onEndChatScreen, onSettingsScreen }) {
 
   const connectionHeadlineText = agentStatusHeadline(availability, agentStatus, agentName)
 
+  useEffect(() => {
+    if (connectionHeadlineText) {
+      setLiveRegionText(`Floodline Webchat - ${connectionHeadlineText}`)
+    }
+
+    return () => {
+      setLiveRegionText()
+    }
+  }, [connectionHeadlineText])
+
+  useEffect(() => {
+    if (isAgentTyping && isChatOpen) {
+      setLiveRegionText(`${agentName} is typing...`)
+    }
+
+    return () => {
+      setLiveRegionText()
+    }
+  }, [isAgentTyping, isChatOpen])
+
+  useEffect(() => {
+    const lastAgentMessage = messages[messages.length - 1]
+
+    if (agentStatus !== 'closed' && lastAgentMessage?.direction === 'outbound') {
+      setLiveRegionText(`${agentName} said: ${lastAgentMessage.text}`)
+    }
+
+    return () => {
+      setLiveRegionText()
+    }
+  }, [messages])
+
   const sendMessage = () => {
     if (messageRef.current.value.length === 0 || agentStatus === 'closed') {
       return
     }
 
     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)
     }

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'
+
+const DEBOUNCE_MILLISECONDS = 2000
+
+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)
+    }
+  }, DEBOUNCE_MILLISECONDS), [textA, textB])
+
+  useEffect(() => {
+    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'
@@ -31,10 +32,18 @@ export function Panel () {
       }
       setChatVisibility(false)
       historyReplaceState()
-      document.getElementById(instigatorId)?.focus()
     }
   }, [thread, threadId, setUnseenCount, setChatVisibility])
 
+  /**
+   * Focus previously focused element when closing the webchat
+   */
+  useEffect(() => {
+    return () => {
+      document.getElementById(instigatorId)?.focus()
+    }
+  }, [])
+
   /**
   * We need ammend classes on the body element to handle mobile behaviour
   */
@@ -118,7 +127,13 @@ export function Panel () {
       ScreenComponent = <EndChat onChatScreen={goToChatScreen} onEndChatConfirm={goToFeedbackScreen} />
       break
     case 4:
-      ScreenComponent = <Feedback onCancel={() => setChatVisibility(false)} />
+      ScreenComponent = (
+        <Feedback onCancel={() => {
+          setChatVisibility(false)
+          historyReplaceState()
+        }}
+        />
+      )
       break
     case 5:
       ScreenComponent = <Settings onCancel={goToChatScreen} />
@@ -136,6 +151,7 @@ export function Panel () {
       <div className='wc-panel__inner'>
         {ScreenComponent}
       </div>
+      <LiveRegion />
     </div>
   )
 

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import { PanelHeader } from '../panel/panel-header.jsx'
+
 export function Feedback ({ onCancel }) {
   const feedbackSend = e => {
     const tmpThreadId = window.localStorage.getItem('tmpThreadId')

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

@@ -10,7 +10,7 @@ import { ErrorSummary } from '../errorSummary/error-summary.jsx'
 const QUESTION_MAX_LENGTH = 500
 
 export function RequestChat ({ onPreChatScreen }) {
-  const { sdk, setCustomerId, setThreadId, setThread } = useApp()
+  const { sdk, setCustomerId, setThreadId, setThread, setLiveRegionText } = useApp()
   const { fetchCustomerId, fetchThread } = useChatSdk(sdk)
   const [errors, setErrors] = useState({})
   const [questionLength, setQuestionLength] = useState(0)
@@ -41,6 +41,12 @@ export function RequestChat ({ onPreChatScreen }) {
 
   const buttonLabel = isButtonDisabled ? 'Requesting...' : 'Request Chat'
 
+  useEffect(() => {
+    if (isButtonDisabled) {
+      setLiveRegionText(buttonLabel)
+    }
+  }, [isButtonDisabled])
+
   const onRequestChat = async e => {
     e.preventDefault()
 

package/src/client/scss/_settings.scss

@@ -78,3 +78,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

@@ -33,6 +33,7 @@ export const AppProvider = ({ sdk, availability, options, children }) => {
 
   const onAgentTypingEnded = () => {
     dispatch({ type: 'SET_AGENT_TYPING', payload: false })
+    dispatch({ type: 'SET_LIVE_REGION_TEXT' })
   }
 
   const onMessageCreated = e => {
@@ -101,13 +102,15 @@ export const AppProvider = ({ sdk, availability, options, children }) => {
       setChatVisibility(true)
     }
 
-    const onBrowserNavigation = window.addEventListener('popstate', () => {
+    const onBrowserNavigation = () => {
       if (window.location.hash === '#webchat') {
         setChatVisibility(true)
       } else {
         setChatVisibility(false)
       }
-    })
+    }
+
+    window.addEventListener('popstate', onBrowserNavigation)
 
     return () => {
       window.removeEventListener('popstate', onBrowserNavigation)
@@ -149,6 +152,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 +170,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
 }