From ad4dd622c1adf291b270de68466270c776cd6dc5 Mon Sep 17 00:00:00 2001
From: Doro <125262707+dhinrichs-scottlogic@users.noreply.github.com>
Date: Thu, 29 Feb 2024 12:57:53 +0000
Subject: [PATCH] 686 add skip to topbottom links to chat (#846)

---
 frontend/src/components/ChatBox/ChatBox.css   | 46 ++++++++++++++++++-
 frontend/src/components/ChatBox/ChatBox.tsx   | 12 ++++-
 .../src/components/ChatBox/ChatBoxInput.tsx   |  1 +
 3 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ChatBox/ChatBox.css b/frontend/src/components/ChatBox/ChatBox.css
index 38214137f..ee981d1cd 100644
--- a/frontend/src/components/ChatBox/ChatBox.css
+++ b/frontend/src/components/ChatBox/ChatBox.css
@@ -1,4 +1,5 @@
 .chat-box {
+	position: relative;
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
@@ -8,13 +9,13 @@
 }
 
 .chat-box .footer {
+	position: relative;
 	display: flex;
 	flex-direction: column;
 	gap: 1.25rem;
 	box-sizing: border-box;
 	width: 100%;
-	padding: 0.5rem 2rem 1.5rem;
-	padding: 2rem;
+	padding: 1rem 2rem;
 }
 
 .chat-box .footer label {
@@ -67,6 +68,47 @@
 	outline-offset: 0.1rem;
 }
 
+.chat-box .skip-link {
+	position: absolute;
+	left: 0;
+	width: 100%;
+	height: auto;
+	padding: 0.5rem 0;
+	background-color: var(--accent-background-colour);
+	color: var(--main-text-colour);
+	outline-offset: -0.25rem;
+	font-weight: 600;
+	text-align: center;
+	text-decoration: none;
+	opacity: 1;
+	transition: opacity 0.2s ease-in-out;
+	clip-path: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.chat-box .skip-link {
+		transition: none;
+	}
+}
+
+.chat-box .skip-link.skip-to-top {
+	top: -1.5rem;
+}
+
+.chat-box .skip-link.skip-to-bottom {
+	top: 0.125rem;
+}
+
+.chat-box .skip-link:not(:focus, :active) {
+	position: absolute;
+	overflow: hidden;
+	width: 1px;
+	height: 1px;
+	white-space: nowrap;
+	opacity: 0.1;
+	clip-path: inset(50%);
+}
+
 @media only screen and (width <= 70.5rem) {
 	.chat-box .footer {
 		gap: 0.5rem;
diff --git a/frontend/src/components/ChatBox/ChatBox.tsx b/frontend/src/components/ChatBox/ChatBox.tsx
index 8057cf60f..0023531b3 100644
--- a/frontend/src/components/ChatBox/ChatBox.tsx
+++ b/frontend/src/components/ChatBox/ChatBox.tsx
@@ -201,9 +201,19 @@ function ChatBox({
 	}
 
 	return (
-		<div className="chat-box">
+		<div className="chat-box" id="chat-box">
+			<a
+				className="skip-to-bottom skip-link "
+				id="skip-to-bottom"
+				href="#chat-box-input"
+			>
+				<span aria-hidden>&#129035;&nbsp;</span>skip to chat input
+			</a>
 			<ChatBoxFeed messages={messages} />
 			<div className="footer">
+				<a className="skip-to-top skip-link " href="#skip-to-bottom">
+					<span aria-hidden>&#129033;&nbsp;</span>skip to top of chat
+				</a>
 				<div className="messages">
 					<ChatBoxInput
 						content={chatInput}
diff --git a/frontend/src/components/ChatBox/ChatBoxInput.tsx b/frontend/src/components/ChatBox/ChatBoxInput.tsx
index 4ee68a511..6d86a7338 100644
--- a/frontend/src/components/ChatBox/ChatBoxInput.tsx
+++ b/frontend/src/components/ChatBox/ChatBoxInput.tsx
@@ -60,6 +60,7 @@ function ChatBoxInput({
 				characterLimit={CHARACTER_LIMIT}
 				// eslint-disable-next-line jsx-a11y/no-autofocus
 				autoFocus={true}
+				id="chat-box-input"
 			/>
 		</label>
 	);