Просмотр исходного кода

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>
Copilot 3 месяцев назад
Родитель
Сommit
da29334083

+ 3 - 1
examples/example-multipleServers-full.html

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

+ 3 - 1
examples/example-multipleServers-pretty.html

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

+ 3 - 1
examples/example-singleServer-customSettings.html

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

+ 3 - 1
examples/example-singleServer-gauges.html

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

+ 3 - 1
examples/example-singleServer-modern.html

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

+ 3 - 1
examples/example-singleServer-pretty.html

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

+ 3 - 1
examples/example-singleServer-progressBar.html

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

+ 3 - 1
index-classic.html

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