Skip to content

Commit 9a892b4

Browse files
committed
Fixed keyboard navigation bug
1 parent 577dba5 commit 9a892b4

File tree

2 files changed

+9
-8
lines changed

2 files changed

+9
-8
lines changed

src/components/LanguageSelector.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -152,10 +152,10 @@ const LanguageSelector = () => {
152152

153153
useEffect(() => {
154154
if (isOpen && focusedIndex >= 0) {
155-
const element = document.querySelector(
156-
`.selector__item:nth-child(${focusedIndex + 1})`
157-
) as HTMLElement;
158-
element?.focus();
155+
const elements = Array.from(document.querySelectorAll('.selector__item')) as HTMLElement[];
156+
const focusableElements = elements.filter(el => el.getAttribute('tabIndex') !== '-1');
157+
const element = focusableElements[focusedIndex];
158+
element?.focus();
159159
}
160160
}, [isOpen, focusedIndex]);
161161

@@ -190,7 +190,7 @@ const LanguageSelector = () => {
190190
className={`selector__dropdown ${isOpen ? "" : " hidden"}`}
191191
role="listbox"
192192
onKeyDown={handleKeyDown}
193-
tabIndex={-1}
193+
tabIndex={0}
194194
>
195195
{fetchedLanguages.map((lang, index) =>
196196
lang.subLanguages.length > 0 ? (
@@ -206,7 +206,7 @@ const LanguageSelector = () => {
206206
<li
207207
key={lang.name}
208208
role="option"
209-
tabIndex={-1}
209+
tabIndex={0}
210210
onClick={() => handleSelect(lang)}
211211
className={`selector__item ${
212212
language.name === lang.name ? "selected" : ""

src/components/SubLanguageSelector.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const SubLanguageSelector = ({
4747
<>
4848
<li
4949
role="option"
50-
tabIndex={-1}
50+
tabIndex={0}
5151
className={`selector__item ${
5252
subLanguage === defaultSlugifiedSubLanguageName &&
5353
language.name === parentLanguage.name
@@ -82,7 +82,8 @@ const SubLanguageSelector = ({
8282
<li
8383
key={sl.name}
8484
role="option"
85-
tabIndex={-1}
85+
tabIndex={opened ? 0 : -1}
86+
aria-disabled={!opened}
8687
className={`selector__item sublanguage__item ${opened ? "" : "hidden"} ${
8788
slugify(subLanguage) === slugify(sl.name) ? "selected" : ""
8889
}`}

0 commit comments

Comments
 (0)