Update src/components/Shop/PointsDrawer.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Ash Srivastava <85481905+ashworks1706@users.noreply.github.com>

Author: ashworks1706

src/components/Shop/PointsDrawer.tsx

@@ -23,23 +23,22 @@ const PointsDrawer: React.FC = () => {
           onMouseEnter={openDrawer}
           onMouseLeave={closeDrawer}
         >
-          <div
+          <button
+            type="button"
             className="bg-blue-500/20 backdrop-blur-md text-white w-4 sm:w-5 px-0.5 py-3 border border-white/15 shadow-lg shadow-blue-500/10 text-[10px] font-semibold tracking-[0.25em] uppercase h-[23vh] flex items-center justify-between cursor-pointer select-none"
             style={{ writingMode: "vertical-rl" }}
-            role="button"
-            tabIndex={0}
             onClick={toggleOpen}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                toggleOpen();
-              }
-            }}
+            onFocus={openDrawer}
+            aria-expanded={isOpen}
+            aria-controls="points-breakdown-desktop-panel"
           >
             <ArrowLeft size={20} color="grey" /> Points Breakdown{" "}
             <ArrowLeft size={20} color="grey" />
-          </div>
-          <div className="w-[340px] max-h-[80vh] overflow-y-auto border border-white/10 rounded-l-none rounded-r-xl">
+          </button>
+          <div
+            id="points-breakdown-desktop-panel"
+            className="w-[340px] max-h-[80vh] overflow-y-auto border border-white/10 rounded-l-none rounded-r-xl"
+          >
             <PointsBreakdownTable />
           </div>
         </div>