File tree Expand file tree Collapse file tree 2 files changed +9
-8
lines changed Expand file tree Collapse file tree 2 files changed +9
-8
lines changed Original file line number Diff line number Diff line change @@ -152,10 +152,10 @@ const LanguageSelector = () => {
152
152
153
153
useEffect ( ( ) => {
154
154
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 ( ) ;
159
159
}
160
160
} , [ isOpen , focusedIndex ] ) ;
161
161
@@ -190,7 +190,7 @@ const LanguageSelector = () => {
190
190
className = { `selector__dropdown ${ isOpen ? "" : " hidden" } ` }
191
191
role = "listbox"
192
192
onKeyDown = { handleKeyDown }
193
- tabIndex = { - 1 }
193
+ tabIndex = { 0 }
194
194
>
195
195
{ fetchedLanguages . map ( ( lang , index ) =>
196
196
lang . subLanguages . length > 0 ? (
@@ -206,7 +206,7 @@ const LanguageSelector = () => {
206
206
< li
207
207
key = { lang . name }
208
208
role = "option"
209
- tabIndex = { - 1 }
209
+ tabIndex = { 0 }
210
210
onClick = { ( ) => handleSelect ( lang ) }
211
211
className = { `selector__item ${
212
212
language . name === lang . name ? "selected" : ""
Original file line number Diff line number Diff line change @@ -47,7 +47,7 @@ const SubLanguageSelector = ({
47
47
< >
48
48
< li
49
49
role = "option"
50
- tabIndex = { - 1 }
50
+ tabIndex = { 0 }
51
51
className = { `selector__item ${
52
52
subLanguage === defaultSlugifiedSubLanguageName &&
53
53
language . name === parentLanguage . name
@@ -82,7 +82,8 @@ const SubLanguageSelector = ({
82
82
< li
83
83
key = { sl . name }
84
84
role = "option"
85
- tabIndex = { - 1 }
85
+ tabIndex = { opened ? 0 : - 1 }
86
+ aria-disabled = { ! opened }
86
87
className = { `selector__item sublanguage__item ${ opened ? "" : "hidden" } ${
87
88
slugify ( subLanguage ) === slugify ( sl . name ) ? "selected" : ""
88
89
} `}
You can’t perform that action at this time.
0 commit comments