You write the list and the CSS.
@angular/aria writes the keyboard and the ARIA.
<ul ngListbox> · <li ngOption>
Dohatabindex="-1"
Dubaitabindex="0"
Manamatabindex="-1"
Muscattabindex="-1"
Riyadhtabindex="-1"
WHAT THE TWO DIRECTIVES WROTE
| role | listbox on the list, option per row |
| aria-selected | true on Dubai, false on the rest |
| tabindex | 0 follows the active row |
| typing a letter | jumps to a matching row |
ONE CATCH
the directive binds keydown on that same list. A keydown handler of your own
either fights it or stops firing. Delete yours when you adopt this.