matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Nicolium: language dropdown keyboard handling

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-02-21 15:03:34 +01:00
parent 5489a54685
commit a2ee7fbc37
2 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
View File

@ -73,7 +73,11 @@ const DropdownMenuContent: React.FC<IDropdownMenuContent> = ({
() => (e: KeyboardEvent) => {
if (!ref.current) return;
const elements = Array.from(ref.current.querySelectorAll('a, button'));
const elements = Array.from(
ref.current.querySelectorAll<HTMLElement>(
'a, button:not([disabled]), input:not([disabled])',
),
).filter((element) => !element.hasAttribute('aria-hidden'));
const index = elements.indexOf(document.activeElement as any);
let element = null;
@ -119,7 +123,7 @@ const DropdownMenuContent: React.FC<IDropdownMenuContent> = ({
}
if (element) {
(element as HTMLAnchorElement).focus();
(element as HTMLElement).focus();
e.preventDefault();
e.stopPropagation();
}

12
packages/pl-fe/src/features/compose/components/language-dropdown.tsx
View File

@ -61,7 +61,7 @@ const getLanguageDropdown =
);
const node = useRef<HTMLDivElement>(null);
const focusedItem = useRef<HTMLButtonElement>(null);
const input = useRef<HTMLInputElement>(null);
const [searchValue, setSearchValue] = useState('');
@ -156,9 +156,13 @@ const getLanguageDropdown =
handleMenuClose();
};
useEffect(() => {
if (!language) input.current?.focus();
}, [input.current]);
useEffect(() => {
if (node.current) {
(node.current?.querySelector('div[aria-selected=true]') as HTMLDivElement)?.focus();
(node.current?.querySelector('button[aria-selected=true]') as HTMLButtonElement)?.focus();
}
}, [node.current]);
@ -173,6 +177,7 @@ const getLanguageDropdown =
<span>{intl.formatMessage(messages.search)}</span>
<Input
ref={input}
className='w-64'
type='text'
value={searchValue}
@ -199,7 +204,7 @@ const getLanguageDropdown =
/>
</button>
</label>
<div className='⁂-language-dropdown__options' ref={node} tabIndex={-1}>
<div className='⁂-language-dropdown__options' tabIndex={-1} ref={node} role='listbox'>
{results.map(([code, name]) => {
const active = code === language;
const modified = code === modifiedLanguage;
@ -218,7 +223,6 @@ const getLanguageDropdown =
'⁂-language-dropdown__option--active': active,
})}
aria-selected={active}
ref={active ? focusedItem : null}
>
<div className='⁂-language-dropdown__option__name'>{name}</div>
{features.multiLanguage &&