Keyboard navigation allows opening Filter, Sort and Group dropdowns simultaneously

[sharath-1517]

Note

This issue is blocked by general accessibility improvements to the dropdowns, including:

• Improve focus behavior for modals and dropdowns #1886

Description

On the schemas page, when I tried to navigate the filters through the keyboard using the Tab button I noticed an unusual behavior of all three (Filters, Group, Sort) opening at the same time when I pressed enter key to open the focussed filter. I have attached a screenshot of this behavior. This is completely based on my opinion.

Expected behavior

Only one of the three (Filters, Group, Sort) should open at a time.

To Reproduce

The example in this link can be tried in the popup component.

Environment

• OS: (eg. macOS 15.1)
• Browser: (eg. Chrome)
• Browser Version: (eg. 131.0.6778.109)

Additional context

[zackkrida]

It seems that the underlying AttachableDropdown component uses a clickOffBounds action to close the dropdown when clicking outside of it (confirmed in the code below):

mathesar/mathesar_ui/src/component-library/dropdown/AttachableDropdown.svelte

Lines 130 to 133 in f157aed

	use:clickOffBounds={{
	callback: close,
	references: clickOffBoundsReferences,
	}}

However, this action does not handle focus-based events.

A broader issue with dropdowns and keyboard navigation needs to be addressed first. Specifically, when a dropdown is triggered, focus should move to the first focusable child within the dropdown.

Once that is in place, we can add logic to close the dropdown when focus shifts outside of it.

@seancolsen or @pavish can likely confirm or clarify further. Once someone has confirmed my suspicions, I'll go ahead and create any necessary follow-up issues.

Thanks for reporting this @sharath-1517!

[seancolsen]

Similar: #1886

[sharath-1517]

@zackkrida I am happy to contribute in any way I can to mathesar. It's my pleasure.

[seancolsen]

@zackkrida

@seancolsen or @pavish can likely confirm or clarify further. Once someone has confirmed my suspicions, I'll go ahead and create any necessary follow-up issues.

Yes, I agree with your assessment here. Focus the first focusable element within the dropdown. Then don't allow focusing outside of it. We should do the same for modals.

[zackkrida]

I've updated this issue to be blocked by #1886 and added more detail to that issue.