Fix accessibility: replace div#startStopBtn with <button> in classic design (#782)

* Initial plan

* Replace div#startStopBtn with button element for keyboard accessibility

Agent-Logs-Url: https://github.com/librespeed/speedtest/sessions/f3d60a26-754c-48da-9672-542810806f72

Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com>
This commit is contained in:
Copilot 2026-04-13 07:40:02 +02:00 committed by GitHub
parent dce0bdddb3
commit da29334083
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 24 additions and 8 deletions

View file

@ -230,6 +230,8 @@ function initUI(){
color:#6060AA;
background-color:rgba(0,0,0,0);
border:0.15em solid #6060FF;
padding:0;
font:inherit;
border-radius:0.3em;
transition:all 0.3s;
box-sizing:border-box;
@ -402,7 +404,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/>
<button id="startStopBtn" onclick="startStop()"></button><br/>
<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>

View file

@ -117,6 +117,8 @@ function I(id){return document.getElementById(id);}
color:#6060AA;
background-color:rgba(0,0,0,0);
border:0.15em solid #6060FF;
padding:0;
font:inherit;
border-radius:0.3em;
transition:all 0.3s;
box-sizing:border-box;
@ -205,7 +207,7 @@ function I(id){return document.getElementById(id);}
</head>
<body>
<h1>LibreSpeed Example</h1>
<div id="startStopBtn" onclick="startStop()"></div>
<button id="startStopBtn" onclick="startStop()"></button>
<div id="serverId">Selecting server...</div>
<div id="test">
<div class="testGroup">

View file

@ -66,6 +66,8 @@ function I(id){return document.getElementById(id);}
color:#6060AA;
background-color:rgba(0,0,0,0);
border:0.15em solid #6060FF;
padding:0;
font:inherit;
border-radius:0.3em;
transition:all 0.3s;
box-sizing:border-box;
@ -151,7 +153,7 @@ function I(id){return document.getElementById(id);}
</head>
<body>
<h1>LibreSpeed Example</h1>
<div id="startStopBtn" onclick="startStop()"></div>
<button id="startStopBtn" onclick="startStop()"></button>
<div id="test">
<div class="testGroup">
<div class="testArea">

View file

@ -127,6 +127,8 @@ function initUI(){
color:#6060AA;
background-color:rgba(0,0,0,0);
border:0.15em solid #6060FF;
padding:0;
font:inherit;
border-radius:0.3em;
transition:all 0.3s;
box-sizing:border-box;
@ -223,7 +225,7 @@ function initUI(){
<body>
<h1>LibreSpeed Example</h1>
<div id="testWrapper">
<div id="startStopBtn" onclick="startStop()"></div>
<button id="startStopBtn" onclick="startStop()"></button>
<div id="test">
<div class="testGroup">
<div class="testArea2">

View file

@ -84,6 +84,8 @@ window.onload = function() {
color:#fff;
background-color:#007bff;
border:none;
padding:0;
font:inherit;
border-radius:0.3em;
transition:all 0.3s;
box-sizing:border-box;
@ -188,7 +190,7 @@ window.onload = function() {
</head>
<body>
<h1>LibreSpeed</h1>
<div id="startStopBtn" onclick="startStop()"></div>
<button id="startStopBtn" onclick="startStop()"></button>
<div id="test">
<div class="testGroup">
<div class="testArea">

View file

@ -66,6 +66,8 @@ function I(id){return document.getElementById(id);}
color:#6060AA;
background-color:rgba(0,0,0,0);
border:0.15em solid #6060FF;
padding:0;
font:inherit;
border-radius:0.3em;
transition:all 0.3s;
box-sizing:border-box;
@ -154,7 +156,7 @@ function I(id){return document.getElementById(id);}
</head>
<body>
<h1>LibreSpeed Example</h1>
<div id="startStopBtn" onclick="startStop()"></div>
<button id="startStopBtn" onclick="startStop()"></button>
<div id="test">
<div class="testGroup">
<div class="testArea">

View file

@ -68,6 +68,8 @@ function I(id){return document.getElementById(id);}
color:#6060AA;
background-color:rgba(0,0,0,0);
border:0.15em solid #6060FF;
padding:0;
font:inherit;
border-radius:0.3em;
transition:all 0.3s;
box-sizing:border-box;
@ -173,7 +175,7 @@ function I(id){return document.getElementById(id);}
</head>
<body>
<h1>LibreSpeed Example</h1>
<div id="startStopBtn" onclick="startStop()"></div>
<button id="startStopBtn" onclick="startStop()"></button>
<div id="test">
<div id="progressBar"><div id="progress"></div></div>
<div class="testGroup">

View file

@ -252,6 +252,8 @@
color: #6060AA;
background-color: rgba(0, 0, 0, 0);
border: 0.15em solid #6060FF;
padding: 0;
font: inherit;
border-radius: 0.3em;
transition: all 0.3s;
box-sizing: border-box;
@ -490,7 +492,7 @@
<p id="message"><span class="loadCircle"></span>Selecting a server...</p>
</div>
<div id="testWrapper" class="hidden">
<div id="startStopBtn" onclick="startStop()"></div><br />
<button id="startStopBtn" onclick="startStop()"></button><br />
<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>