Conversation
Agent-Logs-Url: https://github.com/librespeed/speedtest/sessions/f3d60a26-754c-48da-9672-542810806f72 Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Fix button accessibility issue by changing div to button
Fix accessibility: replace Apr 12, 2026
div#startStopBtn with <button> in classic design
sstidl
approved these changes
Apr 13, 2026
Contributor
Review Summary by QodoFix accessibility: replace div#startStopBtn with button element
WalkthroughsDescription• Replace non-semantic <div> with <button> element for keyboard accessibility • Add CSS reset properties to preserve visual appearance • Update all example pages and main index file consistently Diagramflowchart LR
A["div#startStopBtn<br/>onclick handler"] -->|"Replace with<br/>semantic element"| B["button#startStopBtn<br/>onclick handler"]
B -->|"Add CSS reset"| C["padding: 0<br/>font: inherit"]
C -->|"Maintains visual<br/>appearance"| D["Keyboard accessible<br/>Screen reader visible"]
File Changes1. index-classic.html
|
Contributor
Code Review by Qodo
|
![qodo-free-for-open-source-projects[bot]](https://avatars.githubusercontent.com/in/1068000?s=60&v=4){kind=small}
| </div> | ||
| <div id="testWrapper" class="hidden"> | ||
| <div id="startStopBtn" onclick="startStop()"></div><br /> | ||
| <button id="startStopBtn" onclick="startStop()"></button><br /> |
Contributor
There was a problem hiding this comment.
1. Button lacks accessible name 🐞 Bug ≡ Correctness
The new <button id="startStopBtn"> elements are empty and rely on CSS #startStopBtn:before / .running:before to render “Start/Abort”, which does not provide an accessible name to assistive technologies. Screen readers will announce an unnamed button, and the control’s state (Start vs Abort) is not exposed via an accessible label across index-classic.html and all updated example pages.
Agent Prompt
## Issue description
`#startStopBtn` is now a real `<button>`, but it has no accessible name because the visible “Start/Abort” text is injected via CSS `:before`. Screen readers will announce an unnamed button and won’t know whether it starts or aborts the test.
## Issue Context
Across `index-classic.html` and the example pages, the label is currently implemented via:
- `#startStopBtn:before { content: "Start" }`
- `#startStopBtn.running:before { content: "Abort" }`
JavaScript toggles the `running` class but never updates any accessible label/state.
## Fix approach
Prefer one of these:
1) **Recommended:** Put real text in the button and update it from JS (and remove/ignore the CSS `:before` content), OR
2) Keep the CSS visual label but add and maintain **`aria-label`** (and optionally `aria-pressed`) in JS whenever `running` is toggled.
### Minimal change (works with existing CSS)
- In HTML, initialize:
- `aria-label="Start"` (and optionally `aria-pressed="false"`)
- In JS, whenever setting `className = "running"`:
- set `aria-label` to `"Abort"` (and `aria-pressed="true"`)
- Whenever clearing `className` (abort/end):
- set `aria-label` to `"Start"` (and `aria-pressed="false"`)
## Fix Focus Areas
- index-classic.html[132-167]
- index-classic.html[277-283]
- index-classic.html[494-496]
- examples/example-multipleServers-full.html[123-160]
- examples/example-multipleServers-full.html[407-408]
- examples/example-multipleServers-pretty.html[33-87]
- examples/example-multipleServers-pretty.html[210-210]
- examples/example-singleServer-customSettings.html[19-39]
- examples/example-singleServer-customSettings.html[156-156]
- examples/example-singleServer-gauges.html[55-76]
- examples/example-singleServer-gauges.html[228-228]
- examples/example-singleServer-modern.html[17-65]
- examples/example-singleServer-modern.html[193-193]
- examples/example-singleServer-pretty.html[20-36]
- examples/example-singleServer-pretty.html[159-160]
- examples/example-singleServer-progressBar.html[11-38]
- examples/example-singleServer-progressBar.html[178-178]ক্রান্ত
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The start/abort control was a
<div onclick="">, making it unreachable via keyboard (Tab) and invisible to screen readers.Changes
HTML: Replaced
<div id="startStopBtn" onclick="startStop()">with<button id="startStopBtn" onclick="startStop()">acrossindex-classic.htmland all affected example pages:example-singleServer-{pretty,modern,progressBar,customSettings,gauges}.htmlexample-multipleServers-{full,pretty}.htmlCSS: Added
padding: 0; font: inherit;to each#startStopBtnrule to neutralize default browser button styles and preserve existing appearance.