[A11Y] Nested dropdown in datagrid cell - inaccessible with keyboard only

[WhiteLord]

Describe the bug

A dropdown in a datagrid cell is inaccessible by keyboard navigation.
Also, if a datagrid is placed in a modal, and if the dropdown content is bigger that the datagrid height (modal height), the content of the dropdown gets cut off.

How to reproduce

The bug is reproduced by creating a datagrid with a single or more than one column.
One of the clr-dg-cells should contain a dropdown: https://clarity.design/documentation/dropdowns
We cannot access the dropdown content via keyboard alone.

Steps to reproduce the behavior:

Stackblitz: https://stackblitz.com/edit/clr-angular-13-vpat-2937-4e5pcr?file=src%2Fapp%2Fapp.component.html
Open the modal, check the datagrid. Try to navigate to one of the resources in the dropdown with keyboard alone.

Expected behavior

The user should be able to navigate to any items of the dropdown with no issues.

Versions

Clarity version:

• [ x] v13.x
• v15.x
• Other:

Framework version:
Angular 13

Device:

• Type: Macbook
• OS: iOS
• Browser Chrome
• Version v.109

Additional notes

Add any other notes about the problem here.

[Jinnie]

Similar problem as form inputs inside datagrid. But this time it's about dropdown. Which is not exactly the "change record" scenario we have with the forms, but running a context action.
We'll need some input from A11Y team here. An "editable dropdown" sounds quite confusing.

CC: @AmyLiNow

[kevinbuhmann]

Related issue: #473.