@defra/flood-webchat 0.0.1-beta.9 → 1.0.2

package/dist/server.js

@@ -1,286 +1 @@
-/******/ (() => { // webpackBootstrap
-/******/ 	var __webpack_modules__ = ({
-
-/***/ "./src/server/index.js":
-/*!*****************************!*\
-  !*** ./src/server/index.js ***!
-  \*****************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-const {
-  authenticate,
-  getApiBaseUrl,
-  getIsOpen,
-  getActivity
-} = __webpack_require__(/*! ./lib/client.js */ "./src/server/lib/client.js");
-
-/**
- * Returns webchat availability
- * @param options {object}
- * @param options.clientId {string}
- * @param options.clientSecret {string}
- * @param options.accessKey {string}
- * @param options.accessSecret {string}
- * @param options.skillEndpoint {string}
- * @param options.hoursEndpoint {string}
- * @param options.authenticationUri {string}
- * @param options.wellKnownUri {string}
- * @param options.maxQueueCount {string}
- * @returns {Promise<{date: Date, availability: (string)}>}
- */
-module.exports = async function getAvailability({
-  clientId,
-  clientSecret,
-  accessKey,
-  accessSecret,
-  maxQueueCount,
-  skillEndpoint,
-  hoursEndpoint,
-  wellKnownUri = 'https://cxone.niceincontact.com/.well-known/cxone-configuration',
-  authenticationUri = 'https://cxone.niceincontact.com/auth/token'
-}) {
-  const authorisation = 'Basic ' + Buffer.from(`${encodeURIComponent(clientId)}:${encodeURIComponent(clientSecret)}`).toString('base64');
-
-  // Cache authentication and re-authenticate when needed (lasts 1 hour?)
-  const {
-    tenantId,
-    token,
-    tokenType
-  } = await authenticate({
-    authenticationUri,
-    authorisation,
-    accessKey,
-    accessSecret
-  });
-  const apiBaseUrl = await getApiBaseUrl({
-    wellKnownUri,
-    tenantId
-  });
-  const [{
-    hasCapacity,
-    hasAgentsAvailable
-  }, isOpen] = await Promise.all([getActivity({
-    baseUrl: apiBaseUrl,
-    tokenType,
-    token,
-    skillEndpoint,
-    maxQueueCount
-  }), getIsOpen({
-    baseUrl: apiBaseUrl,
-    token,
-    tokenType,
-    hoursEndpoint
-  })]);
-  const isAvailable = isOpen && hasAgentsAvailable && hasCapacity;
-  const isExistingOnly = isOpen && hasAgentsAvailable && !hasCapacity;
-  let availability = 'UNAVAILABLE';
-  if (isAvailable) {
-    availability = 'AVAILABLE';
-  } else if (isExistingOnly) {
-    availability = 'EXISTING';
-  }
-  return {
-    date: new Date(),
-    availability
-  };
-};
-
-/***/ }),
-
-/***/ "./src/server/lib/client.js":
-/*!**********************************!*\
-  !*** ./src/server/lib/client.js ***!
-  \**********************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-const querystring = __webpack_require__(/*! querystring */ "querystring");
-const axios = __webpack_require__(/*! axios */ "axios");
-const jwtdecode = __webpack_require__(/*! jwt-decode */ "jwt-decode");
-const {
-  isWithinHours
-} = __webpack_require__(/*! ./utils.js */ "./src/server/lib/utils.js");
-const contentType = 'application/x-www-form-urlencoded';
-const authenticate = async ({
-  authenticationUri,
-  authorisation,
-  accessKey,
-  accessSecret
-}) => {
-  const url = new URL(authenticationUri);
-  const body = querystring.stringify({
-    grant_type: 'password',
-    username: accessKey,
-    password: accessSecret
-  });
-  const auth = await axios.post(url.href, body, {
-    signal: AbortSignal.timeout(3000),
-    headers: {
-      Host: url.host,
-      'Content-Type': contentType,
-      Authorization: authorisation
-    }
-  });
-  return {
-    token: auth.data.access_token,
-    tokenType: auth.data.token_type,
-    tenantId: jwtdecode(auth.data.id_token)?.tenantId
-  };
-};
-const getApiBaseUrl = async ({
-  wellKnownUri,
-  tenantId
-}) => {
-  const url = new URL(wellKnownUri);
-  url.searchParams.set('tenantId', tenantId);
-  const {
-    data
-  } = await axios.get(url.href, {
-    headers: {
-      Host: url.host
-    },
-    signal: AbortSignal.timeout(3000)
-  });
-  return data.api_endpoint;
-};
-const getActivity = async ({
-  tokenType,
-  token,
-  baseUrl,
-  skillEndpoint,
-  maxQueueCount
-}) => {
-  const url = new URL(skillEndpoint, baseUrl);
-  const skill = await axios.get(url.href, {
-    signal: AbortSignal.timeout(3000),
-    headers: {
-      Host: url.host,
-      Authorization: `${tokenType} ${token}`,
-      'Content-Type': contentType
-    }
-  });
-  const activity = skill.data.skillActivity[0];
-  return {
-    hasCapacity: activity.queueCount < maxQueueCount,
-    hasAgentsAvailable: activity.agentsAvailable >= 1
-  };
-};
-const getIsOpen = async ({
-  baseUrl,
-  token,
-  tokenType,
-  hoursEndpoint
-}) => {
-  const url = new URL(hoursEndpoint, baseUrl);
-  const hours = await axios.get(url.href, {
-    signal: AbortSignal.timeout(3000),
-    headers: {
-      Host: url.host,
-      Authorization: `${tokenType} ${token}`,
-      'Content-Type': contentType
-    }
-  });
-  const days = hours.data.resultSet.hoursOfOperationProfiles[0].days;
-  return isWithinHours(days);
-};
-module.exports = {
-  authenticate,
-  getApiBaseUrl,
-  getIsOpen,
-  getActivity
-};
-
-/***/ }),
-
-/***/ "./src/server/lib/utils.js":
-/*!*********************************!*\
-  !*** ./src/server/lib/utils.js ***!
-  \*********************************/
-/***/ ((module) => {
-
-const isWithinHours = (days, date = null) => {
-  const now = date ? new Date(date) : new Date();
-  const name = now.toLocaleDateString('en-GB', {
-    weekday: 'long'
-  });
-  const day = days.find(d => d.day.toLowerCase() === name.toLowerCase());
-  const dateItems = now.toLocaleDateString('en-GB').split('/');
-  const open = `${dateItems[2]}-${dateItems[1]}-${dateItems[0]}T${day.openTime}`;
-  const close = `${dateItems[2]}-${dateItems[1]}-${dateItems[0]}T${day.closeTime}`;
-  return now.getTime() >= Date.parse(open) && now.getTime() <= Date.parse(close);
-};
-module.exports = {
-  isWithinHours
-};
-
-/***/ }),
-
-/***/ "axios":
-/*!************************!*\
-  !*** external "axios" ***!
-  \************************/
-/***/ ((module) => {
-
-"use strict";
-module.exports = require("axios");
-
-/***/ }),
-
-/***/ "jwt-decode":
-/*!*****************************!*\
-  !*** external "jwt-decode" ***!
-  \*****************************/
-/***/ ((module) => {
-
-"use strict";
-module.exports = require("jwt-decode");
-
-/***/ }),
-
-/***/ "querystring":
-/*!******************************!*\
-  !*** external "querystring" ***!
-  \******************************/
-/***/ ((module) => {
-
-"use strict";
-module.exports = require("querystring");
-
-/***/ })
-
-/******/ 	});
-/************************************************************************/
-/******/ 	// The module cache
-/******/ 	var __webpack_module_cache__ = {};
-/******/ 	
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/ 		// Check if module is in cache
-/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
-/******/ 		if (cachedModule !== undefined) {
-/******/ 			return cachedModule.exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = __webpack_module_cache__[moduleId] = {
-/******/ 			// no module.id needed
-/******/ 			// no module.loaded needed
-/******/ 			exports: {}
-/******/ 		};
-/******/ 	
-/******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-/******/ 	
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/ 	
-/************************************************************************/
-/******/ 	
-/******/ 	// startup
-/******/ 	// Load entry module and return exports
-/******/ 	// This entry module is referenced by other modules so it can't be inlined
-/******/ 	var __webpack_exports__ = __webpack_require__("./src/server/index.js");
-/******/ 	module.exports = __webpack_exports__;
-/******/ 	
-/******/ })()
-;
-//# sourceMappingURL=server.js.map
+(()=>{var e={525:(e,t,n)=>{const{authenticate:o,getApiBaseUrl:a,getIsOpen:i,getActivity:s}=n(398);e.exports=async function({clientId:e,clientSecret:t,accessKey:n,accessSecret:r,maxQueueCount:c,skillEndpoint:u,hoursEndpoint:l,wellKnownUri:p="https://cxone.niceincontact.com/.well-known/cxone-configuration",authenticationUri:d="https://cxone.niceincontact.com/auth/token"}){const h="Basic "+Buffer.from(`${encodeURIComponent(e)}:${encodeURIComponent(t)}`).toString("base64"),{tenantId:m,token:y,tokenType:w}=await o({authenticationUri:d,authorisation:h,accessKey:n,accessSecret:r}),g=await a({wellKnownUri:p,tenantId:m}),[{hasCapacity:A,hasAgentsAvailable:k},f]=await Promise.all([s({baseUrl:g,tokenType:w,token:y,skillEndpoint:u,maxQueueCount:c}),i({baseUrl:g,token:y,tokenType:w,hoursEndpoint:l})]);let x="UNAVAILABLE";return f&&k&&A?x="AVAILABLE":f&&k&&!A&&(x="EXISTING"),{date:new Date,availability:x}}},398:(e,t,n)=>{const o=n(45),a=n(938),i=n(158).decode,{isWithinHours:s}=n(792),r="application/x-www-form-urlencoded";e.exports={authenticate:async({authenticationUri:e,authorisation:t,accessKey:n,accessSecret:s})=>{const c=new URL(e),u=o.stringify({grant_type:"password",username:n,password:s}),l=await a.post(c.href,u,{signal:AbortSignal.timeout(3e3),headers:{Host:c.host,"Content-Type":r,Authorization:t}});return{token:l.data.access_token,tokenType:l.data.token_type,tenantId:i(l.data.id_token)?.tenantId}},getApiBaseUrl:async({wellKnownUri:e,tenantId:t})=>{const n=new URL(e);n.searchParams.set("tenantId",t);const{data:o}=await a.get(n.href,{headers:{Host:n.host},signal:AbortSignal.timeout(3e3)});return o.api_endpoint},getIsOpen:async({baseUrl:e,token:t,tokenType:n,hoursEndpoint:o})=>{const i=new URL(o,e),c=(await a.get(i.href,{signal:AbortSignal.timeout(3e3),headers:{Host:i.host,Authorization:`${n} ${t}`,"Content-Type":r}})).data.resultSet.hoursOfOperationProfiles[0].days;return s(c)},getActivity:async({tokenType:e,token:t,baseUrl:n,skillEndpoint:o,maxQueueCount:i})=>{const s=new URL(o,n),c=(await a.get(s.href,{signal:AbortSignal.timeout(3e3),headers:{Host:s.host,Authorization:`${e} ${t}`,"Content-Type":r}})).data.skillActivity[0];return{hasCapacity:c.queueCount<i,hasAgentsAvailable:c.agentsAvailable>=1}}}},792:(e,t,n)=>{const{DateTime:o}=n(168),a=e=>Number(e.split(":")[0]);e.exports={isWithinHours:(e,t)=>{const n=t?o.fromISO(t):o.local();n.setZone("Europe/London");const i=t?new Date(t):new Date,s=i.toLocaleDateString("en-GB",{weekday:"long"}),r=i.toLocaleDateString("en-GB").split("/"),c=e.find((e=>e.day===s)),u=o.local(Number(r[2]),Number(r[1]),Number(r[0]),a(c.openTime)),l=o.local(Number(r[2]),Number(r[1]),Number(r[0]),a(c.closeTime));return n.diff(u).milliseconds>=0&&n.diff(l).milliseconds<=0}}},938:e=>{"use strict";e.exports=require("axios")},158:e=>{"use strict";e.exports=require("jwt-decode")},168:e=>{"use strict";e.exports=require("luxon")},45:e=>{"use strict";e.exports=require("querystring")}},t={},n=function n(o){var a=t[o];if(void 0!==a)return a.exports;var i=t[o]={exports:{}};return e[o](i,i.exports,n),i.exports}(525);module.exports=n})();

package/main.scss

@@ -1,12 +1,17 @@
 
 // Required GOVUK Styles
-@import "govuk-frontend/govuk/core/typography";
-@import "govuk-frontend/govuk/utilities/visually-hidden";
-
-// Components
-@import "./src/client/components/availability/availability";
+@import "govuk-frontend/dist/govuk/core/typography";
+@import "govuk-frontend/dist/govuk/core/links";
+@import "govuk-frontend/dist/govuk/utilities/visually-hidden";
+@import "govuk-frontend/dist/govuk/components/button/button";
 
+// (ITCSS)
+@import "./src/client/scss/settings";
+@import "./src/client/scss/tools";
+@import "./src/client/scss/objects";
+@import "./src/client/scss/utilities";
 
-.wc-scroll-padding {
-  scroll-padding-bottom: calc(2rem + 20px);
-}
+// React components
+@import "./src/client/components/availability/availability";
+@import "./src/client/components/panel/panel";
+@import "./src/client/components/chat/chat";

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@defra/flood-webchat",
-  "version": "0.0.1-beta.9",
+  "version": "1.0.2",
   "description": "",
   "main": "dist/server.js",
   "browser": "dist/client.js",
   "scripts": {
     "test": "npm run lint && npm run unit-test",
     "dev": "(cd demo && webpack server)",
-    "build": "webpack",
+    "build": "webpack --config webpack.prod.mjs",
     "unit-test": "jest",
     "lint": "npm run lint:js && npm run lint:scss",
     "lint:fix": "npm run lint:js -- --fix && npm run lint:scss -- --fix",
     "lint:js": "standard",
     "lint:scss": "stylelint \"**/*.scss\"",
-    "prepare": "node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') { throw e } }\""
+    "prepare": "husky install"
   },
   "standard": {
     "ignore": [
@@ -27,41 +27,48 @@
   "author": "DEFRA",
   "license": "OGL-UK-3.0",
   "devDependencies": {
-    "@babel/core": "^7.22.10",
-    "@babel/preset-env": "^7.22.10",
-    "@babel/preset-react": "^7.22.15",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.4",
+    "@babel/core": "^7.24.6",
+    "@babel/preset-env": "^7.24.6",
+    "@babel/preset-react": "^7.24.6",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
     "babel-jest": "^29.6.4",
     "babel-loader": "^9.1.3",
-    "core-js": "^2.6.11",
-    "css-loader": "^6.8.1",
-    "dotenv": "^16.3.1",
+    "core-js": "^3.37.1",
+    "css-loader": "^7.1.2",
+    "dotenv": "^16.4.5",
     "husky": "^8.0.3",
-    "jest": "^29.6.3",
-    "jest-environment-jsdom": "^29.6.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "mini-css-extract-plugin": "^2.7.6",
     "node-cache": "^5.1.2",
     "node-sass": "^9.0.0",
     "sass": "^1.66.1",
-    "sass-loader": "^13.3.2",
+    "sass-loader": "^14.2.1",
     "standard": "^17.1.0",
-    "stylelint": "^15.10.3",
+    "stylelint": "^15.11.0",
     "stylelint-config-gds": "^1.0.0",
-    "webpack": "^5.88.2",
+    "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",
+    "webpack-dev-server": "^5.0.4",
+    "webpack-merge": "^5.10.0",
     "webpack-node-externals": "^3.0.0"
   },
   "peerDependencies": {
-    "govuk-frontend": "^4.0.0"
+    "govuk-frontend": "^5.4.0"
   },
   "dependencies": {
-    "axios": "^1.5.0",
-    "jwt-decode": "^3.1.2",
+    "@nice-devone/nice-cxone-chat-web-sdk": "^1.18.0",
+    "axios": "^1.7.2",
+    "html-react-parser": "^5.1.10",
+    "jwt-decode": "^4.0.0",
+    "lodash.debounce": "^4.0.8",
+    "luxon": "^3.4.3",
     "querystring": "^0.2.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "uuid": "^9.0.1"
   }
 }

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

@@ -1,70 +1,121 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
+
 import { classnames } from '../../lib/classnames'
-import { useMessageThread, useWebchatOpenState } from '../../lib/external-stores'
+import { Panel } from '../panel/panel.jsx'
+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, setLiveRegionText } = useApp()
 
-export function Availability (props) {
-  const [isOpen, setOpen] = useWebchatOpenState()
-  const [isFixed, setFixed] = useState(false)
   const buttonRef = useRef()
-  const onClick = () => {
-    setOpen(!isOpen)
+
+  const showUnseenCount = unseenCount > 0 && !isChatOpen
+
+  const messageText = unseenCount > 1 ? 'new messages' : 'new message'
+
+  const onClick = e => {
+    e.preventDefault()
+    setUnseenCount(0)
+    setChatVisibility(!isChatOpen)
+    setInstigatorId(e.target.id)
+
+    if (!isChatOpen) {
+      historyPushState()
+    } else {
+      historyReplaceState()
+    }
   }
+
   const onKeyDown = event => {
     if (event.key === ' ') {
       event.preventDefault()
     }
   }
+
   const onKeyUp = event => {
     if (event.key === ' ') {
-      setOpen(!isOpen)
+      setUnseenCount(0)
+      setChatVisibility(!isChatOpen)
     }
   }
 
-  const intersectionCallback = entries => {
-    const [entry] = entries
-    const isBelowFold = !entry.isIntersecting && entry.boundingClientRect.top > 0
-    setFixed(!isOpen && isBelowFold)
-  }
-
   useEffect(() => {
-    const observer = new window.IntersectionObserver(intersectionCallback, {
-      rootMargin: '35px'
-    })
-    const parentElement = buttonRef.current?.parentElement
-    if (parentElement) {
-      observer.observe(parentElement)
+    if (showUnseenCount) {
+      setLiveRegionText(`Floodline webchat - ${unseenCount} ${messageText}`)
     }
+
     return () => {
-      if (parentElement) {
-        observer.unobserve(parentElement)
-      }
+      setLiveRegionText()
     }
-  }, [buttonRef, isOpen])
+  }, [unseenCount, isChatOpen])
 
   useEffect(() => {
-    document.documentElement.classList.toggle('wc-scroll-padding', isFixed)
-    document.body.classList.toggle('wc-scroll-padding', isFixed)
-  }, [isFixed])
+    const onScroll = () => {
+      if (!threadId) {
+        return
+      }
+
+      if (availability !== 'AVAILABLE') {
+        return
+      }
+
+      const rect = buttonRef.current.parentElement.getBoundingClientRect()
+
+      const isBelowFold = rect.top + 35 > (window.innerHeight || document.documentElement.clientHeight)
+      const isFixed = !isChatOpen && isBelowFold
+
+      document.documentElement.classList.toggle('wc-u-scroll-padding', isFixed)
+      document.body.classList.toggle('wc-u-scroll-padding', isFixed)
+      buttonRef.current.classList.toggle('wc-availability--fixed', isFixed)
+    }
+
+    document.addEventListener('scroll', onScroll)
+    onScroll()
+
+    return () => {
+      document.removeEventListener('scroll', onScroll)
+    }
+  }, [threadId, isChatOpen, availability])
 
-  switch (props.availability) {
+  switch (availability) {
     case 'AVAILABLE':
       return (
-        <div
-          className={classnames('wc-availability', isFixed && 'wc-availability--fixed')}
-          ref={buttonRef}
-        >
-          <div className='wc-availability__inner'>
-            <a
-              className='wc-availability__link'
-              href='#webchat' role='button' draggable='false'
-              onClick={onClick}
-              onKeyUp={onKeyUp}
-              onKeyDown={onKeyDown}
-            >
-              <AvailabilityContent />
-            </a>
+        <>
+          <div
+            className={classnames('wc-availability', isChatOpen && 'wc-open')}
+            ref={buttonRef}
+          >
+            <div className='wc-availability__inner'>
+              <a
+                id='webchat-start-chat-link'
+                className='wc-availability__link'
+                href='#webchat'
+                draggable='false'
+                onClick={onClick}
+                onKeyUp={onKeyUp}
+                onKeyDown={onKeyDown}
+                role='button'
+                data-module='govuk-button'
+              >
+                {!threadId ? <>Start chat</> : <>Show chat</>}
+                {showUnseenCount
+                  ? (
+                    <span className='wc-availability__unseen'>
+                      {unseenCount}
+                      <span className='govuk-visually-hidden'> {messageText}</span>
+                    </span>
+                    )
+                  : null}
+              </a>
+            </div>
           </div>
-        </div>
+          {!isChatOpen ? <LiveRegion /> : <Panel />}
+          <SkipLink />
+        </>
       )
     case 'EXISTING':
     case 'UNAVAILABLE':
@@ -77,25 +128,3 @@ export function Availability (props) {
       )
   }
 }
-
-function AvailabilityContent () {
-  const [thread] = useMessageThread()
-  const unreadMessageCount = thread.filter(message => !message.read).length
-  if (!thread.length) {
-    return (
-      <>
-        Start Chat
-      </>
-    )
-  }
-  return (
-    <>
-      Show Chat {!!unreadMessageCount && (
-        <>
-          <span className='wc-availability__unseen'>{unreadMessageCount}</span>
-          <span className='govuk-visually-hidden'> {unreadMessageCount === 1 ? 'new message' : 'new messages'}</span>
-        </>
-    )}
-    </>
-  )
-}

package/src/client/components/availability/availability.scss

@@ -1,3 +1,8 @@
+// stylelint-disable selector-max-id
+#wc-availability {
+  margin-bottom: govuk-spacing(4);
+}
+// stylelint-enable selector-max-id
 
 .wc-availability__inner {
   max-width: 960px;
@@ -12,6 +17,10 @@
   right: 0;
   padding-left: 15px;
   padding-right: 15px;
+  border: 1px solid transparent;
+  @media (forced-colors: active) {
+    border-color: currentColor;
+  }
 
   @include mq ($from: 'tablet') {
     padding-left: 30px;
@@ -27,52 +36,31 @@
 }
 
 .wc-availability__link {
+  @extend %govuk-link;
+  display: inline-block;
   @include govuk-font($size: 19);
-  position:relative;
-  display:inline-block;
   margin-right: 5px;
-  margin-bottom: 0;
-  fill: govuk-colour('black');
 
-  @include mq ($from: tablet) {
-    margin-right: 10px;
+  &:visited:not(:hover):not(:focus) {
+    color: govuk-colour('blue');
   }
 
   .govuk-visually-hidden, .wc-availability__unseen {
     pointer-events: none;
   }
 
-  &:hover {
-    color: $govuk-link-hover-colour;
-  }
-
-  &:active {
-    color: govuk-colour('black');
-  }
-
-  &:visited {
-    color: $govuk-link-colour;
-  }
-
-  &:focus {
-    box-shadow: none;
-    background-color: transparent;
-    text-decoration: underline;
-    color: $govuk-focus-colour;
-  }
-
-  &:hover:not(:focus):not(:active) {
-    color: $govuk-link-hover-colour;
-
-    .wc-availability__unseen {
-      background-color: govuk-colour('dark-blue');
-    }
+  &:hover:not(:focus):not(:active) .wc-availability__unseen {
+    background-color: govuk-colour('dark-blue');
   }
 }
 
 .wc-availability__unseen {
   display: inline-block;
   position: relative;
+  border: 1px solid transparent;
+  @media (forced-colors: active) {
+    border-color: currentColor;
+  }
   border-radius: 10px;
   background-color: govuk-colour('black');
   color: govuk-colour('white');
@@ -86,4 +74,4 @@
     padding-left: 7px;
     padding-right: 7px;
   }
-}
+}