Improve accessibility by adding ARIA attributes

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}
@@ -2095,6 +2095,7 @@ export default class App extends Component {
 				<section
 					id="member-list"
 					class=${this.state.openPanels.memberList ? "expand" : ""}
+					role="complementary"
 				>
 					<button
 						class="expander"
@@ -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}

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>`;
 }

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>
 		`;