fix: improve accessibility and standards compliance in simple-timer

- Add missing <!DOCTYPE html> declaration
- Add lang="en" attribute to <html> tag for screen readers
- Add aria-label attributes to icon-only buttons (reset/play)
- Fix typo in comment: "cirlce" -> "circle"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
pull/275/head
Peter 6 months ago
parent c92b0bc3a8
commit 675180e746

@ -1,4 +1,5 @@
<html> <!DOCTYPE html>
<html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -26,7 +27,7 @@
> >
<p id="timer" class="text-blue-200 relative text-5xl z-10">00:00</p> <p id="timer" class="text-blue-200 relative text-5xl z-10">00:00</p>
<!-- Create the inner cirlce and line --> <!-- Create the inner circle and line -->
<div <div
class="w-[calc(100%-4px)] aspect-square bg-gray-800 rounded-full absolute inset-[2px]" class="w-[calc(100%-4px)] aspect-square bg-gray-800 rounded-full absolute inset-[2px]"
></div> ></div>
@ -41,6 +42,7 @@
<div class="flex justify-center gap-6"> <div class="flex justify-center gap-6">
<button <button
id="reset" id="reset"
aria-label="Reset timer"
class="flex justify-center items-center w-10 h-10 bg-blue-300 rounded-full" class="flex justify-center items-center w-10 h-10 bg-blue-300 rounded-full"
> >
<i class="fas fa-refresh"></i> <i class="fas fa-refresh"></i>
@ -48,6 +50,7 @@
<button <button
id="play" id="play"
aria-label="Play or pause timer"
class="flex justify-center items-center w-10 h-10 bg-blue-300 rounded-full group" class="flex justify-center items-center w-10 h-10 bg-blue-300 rounded-full group"
> >
<i class="fas fa-play"></i> <i class="fas fa-play"></i>

Loading…
Cancel
Save