Skip to content

Commit c187e4e

Browse files
authored
Merge pull request onesine#41 from mnik01/master
feat: a11n added to options. TAB navigation through options
2 parents 93ca9fc + da9d85d commit c187e4e

File tree

2 files changed

+8
-2
lines changed

2 files changed

+8
-2
lines changed

src/components/Item.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,12 @@ const Item: React.FC<ItemProps> = ({ item, primaryColor }) => {
6363
<DisabledItem>{item.label}</DisabledItem>
6464
) : (
6565
<li
66+
tabIndex={0}
67+
onKeyDown={(e: React.KeyboardEvent<HTMLLIElement>) => {
68+
if (e.key === ' ' || e.key === 'Enter') {
69+
handleValueChange(item)
70+
}
71+
}}
6672
aria-selected={isSelected}
6773
role={"option"}
6874
onClick={() => handleValueChange(item)}

src/components/Select.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,6 @@ const Select: React.FC<SelectProps> = ({
178178
>
179179
<div className="relative w-full" ref={ref}>
180180
<div
181-
tabIndex={0}
182181
aria-expanded={open}
183182
onKeyDown={onPressEnterOrSpace}
184183
onClick={toggle}
@@ -207,6 +206,8 @@ const Select: React.FC<SelectProps> = ({
207206
</p>
208207
{!isDisabled && (
209208
<div
209+
role="button"
210+
tabIndex={0}
210211
onClick={e => removeItem(e, item)}
211212
className={
212213
classNames?.tagItemIconContainer
@@ -264,7 +265,6 @@ const Select: React.FC<SelectProps> = ({
264265

265266
{open && !isDisabled && (
266267
<div
267-
tabIndex={-1}
268268
className={
269269
classNames?.menu
270270
? classNames.menu

0 commit comments

Comments
 (0)