Improvements to keyboard-only dialog naivgation

[jemand771]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

This issue consists of three sub-issues that are all somewhat related and build on top of each other.

Current behavior

• the ngneat-close-dialog div currently doesn't have a tabindex attribute, making it "untabbable" to
• even when manually giving the div tabindex="0", it doesn't react to space or enter presses, just clicks
• while a dialog is opened, I can still tab into the background, behind the backdrop

Expected behavior

• add a tabindex, I used a value of 0 to not fumble with the order. this should maybe be customizable
• add corresponding listeners to common "confirm-keys" (I can only think of enter and spacebar rn) to the close icon div
• ideally, I should only be able to tab around the dialog's elements
  • I imagine tihs to be somewhat tricky, in other words, no clue how to approach this

Minimal reproduction of the problem with instructions

• go to https://ngneat.github.io/dialog/
• press the very first open button (from ng-template)
• press tab a bunch of times
  • this will send you through the elements behind the dialog top to bottom
  • afterwards, it'll focus the dialog's close button (the <button> at the bottom, not the cross in the top right!)
  • finally (end of dom), you'll tab somewhere into your browser's window controls until it wraps back around to the start of the page

What is the motivation / use case for changing the behavior?

Better accessibility for people without a mouse, faster controls for power users

Environment

Angular version: 16.0.5


Browser:
- [x] Chrome (desktop) version 114.0.5735.110
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version 102.12.0esr (64-bit)
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [x] Edge version 114.0.1823.43
 
For Tooling issues: N/A

Others:

I'm happy to contribute code and could probably figure out the first two points, just not the third one.
Since I feel like these three are best addressed together, I haven't actually written anything.

[NetanelBasal]

You're welcome to create a PR