Feature: submit new repo with shortcut

[NsdHSO]

Type of feature

🍕 Feature

Current behavior

If you want to submit a new repository for suggestions, you can't use shortcuts like cmd+enter/enter or escape to close the popup window

Suggested solution

Here is an example

hot/src/components/Hero.tsx

Lines 17 to 44 in ecebb1e

	const handleCmdK = async (e: KeyboardEvent) => {
	if (!hasFocus) {
	searchBoxRef.current?.focus();
	setFocus(true);
	const results = await fetchRecommendations("stars", 3, null, searchTerm);
	setFetchedData(results);
	} else {
	searchBoxRef.current?.blur();
	setFocus(false);
	}
	// prevent browser from handling CMD/CTRL + K
	e.preventDefault();
	};
	const useKey = (superKey: string, key: string, target: MutableRefObject<Document>) => {
	useKeys([superKey, key], handleCmdK, { target });
	};
	useKey("ControlLeft", "KeyK", containerRef);
	useKey("ControlRight", "KeyK", containerRef);
	useKey("MetaRight", "KeyK", containerRef);
	useKey("MetaLeft", "KeyK", containerRef);

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[takanome-dev]

I saw that we have headlessui/react. I think it can handle that (accessibility included) and even for the hero search we can use headlessui combobox

[NsdHSO]

For the moment in this component we don't use headlessui combobox we use native input. I think if you want can you open a new issue, to see what the other colleagues say

[0-vortex]

I saw that we have headlessui/react. I think it can handle that (accessibility included) and even for the hero search we can use headlessui combobox

We do, we can also leverage radix components

For the moment in this component we don't use headlessui combobox we use native input. I think if you want can you open a new issue, to see what the other colleagues say

It does not make sense to complicate the current solution with keyboard accessibility when the baseline itself is not very accessible. I would agree the keyboard shortcut would be nice to have on top of an already accessible dropdown menu that displays some more information while typing and potential errors inline.

IMHO the UI components we have installed already could take care of a11y and enable this issue to be done, but it should at least mention improving the baseline! 🍕

[takanome-dev]

We do, we can also leverage radix components

Oh, didn't know about radix, it looks great 💯

IMHO the UI components we have installed already could take care of a11y and enable this issue to be done, but it should at least mention improving the baseline! pizza

Yeah using radix react dropdown will fix this issue 🍕

[Emmauel98]

How can I contribute to this?

[bdougie]

How can I contribute to this?

Do you have any suggestions or approach based on the existing conversation?