How to label custom list dropdown in a form - html

Question

I'm currently in the process of developing a website that has to match AA accessibility standards. I have a custom-built dropdown being a part of a form and can't figure out how to label it for screen-readers. Sadly I can't use a native select dropdown (despite being accessible, the website is rather design heavy and it was the best way to apply custom styling to this), so can't use a regular label tag. So far I've used the below, but I believe that it's not the correct approach.
<form>
(...) other inputs
<ul class="dropdown" role="listbox" aria-labelledby="location" aria-multiselectable="false" aria-expanded="false" tabindex="0">
<li class="first" aria-labelledby="location">
<span>Location</span>
</li>
<li tabindex="-1" role="option" aria-selected="false">Location1</li>
<li tabindex="-1" role="option" aria-selected="false">Location2</li>
<li tabindex="-1" role="option" aria-selected="false">Location3</li>
</ul>
</form>
Just to describe the behaviour - this is a regular dropdown with only li.first visible initially (on click/enter all the fields become visible and the value can be chosen). Once an option is picked, aria-selected is set to true and the value is replacing the Location text in span.
Could anyone suggest a better solution for this? My biggest concern at the moment is possibly the incorrect usage of aria-labelledby, but I don't know what should be the right option.
Thanks,
E.
Edit: JS + jQuery
$('.dropdown').on('click', function () {
$(this).toggleClass('opened');
if ($(this).attr('aria-expanded') === 'false') {
$(this).attr('aria-expanded', 'true');
} else {
$(this).attr('aria-expanded', 'false');
}
})
$('.dropdown li').on('click', function () {
if (!$(this).hasClass('first')) {
var text_drop = $(this).html();
$(this).parent().find('span').html(text_drop);
$(this).parent().children().not('.first').attr('aria-selected', 'false')
$(this).attr('aria-selected', true);
$('.dropdown').animate({scrollTop: 0}, 200);
}
});

Answer 1

The aria-labelledby should refer to the id of an existing element. You have a problem with your label being inside the object itself. Something like the following would make more sense.
<form>
(...) other inputs
<div id="location" aria-expanded="false" aria-owns="listchoices">Location</div>
<ul class="dropdown" role="listbox" aria-labelledby="location"
aria-multiselectable="false" tabindex="0">
<li tabindex="-1" role="option" aria-selected="false">Location1</li>
<li tabindex="-1" role="option" aria-selected="false">Location2</li>
<li tabindex="-1" role="option" aria-selected="false">Location3</li>
</ul>
</form>
Without the javascript part, I can't give you more help