fix: Make create form keyboard accessible COMPASS-9335

[paula-stacho]

Description

Changes:

• form steps can be submitted by enter
• improved tab navigation
• refactored SelectTable to SelectList. the table wasn't very accessible and there were no usages where we actually had more than one column (it is only used here and in connections import/export). so there was no reason for it to be a table instead of a list of classic checkboxes with labels.

Checklist

• New tests and/or benchmarks are included
• Documentation is changed or added
• If this change updates the UI, screenshots/videos are added and a design review is requested
• I have signed the MongoDB Contributor License Agreement (https://www.mongodb.com/legal/contributor-agreement)

Motivation and Context

• Bugfix
• New feature
• Dependency update
• Misc

Open Questions

Dependents

Types of changes

• Backport Needed
• Patch (non-breaking change which fixes an issue)
• Minor (non-breaking change which adds functionality)
• Major (fix or feature that would cause existing functionality to change)

[Anemy]

This should reference another element that labels this checkbox right? Should we go back to the aria-label?

[paula-stacho]

Ah! I tried to only include aria-label before but turns out it wasn't recognized and the labelledby was still required because the type of item[label[0]] isn't clear. this made me realise that actually it sometimes (in case of import) isn't a string but an element, so it makes sense to take a separate key for aria-label.
Unfortunately it's still not clear for TS - hence the typecasting as string. I did make an attempt to type it so that:
a) either item[label.displayLabelKey] is a string
b) orlabel.ariaLabelKey is required and item[label.ariaLabelKey] is a string.
But I couldn't get it working and it was getting overly complicated 🙈

[Anemy]

Looks good, one css usage we should move to a const at the top.