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

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

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

25
example-singleServer-full.html
View file

@ -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">

25
example-singleServer-gauges.html
View file

@ -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">

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

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)+"%";
}
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">