Add more ARIA attributes for accessibility

components/app.js

@@ -2096,6 +2096,7 @@ export default class App extends Component {
 					id="member-list"
 					class=${this.state.openPanels.memberList ? "expand" : ""}
 					role="complementary"
+					aria-label="Members list"
 				>
 					<button
 						class="expander"
@@ -2222,7 +2223,7 @@ export default class App extends Component {
 		let error = null;
 		if (this.state.error) {
 			error = html`
-				<div id="error-msg">
+				<div id="error-msg" role="alert">
 					${this.state.error}
 					${" "}
 					<button onClick=${this.handleDismissError}>×</button>
@@ -2272,7 +2273,7 @@ export default class App extends Component {
 				scrollKey=${this.state.activeBuffer}
 				onScrollTop=${this.handleBufferScrollTop}
 			>
-				<section id="buffer" ref=${this.buffer} tabindex="-1" role="main">
+				<section id="buffer" ref=${this.buffer} tabindex="-1" role="log">
 					<${Buffer}
 						buffer=${activeBuffer}
 						server=${activeServer}

components/buffer-list.js

@@ -80,5 +80,9 @@ export default function BufferList(props) {
 		`;
 	});
 
-	return html`<ul role="tablist">${items}</ul>`;
+	return html`
+		<ul role="tablist" aria-label="Buffer list">
+			${items}
+		</ul>
+	`;
 }

components/buffer.js

@@ -386,7 +386,7 @@ class LogLine extends Component {
 		}
 
 		return html`
-			<div class="logline ${lineClass}" data-key=${msg.key}>
+			<div class="logline ${lineClass}" data-key=${msg.key} role="listitem">
 				<${Timestamp} date=${new Date(msg.tags.time)} url=${getMessageURL(buf, msg)}/>
 				${" "}
 				${content}
@@ -511,7 +511,7 @@ class FoldGroup extends Component {
 		}
 
 		return html`
-			<div class="logline" data-key=${msgs[0].key}>
+			<div class="logline" data-key=${msgs[0].key} role="listitem">
 				${timestamp}
 				${" "}
 				${content}
@@ -564,7 +564,7 @@ class NotificationNagger extends Component {
 		}
 
 		return html`
-			<div class="logline nag">
+			<div class="logline nag" role="listitem">
 				<${Timestamp}/>
 				${" "}
 				<a href="#" onClick=${this.handleClick}>Turn on desktop notifications</a> to get notified about new messages
@@ -605,7 +605,7 @@ class ProtocolHandlerNagger extends Component {
 		}
 		let name = this.props.bouncerName || "this bouncer";
 		return html`
-			<div class="logline nag">
+			<div class="logline nag" role="listitem">
 				<${Timestamp}/>
 				${" "}
 				<a href="#" onClick=${this.handleClick}>Register our protocol handler</a> to open IRC links with ${name}
@@ -643,7 +643,7 @@ function AccountNagger({ server, onAuthClick, onRegisterClick }) {
 	}
 
 	return html`
-		<div class="logline nag">
+		<div class="logline nag" role="listitem">
 			<${Timestamp}/> ${msg}
 		</div>
 	`;
@@ -662,7 +662,7 @@ class DateSeparator extends Component {
 		let date = this.props.date;
 		let text = date.toLocaleDateString([], { year: "numeric", month: "2-digit", day: "2-digit" });
 		return html`
-			<div class="separator date-separator">
+			<div class="separator date-separator" role="separator">
 				${text}
 			</div>
 		`;
@@ -670,7 +670,7 @@ class DateSeparator extends Component {
 }
 
 function UnreadSeparator(props) {
-	return html`<div class="separator unread-separator">New messages</div>`;
+	return html`<div class="separator unread-separator" role="separator">New messages</div>`;
 }
 
 function sameDate(d1, d2) {
@@ -847,7 +847,7 @@ export default class Buffer extends Component {
 		children.push(createFoldGroup(foldMessages));
 
 		return html`
-			<div class="logline-list" role="log">
+			<div class="logline-list" role="list">
 				${children}
 			</div>
 		`;

components/dialog.js

@@ -47,11 +47,11 @@ export default class Dialog extends Component {
 
 	render() {
 		return html`
-			<div class="dialog" onClick=${this.handleBackdropClick}>
+			<div class="dialog" onClick=${this.handleBackdropClick} role="dialog" aria-modal="true">
 				<div class="dialog-body" ref=${this.body}>
 					<div class="dialog-header">
 						<h2>${this.props.title}</h2>
-						<button class="dialog-close" onClick=${this.handleCloseClick}>×</button>
+						<button class="dialog-close" onClick=${this.handleCloseClick} title="Close">×</button>
 					</div>
 					${this.props.children}
 				</div>