From da9d85deec794a9bd47071314a8d62e3af88cb67 Mon Sep 17 00:00:00 2001
From: Maxim <39025497+mnik01@users.noreply.github.com>
Date: Mon, 10 Apr 2023 11:12:36 +0000
Subject: [PATCH] feat: a11n added to options. TAB navigation through options

---
 src/components/Item.tsx   | 6 ++++++
 src/components/Select.tsx | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Item.tsx b/src/components/Item.tsx
index 7f4273f..a27feb3 100755
--- a/src/components/Item.tsx
+++ b/src/components/Item.tsx
@@ -63,6 +63,12 @@ const Item: React.FC<ItemProps> = ({ item, primaryColor }) => {
                         <DisabledItem>{item.label}</DisabledItem>
                     ) : (
                         <li
+                            tabIndex={0}
+                            onKeyDown={(e: React.KeyboardEvent<HTMLLIElement>) => {
+                                if (e.key === ' ' || e.key === 'Enter') {
+                                    handleValueChange(item)
+                                }
+                            }}
                             aria-selected={isSelected}
                             role={"option"}
                             onClick={() => handleValueChange(item)}
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 1ef9f81..ceef277 100755
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -178,7 +178,6 @@ const Select: React.FC<SelectProps> = ({
         >
             <div className="relative w-full" ref={ref}>
                 <div
-                    tabIndex={0}
                     aria-expanded={open}
                     onKeyDown={onPressEnterOrSpace}
                     onClick={toggle}
@@ -207,6 +206,8 @@ const Select: React.FC<SelectProps> = ({
                                             </p>
                                             {!isDisabled && (
                                                 <div
+                                                    role="button"
+                                                    tabIndex={0}
                                                     onClick={e => removeItem(e, item)}
                                                     className={
                                                         classNames?.tagItemIconContainer
@@ -264,7 +265,6 @@ const Select: React.FC<SelectProps> = ({
 
                 {open && !isDisabled && (
                     <div
-                        tabIndex={-1}
                         className={
                             classNames?.menu
                                 ? classNames.menu