beenull/speedtest
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Accessibility: using <button> instead of <div>

Browse source 
Closes #373
This commit is contained in:
Denilson Sá 2021-02-27 23:41:36 +01:00
parent 624de7778b
commit 78ef41bdf6
7 changed files with 91 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
example-multipleServers-full.html
View file

@ -125,19 +125,18 @@ function startStop(){
//speedtest is running, abort //speedtest is running, abort
s.abort(); s.abort();
data=null; data=null;
I("startStopBtn").className="";
I("server").disabled=false; I("server").disabled=false;
initUI(); initUI();
}else{ }else{
//test is not running, begin //test is not running, begin
I("startStopBtn").className="running"; updateStartStopButton(true);
I("shareArea").style.display="none"; I("shareArea").style.display="none";
I("server").disabled=true; I("server").disabled=true;
s.onupdate=function(data){ s.onupdate=function(data){
uiData=data; uiData=data;
}; };
s.onend=function(aborted){ s.onend=function(aborted){
I("startStopBtn").className=""; updateStartStopButton(false);
I("server").disabled=false; I("server").disabled=false;
updateUI(true); updateUI(true);
if(!aborted){ if(!aborted){
@ -157,6 +156,16 @@ function startStop(){
s.start(); 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 //this function reads the data sent back by the test and updates the UI
function updateUI(forced){ function updateUI(forced){
if(!forced&&s.getState()!=3) return; if(!forced&&s.getState()!=3) return;
@ -224,7 +233,6 @@ function initUI(){
100%{transform:rotate(359deg);} 100%{transform:rotate(359deg);}
} }
#startStopBtn{ #startStopBtn{
display:inline-block;
margin:0 auto; margin:0 auto;
color:#6060AA; color:#6060AA;
background-color:rgba(0,0,0,0); background-color:rgba(0,0,0,0);
@ -234,7 +242,6 @@ function initUI(){
box-sizing:border-box; box-sizing:border-box;
width:8em; height:3em; width:8em; height:3em;
line-height:2.7em; 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); box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
} }
#startStopBtn:hover{ #startStopBtn:hover{
@ -245,12 +252,6 @@ function initUI(){
border-color:#FF6060; border-color:#FF6060;
color:#FFFFFF; color:#FFFFFF;
} }
#startStopBtn:before{
content:"Start";
}
#startStopBtn.running:before{
content:"Abort";
}
#serverArea{ #serverArea{
margin-top:1em; margin-top:1em;
} }
@ -401,7 +402,7 @@ function initUI(){
<p id="message"><span class="loadCircle"></span>Selecting a server...</p> <p id="message"><span class="loadCircle"></span>Selecting a server...</p>
</div> </div>
<div id="testWrapper" class="hidden"> <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> <a class="privacy" href="#" onclick="I('privacyPolicy').style.display=''">Privacy</a>
<div id="serverArea"> <div id="serverArea">
Server: <select id="server" onchange="s.setSelectedServer(SPEEDTEST_SERVERS[this.value])"></select> Server: <select id="server" onchange="s.setSelectedServer(SPEEDTEST_SERVERS[this.value])"></select>

24
example-multipleServers-pretty.html
View file

@ -41,7 +41,7 @@ s.onupdate=function(data){ //callback to update data in UI
I("jitText").textContent=data.jitterStatus; I("jitText").textContent=data.jitterStatus;
} }
s.onend=function(aborted){ //callback for test ended/aborted 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 if(aborted){ //if the test was aborted, clear the UI and prepare for new test
initUI(); initUI();
} }
@ -82,7 +82,17 @@ function startStop(){ //start/stop button pressed
}else{ }else{
//test is not running, begin //test is not running, begin
s.start(); 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; color:#404040;
} }
#startStopBtn{ #startStopBtn{
display:inline-block;
margin:0 auto; margin:0 auto;
color:#6060AA; color:#6060AA;
background-color:rgba(0,0,0,0); background-color:rgba(0,0,0,0);
@ -122,7 +131,6 @@ function I(id){return document.getElementById(id);}
box-sizing:border-box; box-sizing:border-box;
width:8em; height:3em; width:8em; height:3em;
line-height:2.7em; 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); box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
} }
#startStopBtn:hover{ #startStopBtn:hover{
@ -133,12 +141,6 @@ function I(id){return document.getElementById(id);}
border-color:#FF6060; border-color:#FF6060;
color:#FFFFFF; color:#FFFFFF;
} }
#startStopBtn:before{
content:"Start";
}
#startStopBtn.running:before{
content:"Abort";
}
#test{ #test{
margin-top:2em; margin-top:2em;
margin-bottom:12em; margin-bottom:12em;
@ -205,7 +207,7 @@ function I(id){return document.getElementById(id);}
</head> </head>
<body> <body>
<h1>LibreSpeed Example</h1> <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="serverId">Selecting server...</div>
<div id="test"> <div id="test">
<div class="testGroup"> <div class="testGroup">

24
example-singleServer-customSettings.html
View file

@ -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; I("ulText").textContent=(data.testState==3&&data.ulStatus==0)?"...":data.ulStatus;
} }
s.onend=function(aborted){ //callback for test ended/aborted 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 if(aborted){ //if the test was aborted, clear the UI and prepare for new test
initUI(); 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 function startStop(){ //start/stop button pressed
if(s.getState()==3){ if(s.getState()==3){
//speedtest is running, abort //speedtest is running, abort
@ -34,7 +44,7 @@ function startStop(){ //start/stop button pressed
}else{ }else{
//test is not running, begin //test is not running, begin
s.start(); s.start();
I("startStopBtn").className="running"; updateStartStopButton(true);
} }
} }
@ -61,7 +71,6 @@ function I(id){return document.getElementById(id);}
color:#404040; color:#404040;
} }
#startStopBtn{ #startStopBtn{
display:inline-block;
margin:0 auto; margin:0 auto;
color:#6060AA; color:#6060AA;
background-color:rgba(0,0,0,0); background-color:rgba(0,0,0,0);
@ -71,7 +80,6 @@ function I(id){return document.getElementById(id);}
box-sizing:border-box; box-sizing:border-box;
width:8em; height:3em; width:8em; height:3em;
line-height:2.7em; 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); box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
} }
#startStopBtn:hover{ #startStopBtn:hover{
@ -82,12 +90,6 @@ function I(id){return document.getElementById(id);}
border-color:#FF6060; border-color:#FF6060;
color:#FFFFFF; color:#FFFFFF;
} }
#startStopBtn:before{
content:"Start";
}
#startStopBtn.running:before{
content:"Abort";
}
#test{ #test{
margin-top:2em; margin-top:2em;
margin-bottom:12em; margin-bottom:12em;
@ -151,7 +153,7 @@ function I(id){return document.getElementById(id);}
</head> </head>
<body> <body>
<h1>LibreSpeed Example</h1> <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="test">
<div class="testGroup"> <div class="testGroup">
<div class="testArea"> <div class="testArea">

25
example-singleServer-full.html
View file

@ -60,17 +60,16 @@ function startStop(){
//speedtest is running, abort //speedtest is running, abort
s.abort(); s.abort();
data=null; data=null;
I("startStopBtn").className="";
initUI(); initUI();
}else{ }else{
//test is not running, begin //test is not running, begin
I("startStopBtn").className="running"; updateStartStopButton(true);
I("shareArea").style.display="none"; I("shareArea").style.display="none";
s.onupdate=function(data){ s.onupdate=function(data){
uiData=data; uiData=data;
}; };
s.onend=function(aborted){ s.onend=function(aborted){
I("startStopBtn").className=""; updateStartStopButton(false);
updateUI(true); updateUI(true);
if(!aborted){ if(!aborted){
//if testId is present, show sharing panel, otherwise do nothing //if testId is present, show sharing panel, otherwise do nothing
@ -89,6 +88,16 @@ function startStop(){
s.start(); 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 //this function reads the data sent back by the test and updates the UI
function updateUI(forced){ function updateUI(forced){
if(!forced&&s.getState()!=3) return; if(!forced&&s.getState()!=3) return;
@ -137,7 +146,6 @@ function initUI(){
color:#404040; color:#404040;
} }
#startStopBtn{ #startStopBtn{
display:inline-block;
margin:0 auto; margin:0 auto;
color:#6060AA; color:#6060AA;
background-color:rgba(0,0,0,0); background-color:rgba(0,0,0,0);
@ -147,7 +155,6 @@ function initUI(){
box-sizing:border-box; box-sizing:border-box;
width:8em; height:3em; width:8em; height:3em;
line-height:2.7em; 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); box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
} }
#startStopBtn:hover{ #startStopBtn:hover{
@ -158,12 +165,6 @@ function initUI(){
border-color:#FF6060; border-color:#FF6060;
color:#FFFFFF; color:#FFFFFF;
} }
#startStopBtn:before{
content:"Start";
}
#startStopBtn.running:before{
content:"Abort";
}
#test{ #test{
margin-top:2em; margin-top:2em;
margin-bottom:12em; margin-bottom:12em;
@ -278,7 +279,7 @@ function initUI(){
<body> <body>
<h1>LibreSpeed Example</h1> <h1>LibreSpeed Example</h1>
<div id="testWrapper"> <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> <a class="privacy" href="#" onclick="I('privacyPolicy').style.display=''">Privacy</a>
<div id="test"> <div id="test">
<div class="testGroup"> <div class="testGroup">

25
example-singleServer-gauges.html
View file

@ -59,21 +59,30 @@ function startStop(){
//speedtest is running, abort //speedtest is running, abort
s.abort(); s.abort();
data=null; data=null;
I("startStopBtn").className="";
initUI(); initUI();
}else{ }else{
//test is not running, begin //test is not running, begin
I("startStopBtn").className="running"; updateStartStopButton(true);
s.onupdate=function(data){ s.onupdate=function(data){
uiData=data; uiData=data;
}; };
s.onend=function(aborted){ s.onend=function(aborted){
I("startStopBtn").className=""; updateStartStopButton(false);
updateUI(true); updateUI(true);
}; };
s.start(); 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 //this function reads the data sent back by the test and updates the UI
function updateUI(forced){ function updateUI(forced){
if(!forced&&s.getState()!=3) return; if(!forced&&s.getState()!=3) return;
@ -122,7 +131,6 @@ function initUI(){
color:#404040; color:#404040;
} }
#startStopBtn{ #startStopBtn{
display:inline-block;
margin:0 auto; margin:0 auto;
color:#6060AA; color:#6060AA;
background-color:rgba(0,0,0,0); background-color:rgba(0,0,0,0);
@ -132,7 +140,6 @@ function initUI(){
box-sizing:border-box; box-sizing:border-box;
width:8em; height:3em; width:8em; height:3em;
line-height:2.7em; 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); box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
} }
#startStopBtn:hover{ #startStopBtn:hover{
@ -143,12 +150,6 @@ function initUI(){
border-color:#FF6060; border-color:#FF6060;
color:#FFFFFF; color:#FFFFFF;
} }
#startStopBtn:before{
content:"Start";
}
#startStopBtn.running:before{
content:"Abort";
}
#test{ #test{
margin-top:2em; margin-top:2em;
margin-bottom:12em; margin-bottom:12em;
@ -223,7 +224,7 @@ function initUI(){
<body> <body>
<h1>LibreSpeed Example</h1> <h1>LibreSpeed Example</h1>
<div id="testWrapper"> <div id="testWrapper">
<div id="startStopBtn" onclick="startStop()"></div> <div><button type="button" id="startStopBtn" onclick="startStop()">Start</button></div>
<div id="test"> <div id="test">
<div class="testGroup"> <div class="testGroup">
<div class="testArea2"> <div class="testArea2">

24
example-singleServer-pretty.html
View file

@ -18,12 +18,22 @@ s.onupdate=function(data){ //callback to update data in UI
I("jitText").textContent=data.jitterStatus; I("jitText").textContent=data.jitterStatus;
} }
s.onend=function(aborted){ //callback for test ended/aborted 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 if(aborted){ //if the test was aborted, clear the UI and prepare for new test
initUI(); 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 function startStop(){ //start/stop button pressed
if(s.getState()==3){ if(s.getState()==3){
//speedtest is running, abort //speedtest is running, abort
@ -31,7 +41,7 @@ function startStop(){ //start/stop button pressed
}else{ }else{
//test is not running, begin //test is not running, begin
s.start(); s.start();
I("startStopBtn").className="running"; updateStartStopButton(true);
} }
} }
@ -61,7 +71,6 @@ function I(id){return document.getElementById(id);}
color:#404040; color:#404040;
} }
#startStopBtn{ #startStopBtn{
display:inline-block;
margin:0 auto; margin:0 auto;
color:#6060AA; color:#6060AA;
background-color:rgba(0,0,0,0); background-color:rgba(0,0,0,0);
@ -71,7 +80,6 @@ function I(id){return document.getElementById(id);}
box-sizing:border-box; box-sizing:border-box;
width:8em; height:3em; width:8em; height:3em;
line-height:2.7em; 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); box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
} }
#startStopBtn:hover{ #startStopBtn:hover{
@ -82,12 +90,6 @@ function I(id){return document.getElementById(id);}
border-color:#FF6060; border-color:#FF6060;
color:#FFFFFF; color:#FFFFFF;
} }
#startStopBtn:before{
content:"Start";
}
#startStopBtn.running:before{
content:"Abort";
}
#test{ #test{
margin-top:2em; margin-top:2em;
margin-bottom:12em; margin-bottom:12em;
@ -154,7 +156,7 @@ function I(id){return document.getElementById(id);}
</head> </head>
<body> <body>
<h1>LibreSpeed Example</h1> <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="test">
<div class="testGroup"> <div class="testGroup">
<div class="testArea"> <div class="testArea">

24
example-singleServer-progressBar.html
View file

@ -20,12 +20,22 @@ s.onupdate=function(data){ //callback to update data in UI
I("progress").style.width=(100*prog)+"%"; I("progress").style.width=(100*prog)+"%";
} }
s.onend=function(aborted){ //callback for test ended/aborted 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 if(aborted){ //if the test was aborted, clear the UI and prepare for new test
initUI(); 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 function startStop(){ //start/stop button pressed
if(s.getState()==3){ if(s.getState()==3){
//speedtest is running, abort //speedtest is running, abort
@ -33,7 +43,7 @@ function startStop(){ //start/stop button pressed
}else{ }else{
//test is not running, begin //test is not running, begin
s.start(); s.start();
I("startStopBtn").className="running"; updateStartStopButton(true);
} }
} }
@ -63,7 +73,6 @@ function I(id){return document.getElementById(id);}
color:#404040; color:#404040;
} }
#startStopBtn{ #startStopBtn{
display:inline-block;
margin:0 auto; margin:0 auto;
color:#6060AA; color:#6060AA;
background-color:rgba(0,0,0,0); background-color:rgba(0,0,0,0);
@ -73,7 +82,6 @@ function I(id){return document.getElementById(id);}
box-sizing:border-box; box-sizing:border-box;
width:8em; height:3em; width:8em; height:3em;
line-height:2.7em; 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); box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
} }
#startStopBtn:hover{ #startStopBtn:hover{
@ -84,12 +92,6 @@ function I(id){return document.getElementById(id);}
border-color:#FF6060; border-color:#FF6060;
color:#FFFFFF; color:#FFFFFF;
} }
#startStopBtn:before{
content:"Start";
}
#startStopBtn.running:before{
content:"Abort";
}
#test{ #test{
margin-top:2em; margin-top:2em;
margin-bottom:12em; margin-bottom:12em;
@ -173,7 +175,7 @@ function I(id){return document.getElementById(id);}
</head> </head>
<body> <body>
<h1>LibreSpeed Example</h1> <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="test">
<div id="progressBar"><div id="progress"></div></div> <div id="progressBar"><div id="progress"></div></div>
<div class="testGroup"> <div class="testGroup">