From 5b7459f24d2dc069c5c78077d78f074107f928f9 Mon Sep 17 00:00:00 2001
From: Simon Ser <contact@emersion.fr>
Date: Thu, 26 Jun 2025 19:00:43 +0200
Subject: [PATCH] Improve accessibility by adding ARIA attributes

---
 components/app.js         | 13 +++++++------
 components/buffer-list.js |  4 ++--
 components/buffer.js      | 12 +++++++++---
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/components/app.js b/components/app.js
index d72dc92..ea001a6 100644
--- a/components/app.js
+++ b/components/app.js
@@ -2071,7 +2071,7 @@ export default class App extends Component {
 			}
 
 			bufferHeader = html`
-				<section id="buffer-header">
+				<section id="buffer-header" role="banner">
 					<${BufferHeader}
 						buffer=${activeBuffer}
 						server=${activeServer}
@@ -2093,8 +2093,9 @@ export default class App extends Component {
 		if (activeBuffer && activeBuffer.type === BufferType.CHANNEL) {
 			memberList = html`
 				<section
-						id="member-list"
-						class=${this.state.openPanels.memberList ? "expand" : ""}
+					id="member-list"
+					class=${this.state.openPanels.memberList ? "expand" : ""}
+					role="complementary"
 				>
 					<button
 						class="expander"
@@ -2245,8 +2246,8 @@ export default class App extends Component {
 
 		let app = html`
 			<section
-					id="buffer-list"
-					class=${this.state.openPanels.bufferList ? "expand" : ""}
+				id="buffer-list"
+				class=${this.state.openPanels.bufferList ? "expand" : ""}
 			>
 				<${BufferList}
 					buffers=${this.state.buffers}
@@ -2271,7 +2272,7 @@ export default class App extends Component {
 				scrollKey=${this.state.activeBuffer}
 				onScrollTop=${this.handleBufferScrollTop}
 			>
-				<section id="buffer" ref=${this.buffer} tabindex="-1">
+				<section id="buffer" ref=${this.buffer} tabindex="-1" role="main">
 					<${Buffer}
 						buffer=${activeBuffer}
 						server=${activeServer}
diff --git a/components/buffer-list.js b/components/buffer-list.js
index 72439e2..89db007 100644
--- a/components/buffer-list.js
+++ b/components/buffer-list.js
@@ -47,7 +47,7 @@ function BufferItem(props) {
 	}
 
 	return html`
-		<li class="${classes.join(" ")}">
+		<li class="${classes.join(" ")}" role="tab" aria-selected="${props.active}">
 			<a
 				href=${getBufferURL(props.buffer)}
 				title=${title}
@@ -80,5 +80,5 @@ export default function BufferList(props) {
 		`;
 	});
 
-	return html`<ul>${items}</ul>`;
+	return html`<ul role="tablist">${items}</ul>`;
 }
diff --git a/components/buffer.js b/components/buffer.js
index e2313b5..6da7c4d 100644
--- a/components/buffer.js
+++ b/components/buffer.js
@@ -43,7 +43,7 @@ function _Timestamp({ date, url, showSeconds }) {
 		if (showSeconds) {
 			timestamp += ":--";
 		}
-		return html`<span class="timestamp">${timestamp}</span>`;
+		return html`<span class="timestamp" aria-hidden="true">${timestamp}</span>`;
 	}
 
 	let hh = date.getHours().toString().padStart(2, "0");
@@ -154,7 +154,13 @@ class LogLine extends Component {
 					content = html`${linkify(stripANSI(text), onChannelClick)}`;
 					lineClass += " talk";
 				}
-				content = html`<span class="nick-caret">${prefix}</span>${createNick(msg.prefix.name)}<span class="nick-caret">${suffix}</span> ${content}`;
+				content = html`
+					<span class="nick-caret" aria-hidden="true">${prefix}</span>
+					${createNick(msg.prefix.name)}
+					<span class="nick-caret" aria-hidden="true">${suffix}</span>
+					${" "}
+					${content}
+				`;
 			}
 
 			let allowedPrefixes = server.statusMsg;
@@ -841,7 +847,7 @@ export default class Buffer extends Component {
 		children.push(createFoldGroup(foldMessages));
 
 		return html`
-			<div class="logline-list">
+			<div class="logline-list" role="log">
 				${children}
 			</div>
 		`;