a11y: Move Focus to API Input Field When Agent Tool Selected

[kangabell]

Closes #5505

Summary

After clicking an "Add" button on a specific Agent Tool, the text input in the auth form receives focus.

Change Type

Please delete any irrelevant options.

• Bug fix (non-breaking change which fixes an issue)

Testing

Test Configuration:

• Browser: Chrome
• Screen Readers: VoiceOver
• Operating System: macOS Sequoia

Checklist

Please delete any irrelevant options.

• My code adheres to this project's style guidelines
• I have performed a self-review of my own code
• My changes do not introduce new warnings

[kangabell]

There might be a better way using ref instead of document.querySelector but this is what I got to work.

[danny-avila]

This solution is not ideal due to direct dom/element manipulation, I will look into making this work natively with the components. if i can't find a reasonable solution soon, I will merge this

[Copilot]

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

[Copilot]

Using a fixed timeout delay may lead to timing issues, making the input focus behavior unreliable on slower devices. Consider using a React ref or a useLayoutEffect hook to trigger focus after the input is rendered.

Suggested change

	setTimeout(() => {
	const authField = document.querySelector('.auth-field') as HTMLInputElement;
	if (authField) {
	authField.focus();
	}
	}, 100);
	const authFieldRef = useRef<HTMLInputElement>(null);
	useLayoutEffect(() => {
	if (authFieldRef.current) {
	authFieldRef.current.focus();
	}
	}, [authFieldRef.current]);
	const authField = document.querySelector('.auth-field') as HTMLInputElement;
	if (authField) {
	authFieldRef.current = authField;
	}

[kangabell]

@danny-avila What do you think of the Copilot response? It is still using document.querySelector so I'm guessing it is not sufficient.

There are a few other issues I want to work on related to managing focus, but first want to see where we land with this one so I can reuse the same method.