From 78ef41bdf6193119315422bfebc6ffbd9de01d7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Denilson=20S=C3=A1?= <denilsonsa@gmail.com>
Date: Sat, 27 Feb 2021 23:41:36 +0100
Subject: [PATCH] Accessibility: using <button> instead of <div>

Closes #373
---
 example-multipleServers-full.html        | 25 ++++++++++++------------
 example-multipleServers-pretty.html      | 24 ++++++++++++-----------
 example-singleServer-customSettings.html | 24 ++++++++++++-----------
 example-singleServer-full.html           | 25 ++++++++++++------------
 example-singleServer-gauges.html         | 25 ++++++++++++------------
 example-singleServer-pretty.html         | 24 ++++++++++++-----------
 example-singleServer-progressBar.html    | 24 ++++++++++++-----------
 7 files changed, 91 insertions(+), 80 deletions(-)

diff --git a/example-multipleServers-full.html b/example-multipleServers-full.html
index 6ad30b5..7050afb 100644
--- a/example-multipleServers-full.html
+++ b/example-multipleServers-full.html
@@ -125,19 +125,18 @@ function startStop(){
 		//speedtest is running, abort
 		s.abort();
 		data=null;
-		I("startStopBtn").className="";
 		I("server").disabled=false;
 		initUI();
 	}else{
 		//test is not running, begin
-		I("startStopBtn").className="running";
+		updateStartStopButton(true);
 		I("shareArea").style.display="none";
 		I("server").disabled=true;
 		s.onupdate=function(data){
             uiData=data;
 		};
 		s.onend=function(aborted){
-            I("startStopBtn").className="";
+            updateStartStopButton(false);
             I("server").disabled=false;
             updateUI(true);
             if(!aborted){
@@ -157,6 +156,16 @@ function startStop(){
 		s.start();
 	}
 }
+function updateStartStopButton(running) {
+	var btn=I("startStopBtn");
+	if(running){
+		btn.className="running";
+		btn.textContent="Abort";
+	}else{
+		btn.className="";
+		btn.textContent="Start";
+	}
+}
 //this function reads the data sent back by the test and updates the UI
 function updateUI(forced){
 	if(!forced&&s.getState()!=3) return;
@@ -224,7 +233,6 @@ function initUI(){
 		100%{transform:rotate(359deg);}
 	}
 	#startStopBtn{
-		display:inline-block;
 		margin:0 auto;
 		color:#6060AA;
 		background-color:rgba(0,0,0,0);
@@ -234,7 +242,6 @@ function initUI(){
 		box-sizing:border-box;
 		width:8em; height:3em;
 		line-height:2.7em;
-		cursor:pointer;
 		box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
 	}
 	#startStopBtn:hover{
@@ -245,12 +252,6 @@ function initUI(){
 		border-color:#FF6060;
 		color:#FFFFFF;
 	}
-	#startStopBtn:before{
-		content:"Start";
-	}
-	#startStopBtn.running:before{
-		content:"Abort";
-	}
 	#serverArea{
 		margin-top:1em;
 	}
@@ -401,7 +402,7 @@ function initUI(){
 	<p id="message"><span class="loadCircle"></span>Selecting a server...</p>
 </div>
 <div id="testWrapper" class="hidden">
-	<div id="startStopBtn" onclick="startStop()"></div><br/>
+	<div><button type="button" id="startStopBtn" onclick="startStop()">Start</button></div>
 	<a class="privacy" href="#" onclick="I('privacyPolicy').style.display=''">Privacy</a>
 	<div id="serverArea">
 		Server: <select id="server" onchange="s.setSelectedServer(SPEEDTEST_SERVERS[this.value])"></select>
diff --git a/example-multipleServers-pretty.html b/example-multipleServers-pretty.html
index 5f7d326..50049a0 100644
--- a/example-multipleServers-pretty.html
+++ b/example-multipleServers-pretty.html
@@ -41,7 +41,7 @@ s.onupdate=function(data){ //callback to update data in UI
     I("jitText").textContent=data.jitterStatus;
 }
 s.onend=function(aborted){ //callback for test ended/aborted
-    I("startStopBtn").className=""; //show start button again
+    updateStartStopButton(false);
     if(aborted){ //if the test was aborted, clear the UI and prepare for new test
 		initUI();
     }
@@ -82,7 +82,17 @@ function startStop(){ //start/stop button pressed
 	}else{
 		//test is not running, begin
 		s.start();
-		I("startStopBtn").className="running";
+		updateStartStopButton(true);
+	}
+}
+function updateStartStopButton(running) {
+	var btn=I("startStopBtn");
+	if(running){
+		btn.className="running";
+		btn.textContent="Abort";
+	}else{
+		btn.className="";
+		btn.textContent="Start";
 	}
 }
 
@@ -112,7 +122,6 @@ function I(id){return document.getElementById(id);}
 		color:#404040;
 	}
 	#startStopBtn{
-		display:inline-block;
 		margin:0 auto;
 		color:#6060AA;
 		background-color:rgba(0,0,0,0);
@@ -122,7 +131,6 @@ function I(id){return document.getElementById(id);}
 		box-sizing:border-box;
 		width:8em; height:3em;
 		line-height:2.7em;
-		cursor:pointer;
 		box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
 	}
 	#startStopBtn:hover{
@@ -133,12 +141,6 @@ function I(id){return document.getElementById(id);}
 		border-color:#FF6060;
 		color:#FFFFFF;
 	}
-	#startStopBtn:before{
-		content:"Start";
-	}
-	#startStopBtn.running:before{
-		content:"Abort";
-	}
 	#test{
 		margin-top:2em;
 		margin-bottom:12em;
@@ -205,7 +207,7 @@ function I(id){return document.getElementById(id);}
 </head>
 <body>
 <h1>LibreSpeed Example</h1>
-<div id="startStopBtn" onclick="startStop()"></div>
+<div><button type="button" id="startStopBtn" onclick="startStop()">Start</button></div>
 <div id="serverId">Selecting server...</div>
 <div id="test">
 	<div class="testGroup">
diff --git a/example-singleServer-customSettings.html b/example-singleServer-customSettings.html
index b1c0cfb..c19ede5 100644
--- a/example-singleServer-customSettings.html
+++ b/example-singleServer-customSettings.html
@@ -21,12 +21,22 @@ s.onupdate=function(data){ //callback to update data in UI
     I("ulText").textContent=(data.testState==3&&data.ulStatus==0)?"...":data.ulStatus;
 }
 s.onend=function(aborted){ //callback for test ended/aborted
-    I("startStopBtn").className=""; //show start button again
+    updateStartStopButton(false);
     if(aborted){ //if the test was aborted, clear the UI and prepare for new test
 		initUI();
     }
 }
 
+function updateStartStopButton(running) {
+	var btn=I("startStopBtn");
+	if(running){
+		btn.className="running";
+		btn.textContent="Abort";
+	}else{
+		btn.className="";
+		btn.textContent="Start";
+	}
+}
 function startStop(){ //start/stop button pressed
 	if(s.getState()==3){
 		//speedtest is running, abort
@@ -34,7 +44,7 @@ function startStop(){ //start/stop button pressed
 	}else{
 		//test is not running, begin
 		s.start();
-		I("startStopBtn").className="running";
+		updateStartStopButton(true);
 	}
 }
 
@@ -61,7 +71,6 @@ function I(id){return document.getElementById(id);}
 		color:#404040;
 	}
 	#startStopBtn{
-		display:inline-block;
 		margin:0 auto;
 		color:#6060AA;
 		background-color:rgba(0,0,0,0);
@@ -71,7 +80,6 @@ function I(id){return document.getElementById(id);}
 		box-sizing:border-box;
 		width:8em; height:3em;
 		line-height:2.7em;
-		cursor:pointer;
 		box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
 	}
 	#startStopBtn:hover{
@@ -82,12 +90,6 @@ function I(id){return document.getElementById(id);}
 		border-color:#FF6060;
 		color:#FFFFFF;
 	}
-	#startStopBtn:before{
-		content:"Start";
-	}
-	#startStopBtn.running:before{
-		content:"Abort";
-	}
 	#test{
 		margin-top:2em;
 		margin-bottom:12em;
@@ -151,7 +153,7 @@ function I(id){return document.getElementById(id);}
 </head>
 <body>
 <h1>LibreSpeed Example</h1>
-<div id="startStopBtn" onclick="startStop()"></div>
+<div><button type="button" id="startStopBtn" onclick="startStop()">Start</button></div>
 <div id="test">
 	<div class="testGroup">
 		<div class="testArea">
diff --git a/example-singleServer-full.html b/example-singleServer-full.html
index 823ef9f..e13c716 100644
--- a/example-singleServer-full.html
+++ b/example-singleServer-full.html
@@ -60,17 +60,16 @@ function startStop(){
 		//speedtest is running, abort
 		s.abort();
 		data=null;
-		I("startStopBtn").className="";
 		initUI();
 	}else{
 		//test is not running, begin
-		I("startStopBtn").className="running";
+		updateStartStopButton(true);
 		I("shareArea").style.display="none";
 		s.onupdate=function(data){
             uiData=data;
 		};
 		s.onend=function(aborted){
-            I("startStopBtn").className="";
+            updateStartStopButton(false);
             updateUI(true);
             if(!aborted){
                 //if testId is present, show sharing panel, otherwise do nothing
@@ -89,6 +88,16 @@ function startStop(){
 		s.start();
 	}
 }
+function updateStartStopButton(running) {
+	var btn=I("startStopBtn");
+	if(running){
+		btn.className="running";
+		btn.textContent="Abort";
+	}else{
+		btn.className="";
+		btn.textContent="Start";
+	}
+}
 //this function reads the data sent back by the test and updates the UI
 function updateUI(forced){
 	if(!forced&&s.getState()!=3) return;
@@ -137,7 +146,6 @@ function initUI(){
 		color:#404040;
 	}
 	#startStopBtn{
-		display:inline-block;
 		margin:0 auto;
 		color:#6060AA;
 		background-color:rgba(0,0,0,0);
@@ -147,7 +155,6 @@ function initUI(){
 		box-sizing:border-box;
 		width:8em; height:3em;
 		line-height:2.7em;
-		cursor:pointer;
 		box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
 	}
 	#startStopBtn:hover{
@@ -158,12 +165,6 @@ function initUI(){
 		border-color:#FF6060;
 		color:#FFFFFF;
 	}
-	#startStopBtn:before{
-		content:"Start";
-	}
-	#startStopBtn.running:before{
-		content:"Abort";
-	}
 	#test{
 		margin-top:2em;
 		margin-bottom:12em;
@@ -278,7 +279,7 @@ function initUI(){
 <body>
 <h1>LibreSpeed Example</h1>
 <div id="testWrapper">
-	<div id="startStopBtn" onclick="startStop()"></div><br/>
+	<div><button type="button" id="startStopBtn" onclick="startStop()">Start</button></div>
 	<a class="privacy" href="#" onclick="I('privacyPolicy').style.display=''">Privacy</a>
 	<div id="test">
 		<div class="testGroup">
diff --git a/example-singleServer-gauges.html b/example-singleServer-gauges.html
index 9a49705..32de1b2 100644
--- a/example-singleServer-gauges.html
+++ b/example-singleServer-gauges.html
@@ -59,21 +59,30 @@ function startStop(){
 		//speedtest is running, abort
 		s.abort();
 		data=null;
-		I("startStopBtn").className="";
 		initUI();
 	}else{
 		//test is not running, begin
-		I("startStopBtn").className="running";
+		updateStartStopButton(true);
 		s.onupdate=function(data){
             uiData=data;
 		};
 		s.onend=function(aborted){
-            I("startStopBtn").className="";
+            updateStartStopButton(false);
             updateUI(true);
 		};
 		s.start();
 	}
 }
+function updateStartStopButton(running) {
+	var btn=I("startStopBtn");
+	if(running){
+		btn.className="running";
+		btn.textContent="Abort";
+	}else{
+		btn.className="";
+		btn.textContent="Start";
+	}
+}
 //this function reads the data sent back by the test and updates the UI
 function updateUI(forced){
 	if(!forced&&s.getState()!=3) return;
@@ -122,7 +131,6 @@ function initUI(){
 		color:#404040;
 	}
 	#startStopBtn{
-		display:inline-block;
 		margin:0 auto;
 		color:#6060AA;
 		background-color:rgba(0,0,0,0);
@@ -132,7 +140,6 @@ function initUI(){
 		box-sizing:border-box;
 		width:8em; height:3em;
 		line-height:2.7em;
-		cursor:pointer;
 		box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
 	}
 	#startStopBtn:hover{
@@ -143,12 +150,6 @@ function initUI(){
 		border-color:#FF6060;
 		color:#FFFFFF;
 	}
-	#startStopBtn:before{
-		content:"Start";
-	}
-	#startStopBtn.running:before{
-		content:"Abort";
-	}
 	#test{
 		margin-top:2em;
 		margin-bottom:12em;
@@ -223,7 +224,7 @@ function initUI(){
 <body>
 <h1>LibreSpeed Example</h1>
 <div id="testWrapper">
-	<div id="startStopBtn" onclick="startStop()"></div>
+	<div><button type="button" id="startStopBtn" onclick="startStop()">Start</button></div>
 	<div id="test">
         <div class="testGroup">
 			<div class="testArea2">
diff --git a/example-singleServer-pretty.html b/example-singleServer-pretty.html
index 7715535..c1da53f 100644
--- a/example-singleServer-pretty.html
+++ b/example-singleServer-pretty.html
@@ -18,12 +18,22 @@ s.onupdate=function(data){ //callback to update data in UI
     I("jitText").textContent=data.jitterStatus;
 }
 s.onend=function(aborted){ //callback for test ended/aborted
-    I("startStopBtn").className=""; //show start button again
+    updateStartStopButton(false);
     if(aborted){ //if the test was aborted, clear the UI and prepare for new test
 		initUI();
     }
 }
 
+function updateStartStopButton(running) {
+	var btn=I("startStopBtn");
+	if(running){
+		btn.className="running";
+		btn.textContent="Abort";
+	}else{
+		btn.className="";
+		btn.textContent="Start";
+	}
+}
 function startStop(){ //start/stop button pressed
 	if(s.getState()==3){
 		//speedtest is running, abort
@@ -31,7 +41,7 @@ function startStop(){ //start/stop button pressed
 	}else{
 		//test is not running, begin
 		s.start();
-		I("startStopBtn").className="running";
+		updateStartStopButton(true);
 	}
 }
 
@@ -61,7 +71,6 @@ function I(id){return document.getElementById(id);}
 		color:#404040;
 	}
 	#startStopBtn{
-		display:inline-block;
 		margin:0 auto;
 		color:#6060AA;
 		background-color:rgba(0,0,0,0);
@@ -71,7 +80,6 @@ function I(id){return document.getElementById(id);}
 		box-sizing:border-box;
 		width:8em; height:3em;
 		line-height:2.7em;
-		cursor:pointer;
 		box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
 	}
 	#startStopBtn:hover{
@@ -82,12 +90,6 @@ function I(id){return document.getElementById(id);}
 		border-color:#FF6060;
 		color:#FFFFFF;
 	}
-	#startStopBtn:before{
-		content:"Start";
-	}
-	#startStopBtn.running:before{
-		content:"Abort";
-	}
 	#test{
 		margin-top:2em;
 		margin-bottom:12em;
@@ -154,7 +156,7 @@ function I(id){return document.getElementById(id);}
 </head>
 <body>
 <h1>LibreSpeed Example</h1>
-<div id="startStopBtn" onclick="startStop()"></div>
+<div><button type="button" id="startStopBtn" onclick="startStop()">Start</button></div>
 <div id="test">
 	<div class="testGroup">
 		<div class="testArea">
diff --git a/example-singleServer-progressBar.html b/example-singleServer-progressBar.html
index f9e7007..dae5a10 100644
--- a/example-singleServer-progressBar.html
+++ b/example-singleServer-progressBar.html
@@ -20,12 +20,22 @@ s.onupdate=function(data){ //callback to update data in UI
     I("progress").style.width=(100*prog)+"%";
 }
 s.onend=function(aborted){ //callback for test ended/aborted
-    I("startStopBtn").className=""; //show start button again
+    updateStartStopButton(false);
     if(aborted){ //if the test was aborted, clear the UI and prepare for new test
 		initUI();
     }
 }
 
+function updateStartStopButton(running) {
+	var btn=I("startStopBtn");
+	if(running){
+		btn.className="running";
+		btn.textContent="Abort";
+	}else{
+		btn.className="";
+		btn.textContent="Start";
+	}
+}
 function startStop(){ //start/stop button pressed
 	if(s.getState()==3){
 		//speedtest is running, abort
@@ -33,7 +43,7 @@ function startStop(){ //start/stop button pressed
 	}else{
 		//test is not running, begin
 		s.start();
-		I("startStopBtn").className="running";
+		updateStartStopButton(true);
 	}
 }
 
@@ -63,7 +73,6 @@ function I(id){return document.getElementById(id);}
 		color:#404040;
 	}
 	#startStopBtn{
-		display:inline-block;
 		margin:0 auto;
 		color:#6060AA;
 		background-color:rgba(0,0,0,0);
@@ -73,7 +82,6 @@ function I(id){return document.getElementById(id);}
 		box-sizing:border-box;
 		width:8em; height:3em;
 		line-height:2.7em;
-		cursor:pointer;
 		box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
 	}
 	#startStopBtn:hover{
@@ -84,12 +92,6 @@ function I(id){return document.getElementById(id);}
 		border-color:#FF6060;
 		color:#FFFFFF;
 	}
-	#startStopBtn:before{
-		content:"Start";
-	}
-	#startStopBtn.running:before{
-		content:"Abort";
-	}
 	#test{
 		margin-top:2em;
 		margin-bottom:12em;
@@ -173,7 +175,7 @@ function I(id){return document.getElementById(id);}
 </head>
 <body>
 <h1>LibreSpeed Example</h1>
-<div id="startStopBtn" onclick="startStop()"></div>
+<div><button type="button" id="startStopBtn" onclick="startStop()">Start</button></div>
 <div id="test">
     <div id="progressBar"><div id="progress"></div></div>
 	<div class="testGroup">