HTML - relationship between <a> vs <i> - html

Question

My goal is to come up with a dropdown menu:
$(document).on('click', '.dropdown', function() {
var is_visible = $(this).find('.dropdown-content').is(":visible");
$('.dropdown-content').toggle(false);
if (is_visible == false){
$(this).find('.dropdown-content').toggle(true);
}
});
.dropdown {
position: relative;
display: inline-block;
cursor: pointer;
}
div.dropdown-content {
display: none;
white-space: nowrap;
position: absolute;
padding: 12px 16px;
z-index: 1;
margin-top: 15px;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class='dropdown'>
<i class="fa fa-ellipsis-h fa-lg" aria-hidden="true"></i>
<div class="dropdown-content">
<div><i class="fa fa-share-alt" aria-hidden="true"></i> Share</div>
<div><i class="fa fa-trash-o fa-fw"></i> Delete</div>
</div>
</div>
The question is, what is the semantic role of <a> tag in the dropdown-content item definition (provided I don't use its href attribute and use JavaScript to handle the click event)?
In other words: if I want to have a clickable icon, in which cases should I surround it with an <a> tag?

Answer 1

if I want to have a clickable icon, in which cases should I surround it with <a> tag?
The only case where you should wrap anything with an <a> tag is if it's a link, or a placeholder for where a link could be.
Otherwise, if you want to make something clickable, the appropriate element is <button type="button">.
The one exception to that is if you need to wrap anything that's not phrasing content, in which case I recommend using <div role="button" tabindex="0> with a keydown handler to trigger click events on Enter, and Space.
Additional notes about accessibility for icons, and icon fonts in general: If a network request fails and the icon font fails to load, your sighted users will find themselves in the same situation as your non-sighted users, where it's unclear as to what the button should do.
Generally speaking it's better to pair icons with textual labels, but if that's not possible, consider using an <img> element with [alt] text instead of the icon.
If that's not possible, at least add an [aria-label] attribute.