686 add skip to topbottom links to chat (#846)

ScottLogic · Apr 8, 2024 · d984cbf · d984cbf
1 parent 5b8637b
commit d984cbf
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 3 deletions.
diff --git 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
@@ -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
@@ -60,6 +60,7 @@ function ChatBoxInput({
 				characterLimit={CHARACTER_LIMIT}
 				// eslint-disable-next-line jsx-a11y/no-autofocus
 				autoFocus={true}
+				id="chat-box-input"
 			/>
 		</label>
 	);