wcag/working-examples/aria-role-log/chatlog.html at e338c8fd80cbe11f354c2adc3a7648e1827b439c · w3c/wcag · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Using role=log with chat conversation: WCAG 2</title>
		<style>
			body{
				background:#fff;
				color:#000;
				font:100% / 1.5 sans-serif;
			}

			.scrollable {
			    height: 10rem;
			    overflow-y: auto;
			}
			label{
				display:block;
			}
		</style>
	</head>
	<body>
		<script>
			var counter = 0;
			var myVar;
			var onetime = 0;
			function makeChat () {
				var chatText = ["Hi!", "Pleased to meet you.", "We'll talk later, okay?", "Bye!"];
				var chatContent = document.getElementById("converse");

					var list = document.createElement("li")
					var item = document.createTextNode(chatText[counter]);
					list.appendChild(item);
					chatContent.appendChild(list);
					counter++;
					if (counter > 3) {
						clearInterval(myVar);
						}
					}

			function initiateChat () {

				if (onetime < 1) {
					document.getElementById("converse").innerHTML += "<li style\=\"text-indent: 100px;\">Hello</li>";
					myVar = setInterval(makeChat, 2000);
					document.getElementById("btn"); btn.disabled = true;
					onetime++;
				}
				else {
					 return false;

				}

			}


		</script>
		<main>
			<h1>Using <code>role="log"</code> with chat conversation</h1>
			<p>This simple script demonstrates how the conversation region in a chat is updated and surfaced to ATs using the aria <code>log</code> role. Here the role is placed on the region containing the dynamically updating conversation. This is not intended to be a fully-functional chat client, but to demonstrate the use of log role. In this mock demo, the conversation is updated with a brief, one-sided conversation, which is initiated by pressing Send.</p>
			<hr>
			<h2>Conversation</h2>
			<div class="scrollable" role="log">
				<ul id="converse" style="list-style-type: none;"></ul>
			</div>
			<div>
				<h2>Mock input</h2>
				<label for="fakeinput">Enter a message</label>
				<input id="fakeinput" type="text" name="fakeinput" readonly value="Hello"> <button id="btn" onclick="initiateChat()" type="button">Send</button>
			</div>

		</main>


	</body>
	</html>