From 03d62a0ca1f8e6d7feb6009c4cf71366098a783a Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Mon, 13 Apr 2026 07:56:17 +0200
Subject: [PATCH] fix: add aria-label to startStopBtn for screen reader
 accessibility (#785)

Agent-Logs-Url: https://github.com/librespeed/speedtest/sessions/cfb05653-7d75-4f0d-9e9a-1765eeaa8903

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com>
---
 examples/example-multipleServers-full.html        | 5 ++++-
 examples/example-multipleServers-pretty.html      | 4 +++-
 examples/example-singleServer-customSettings.html | 4 +++-
 examples/example-singleServer-gauges.html         | 5 ++++-
 examples/example-singleServer-modern.html         | 4 +++-
 examples/example-singleServer-pretty.html         | 4 +++-
 examples/example-singleServer-progressBar.html    | 4 +++-
 index-classic.html                                | 5 ++++-
 8 files changed, 27 insertions(+), 8 deletions(-)
diff --git a/examples/example-multipleServers-full.html b/examples/example-multipleServers-full.html
index 832465e..fde216a 100755
--- a/examples/example-multipleServers-full.html
+++ b/examples/example-multipleServers-full.html
@@ -126,11 +126,13 @@ function startStop(){
 		s.abort();
 		data=null;
 		I("startStopBtn").className="";
+		I("startStopBtn").setAttribute("aria-label","Start");
 		I("server").disabled=false;
 		initUI();
 	}else{
 		//test is not running, begin
 		I("startStopBtn").className="running";
+		I("startStopBtn").setAttribute("aria-label","Abort");
 		I("shareArea").style.display="none";
 		I("server").disabled=true;
 		s.onupdate=function(data){
@@ -138,6 +140,7 @@ function startStop(){
 		};
 		s.onend=function(aborted){
             I("startStopBtn").className="";
+            I("startStopBtn").setAttribute("aria-label","Start");
             I("server").disabled=false;
             updateUI(true);
             if(!aborted){
@@ -404,7 +407,7 @@ function initUI(){
 	<p id="message"><span class="loadCircle"></span>Selecting a server...</p>
 </div>
 <div id="testWrapper" class="hidden">
-	<button id="startStopBtn" onclick="startStop()"></button><br/>
+	<button id="startStopBtn" onclick="startStop()" aria-label="Start"></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>
diff --git a/examples/example-multipleServers-pretty.html b/examples/example-multipleServers-pretty.html
index f6abc6d..f9f0aba 100755
--- a/examples/example-multipleServers-pretty.html
+++ b/examples/example-multipleServers-pretty.html
@@ -42,6 +42,7 @@ s.onupdate=function(data){ //callback to update data in UI
 }
 s.onend=function(aborted){ //callback for test ended/aborted
     I("startStopBtn").className=""; //show start button again
+    I("startStopBtn").setAttribute("aria-label","Start");
     if(aborted){ //if the test was aborted, clear the UI and prepare for new test
 		initUI();
     }
@@ -83,6 +84,7 @@ function startStop(){ //start/stop button pressed
 		//test is not running, begin
 		s.start();
 		I("startStopBtn").className="running";
+		I("startStopBtn").setAttribute("aria-label","Abort");
 	}
 }
 
@@ -207,7 +209,7 @@ function I(id){return document.getElementById(id);}
 </head>
 <body>
 <h1>LibreSpeed Example</h1>
-<button id="startStopBtn" onclick="startStop()"></button>
+<button id="startStopBtn" onclick="startStop()" aria-label="Start"></button>
 <div id="serverId">Selecting server...</div>
 <div id="test">
 	<div class="testGroup">
diff --git a/examples/example-singleServer-customSettings.html b/examples/example-singleServer-customSettings.html
index cd465d2..e7000e4 100755
--- a/examples/example-singleServer-customSettings.html
+++ b/examples/example-singleServer-customSettings.html
@@ -22,6 +22,7 @@ s.onupdate=function(data){ //callback to update data in UI
 }
 s.onend=function(aborted){ //callback for test ended/aborted
     I("startStopBtn").className=""; //show start button again
+    I("startStopBtn").setAttribute("aria-label","Start");
     if(aborted){ //if the test was aborted, clear the UI and prepare for new test
 		initUI();
     }
@@ -35,6 +36,7 @@ function startStop(){ //start/stop button pressed
 		//test is not running, begin
 		s.start();
 		I("startStopBtn").className="running";
+		I("startStopBtn").setAttribute("aria-label","Abort");
 	}
 }
 
@@ -153,7 +155,7 @@ function I(id){return document.getElementById(id);}
 </head>
 <body>
 <h1>LibreSpeed Example</h1>
-<button id="startStopBtn" onclick="startStop()"></button>
+<button id="startStopBtn" onclick="startStop()" aria-label="Start"></button>
 <div id="test">
 	<div class="testGroup">
 		<div class="testArea">
diff --git a/examples/example-singleServer-gauges.html b/examples/example-singleServer-gauges.html
index 980adf4..2678614 100755
--- a/examples/example-singleServer-gauges.html
+++ b/examples/example-singleServer-gauges.html
@@ -60,15 +60,18 @@ function startStop(){
 		s.abort();
 		data=null;
 		I("startStopBtn").className="";
+		I("startStopBtn").setAttribute("aria-label","Start");
 		initUI();
 	}else{
 		//test is not running, begin
 		I("startStopBtn").className="running";
+		I("startStopBtn").setAttribute("aria-label","Abort");
 		s.onupdate=function(data){
             uiData=data;
 		};
 		s.onend=function(aborted){
             I("startStopBtn").className="";
+            I("startStopBtn").setAttribute("aria-label","Start");
             updateUI(true);
 		};
 		s.start();
@@ -225,7 +228,7 @@ function initUI(){
 <body>
 <h1>LibreSpeed Example</h1>
 <div id="testWrapper">
-	<button id="startStopBtn" onclick="startStop()"></button>
+	<button id="startStopBtn" onclick="startStop()" aria-label="Start"></button>
 	<div id="test">
         <div class="testGroup">
 			<div class="testArea2">
diff --git a/examples/example-singleServer-modern.html b/examples/example-singleServer-modern.html
index d3f8555..7237739 100644
--- a/examples/example-singleServer-modern.html
+++ b/examples/example-singleServer-modern.html
@@ -23,6 +23,7 @@ s.onupdate=function(data){ //callback to update data in UI
 }
 s.onend=function(aborted){ //callback for test ended/aborted
     I("startStopBtn").className=""; //show start button again
+    I("startStopBtn").setAttribute("aria-label","Start");
     if(aborted){ //if the test was aborted, clear the UI and prepare for new test
         initUI();
     } else {
@@ -44,6 +45,7 @@ function startStop(){ //start/stop button pressed
         //test is not running, begin
         s.start();
         I("startStopBtn").className="running";
+        I("startStopBtn").setAttribute("aria-label","Abort");
     }
 }
 
@@ -190,7 +192,7 @@ window.onload = function() {
 </head>
 <body>
 <h1>LibreSpeed</h1>
-<button id="startStopBtn" onclick="startStop()"></button>
+<button id="startStopBtn" onclick="startStop()" aria-label="Start"></button>
 <div id="test">
     <div class="testGroup">
         <div class="testArea">
diff --git a/examples/example-singleServer-pretty.html b/examples/example-singleServer-pretty.html
index a347683..2dd7869 100755
--- a/examples/example-singleServer-pretty.html
+++ b/examples/example-singleServer-pretty.html
@@ -19,6 +19,7 @@ s.onupdate=function(data){ //callback to update data in UI
 }
 s.onend=function(aborted){ //callback for test ended/aborted
     I("startStopBtn").className=""; //show start button again
+    I("startStopBtn").setAttribute("aria-label","Start");
     if(aborted){ //if the test was aborted, clear the UI and prepare for new test
 		initUI();
     }
@@ -32,6 +33,7 @@ function startStop(){ //start/stop button pressed
 		//test is not running, begin
 		s.start();
 		I("startStopBtn").className="running";
+		I("startStopBtn").setAttribute("aria-label","Abort");
 	}
 }
 
@@ -156,7 +158,7 @@ function I(id){return document.getElementById(id);}
 </head>
 <body>
 <h1>LibreSpeed Example</h1>
-<button id="startStopBtn" onclick="startStop()"></button>
+<button id="startStopBtn" onclick="startStop()" aria-label="Start"></button>
 <div id="test">
 	<div class="testGroup">
 		<div class="testArea">
diff --git a/examples/example-singleServer-progressBar.html b/examples/example-singleServer-progressBar.html
index 0e39cfd..b207c20 100755
--- a/examples/example-singleServer-progressBar.html
+++ b/examples/example-singleServer-progressBar.html
@@ -21,6 +21,7 @@ s.onupdate=function(data){ //callback to update data in UI
 }
 s.onend=function(aborted){ //callback for test ended/aborted
     I("startStopBtn").className=""; //show start button again
+    I("startStopBtn").setAttribute("aria-label","Start");
     if(aborted){ //if the test was aborted, clear the UI and prepare for new test
 		initUI();
     }
@@ -34,6 +35,7 @@ function startStop(){ //start/stop button pressed
 		//test is not running, begin
 		s.start();
 		I("startStopBtn").className="running";
+		I("startStopBtn").setAttribute("aria-label","Abort");
 	}
 }
 
@@ -175,7 +177,7 @@ function I(id){return document.getElementById(id);}
 </head>
 <body>
 <h1>LibreSpeed Example</h1>
-<button id="startStopBtn" onclick="startStop()"></button>
+<button id="startStopBtn" onclick="startStop()" aria-label="Start"></button>
 <div id="test">
     <div id="progressBar"><div id="progress"></div></div>
 	<div class="testGroup">
diff --git a/index-classic.html b/index-classic.html
index d34f5d5..19bf2e2 100644
--- a/index-classic.html
+++ b/index-classic.html
@@ -135,11 +135,13 @@
 				s.abort();
 				data = null;
 				I("startStopBtn").className = "";
+				I("startStopBtn").setAttribute("aria-label", "Start");
 				I("server").disabled = false;
 				initUI();
 			} else {
 				//test is not running, begin
 				I("startStopBtn").className = "running";
+				I("startStopBtn").setAttribute("aria-label", "Abort");
 				I("shareArea").style.display = "none";
 				I("server").disabled = true;
 				s.onupdate = function (data) {
@@ -147,6 +149,7 @@
 				};
 				s.onend = function (aborted) {
 					I("startStopBtn").className = "";
+					I("startStopBtn").setAttribute("aria-label", "Start");
 					I("server").disabled = false;
 					updateUI(true);
 					if (!aborted) {
@@ -492,7 +495,7 @@
 		<p id="message"><span class="loadCircle"></span>Selecting a server...</p>
 	</div>
 	<div id="testWrapper" class="hidden">
-		<button id="startStopBtn" onclick="startStop()"></button><br />
+		<button id="startStopBtn" onclick="startStop()" aria-label="Start"></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>
