From fcfaa19374392e701c1dea4afdfefe311588b7cb Mon Sep 17 00:00:00 2001
From: scoobycoder <scoobycoder@gmail.com>
Date: Sun, 26 Apr 2026 19:47:37 +0000
Subject: [PATCH] fix: add type=button and aria attributes to sort button

The sort button was missing type='button' (which could cause unintended form
submissions), aria-label, and aria-pressed attributes. This fixes potential
page reloads and improves screen reader accessibility.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 app/main.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/main.js b/app/main.js
index fbed121..019ba17 100644
--- a/app/main.js
+++ b/app/main.js
@@ -156,14 +156,14 @@ function App() {
     );
   }
 
-  // BUG 6: Sort button has no accessible label and is missing type="button"
-  // In some browsers this causes the page to reload (treated as form submit)
-  // when the sort button is inside a form context. Also missing aria-pressed.
   function SortButton() {
     return (
-      <button // Missing: type="button", aria-pressed, aria-label
+      <button
+        type="button"
         className={`sort-btn ${sortAsc ? "active" : ""}`}
         onClick={() => setSortAsc(s => !s)}
+        aria-label={sortAsc ? "Sort by price descending" : "Sort by price ascending"}
+        aria-pressed={sortAsc}
       >
         Price {sortAsc ? "↑" : "↓"}
       </button>