From 7356514f1269664d2cf09f74caa13b9446bef764 Mon Sep 17 00:00:00 2001
From: rozwader <maciek.rozwadowski2006@gmail.com>
Date: Wed, 1 Jul 2026 12:03:59 +0200
Subject: [PATCH] feat: added a11y to select component and few fix ups

---
 src/components/Select/Select.tsx      | 20 +++++++++++++++-----
 src/components/Select/SelectChild.tsx |  2 ++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 88a387f..45aa856 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -7,6 +7,7 @@ import React, {
   Children,
   cloneElement,
   isValidElement,
+  useCallback,
   useEffect,
   useRef,
   useState,
@@ -35,10 +36,10 @@ export const Select = ({
     );
   }, [value, children]);
 
-  const handleOptionClick = (optionValue: string) => {
+  const handleOptionClick = useCallback((optionValue: string) => {
     $onChange(optionValue);
     setIsOpen(false);
-  };
+  }, [$onChange]);
 
   const handleUnfocus = (event: PointerEvent) => {
     if (!parentComponentRef.current?.contains(event.target as Node)) {
@@ -47,7 +48,8 @@ export const Select = ({
   };
 
   useEffect(() => {
-    if (parentComponentRef.current === null) return;
+    if (parentComponentRef.current === null || !isOpen) return;
+    
     setTimeout(() => {
       document.addEventListener('click', handleUnfocus);
     }, 0);
@@ -69,7 +71,12 @@ export const Select = ({
         <SelectButtonLabelComponent>{$labelContent}</SelectButtonLabelComponent>
       )}
 
-      <SelectButtonComponent onClick={() => setIsOpen(!isOpen)}>
+      <SelectButtonComponent 
+        onClick={() => setIsOpen(!isOpen)}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        aria-controls="select-list"
+      >
         {displayValue}
         {isOpen ? (
           <KeyboardArrowUp style={{ marginLeft: '5px' }} />
@@ -78,7 +85,10 @@ export const Select = ({
         )}
       </SelectButtonComponent>
       {isOpen && (
-        <SelectListComponent>
+        <SelectListComponent
+          id="select-list"
+          role="listbox"
+        >
           {Children.map(children, (child) => {
             if (!isValidElement(child)) return child;
 
diff --git a/src/components/Select/SelectChild.tsx b/src/components/Select/SelectChild.tsx
index cdee80f..89f6066 100644
--- a/src/components/Select/SelectChild.tsx
+++ b/src/components/Select/SelectChild.tsx
@@ -17,6 +17,8 @@ export const SelectChild = ({
 
   return (
     <SelectChildWrapper
+      role="option"
+      aria-selected={$CURRENT_VALUE === value}
       onClick={handleClick}
       $isCurrentValue={$CURRENT_VALUE === value}
     >