How to set aria-activedescendant attribute value

[ian-leggett]

Hey,

I am trying to set a value for a aria-activedescendant attribute to enhance the accessibility. This is my thought process so far:

1. When I click or select an option I need to get the id attribute of the element clicked
2. Store this id in state
3. Pass the state (id) to the input so the attribute aria-activedescendant has the value id
4. Please take a look at this screen shot, this is what I want to achieve (this is a screenshot of a correct example I found)

This sounds simple but when I add an onClick handler to the list item it returns the child div. Its like its bubbling but I can't stop it. If only I could get the e.target of the list item I can achieve the above.

Any ideas? Is there an easier way to achieve this?

TIA

[ian-leggett]

My solution so far is to get the event.currentTarget.getAttribute('id')) value and pass that into a useState hook. This then allows the selected elements attributes such as the id to be passed around as props. Maybe there is a better way but I think this will do for now :-)