feat: a11n added to options. TAB navigation through options

onesine · Apr 10, 2023 · da9d85d · da9d85d
1 parent 93ca9fc
commit da9d85d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git 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
@@ -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