Including an extra button in an accessible autocomplete listbox

114 Views Asked by At

I've implemented an autocomplete component in Angular using the aria-activedescendant attribute, so that the focus can remain in the for the filtering functionality to work.

I have a design to follow that looks like something along the lines of the next picture. I need to include a "special option" / button at the bottom that opens a modal. This is a challenge for me because I don't know which role this element should have, as it is not an actual option to be selected.

enter image description here

I haven't found any information about this yet, and I guess the design is quite custom. I've evaluated the following options, but I would like to avoid them if a better solution already exists:

  • Including it as another role="option" and a custom callback to be executed on "option selection".

  • Adding a custom key with a description.

0

There are 0 best solutions below