diff options
| author | Jim Bledsoe <jim@acceleration.net> | 2025-02-03 16:26:56 -0500 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2025-02-04 13:01:47 +0100 |
| commit | 4c9b5821549530299ebd7511d59c4d037ece31b9 (patch) | |
| tree | 4f5ae3b4bc90881d067469d377645b4dc7fbd7ef | |
| parent | 72fa3b6f0d5face4df7a82618f87693480dd8851 (diff) | |
Accessibility changes - All aria labels and more contrast on buttons
| -rw-r--r-- | app/page.tsx | 6 |
1 files changed, 4 insertions, 2 deletions
diff --git a/app/page.tsx b/app/page.tsx index 0a79c03..7ee9fd5 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -167,6 +167,7 @@ export default function Cidr() { onPaste={handlePaste} className={`w-20 h-20 text-3xl text-center rounded-md ${cols[i]}`} maxLength={3} + aria-label={`Octet ${i + 1}`} /> <span className="text-5xl pl-4" key={`sep-${i}`}>{i == 3 ? "/" : "."}</span> </div> @@ -181,6 +182,7 @@ export default function Cidr() { onPaste={handlePaste} className={`w-20 h-20 text-3xl text-center rounded-md ${cols[4]}`} maxLength={2} + aria-label={`Network bits`} /> </div> @@ -203,7 +205,7 @@ export default function Cidr() { <div className="mx-2"> <button onClick={handleCopy} - className="flex items-center gap-2 px-4 py-2 text-sm text-gray-100 bg-blue-500 rounded-md hover:bg-blue-600" + className="flex items-center gap-2 px-4 py-2 text-sm text-gray-100 bg-blue-600 rounded-md hover:bg-blue-700" > {isCopied ? "Copied!" : "Copy CIDR"} </button> @@ -211,7 +213,7 @@ export default function Cidr() { <div className="mx-2"> <button onClick={handleShare} - className="flex items-center gap-2 px-4 py-2 text-sm text-gray-100 bg-blue-500 rounded-md hover:bg-blue-600" + className="flex items-center gap-2 px-4 py-2 text-sm text-gray-100 bg-blue-600 rounded-md hover:bg-blue-700" > {isShared ? "Copied!" : "Copy Share Link"} </button> |