Focus a default button instead of a close button in dialogs

[iliana]

This is after hitting the instance menu -> Delete; the focus is around the close button but it would make more sense to focus a default button.

This is a particularly useful example where the default focus should absolutely not be the dangerous red "Confirm" button.

[david-crespo]

Thanks. The analogous issue for the side modal is #440, which we fixed in #930 by deleting the X button (lol), which automatically made the focus go to the thing we wanted. We may be able to do the same thing here.

[benjaminleonard]

I actually re introduced the close button on the pane, and have it absolutely positioned that way it isn’t the first interactive element. A potential solution here too

[zephraph]

Yeah, we can change the initially focused element so it shouldn't be a problem.

Going back to our previous solution, the easiest thing is just to remove it. I'll play with it a little bit though, I have some ideas.

[benjaminleonard]

Here's the solution for the pane:

console/libs/ui/lib/side-modal/SideModal.tsx

Lines 185 to 194 in 7638530

	{/*
	Close button is here at the end so we aren't automatically focusing on it
	when the side modal is opened. Positioned in the safe area at the top
	*/}
	<Dialog.Close
	className="absolute right-[var(--content-gutter)] top-10 -m-2 flex rounded p-2 hover:bg-hover"
	aria-label="Close"
	>
	<Close12Icon className="text-secondary" />
	</Dialog.Close>