Not properly processing lists

[GregJohnStewart]

I have the following list that forms some navigational elements:

<ul class="nav nav-tabs" id="mainTab" role="tablist">
	<li class="nav-item">
		<a class="nav-link active" id="loginSettingsTab" data-toggle="tab" href="#loginSettingsContent" role="tab" aria-controls="loginSettingsContent" aria-selected="true">
			<i class="fas fa-key fa-fw"></i> Login
		</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="accountDetailsTab" data-toggle="tab" href="#accountDetailsContent" role="tab" aria-controls="accountDetailsContent" aria-selected="false">
			<i class="fas fa-info fa-fw"></i> Account Details
		</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="notificationsTab" data-toggle="tab" href="#notificationsContent" role="tab" aria-controls="notificationsContent" aria-selected="false">
			<i class="far fa-bell fa-fw"></i> Notifications
		</a>
	</li>
</ul>

However, I get the following error messages:

Found 1 accessibility violations:
1) <li> elements must be contained in a <ul> or <ol>: https://dequeuniversity.com/rules/axe/3.1/listitem?application=axeAPI
  a) ["#mainTab > li:nth-child(1)"]
    Fix any of the following:
      List item does not have a <ul>, <ol> or role="list" parent element


  b) ["#mainTab > li:nth-child(2)"]
    Fix any of the following:
      List item does not have a <ul>, <ol> or role="list" parent element


  c) ["li:nth-child(3)"]
    Fix any of the following:
      List item does not have a <ul>, <ol> or role="list" parent element

I believe that my html is valid, and should not make this error.

[straker]

I believe the issue is since the ul has a role of tablist, each <li> child is being reported as missing the parent ul without a role. You'll need to add role=presentation to each of the <li>s in order for the structure to be correct.

[GregJohnStewart]

Unfortunately, that produces the following error:

2) ARIA role must be appropriate for the element: https://dequeuniversity.com/rules/axe/3.1/aria-allowed-role?application=axeAPI
  a) ["#loginSettingsTab"]
    Fix any of the following:
      role presentation  is not allowed for given element

[straker]

That's strange, I don't get that error when I have the structure:

<ul class="nav nav-tabs" id="mainTab" role="tablist">
	<li class="nav-item" role="presentation">
		<a class="nav-link active" id="loginSettingsTab" data-toggle="tab" href="#loginSettingsContent" role="tab" aria-controls="loginSettingsContent" aria-selected="true">
			<i class="fas fa-key fa-fw"></i> Login
		</a>
	</li>
	<li class="nav-item" role="presentation">
		<a class="nav-link" id="accountDetailsTab" data-toggle="tab" href="#accountDetailsContent" role="tab" aria-controls="accountDetailsContent" aria-selected="false">
			<i class="fas fa-info fa-fw"></i> Account Details
		</a>
	</li>
	<li class="nav-item" role="presentation">
		<a class="nav-link" id="notificationsTab" data-toggle="tab" href="#notificationsContent" role="tab" aria-controls="notificationsContent" aria-selected="false">
			<i class="far fa-bell fa-fw"></i> Notifications
		</a>
	</li>
</ul>

[GregJohnStewart]

Ahh I was being dumb, I just replaced the link's role, not giving the li one. Putting the role on the li fixed it, thanks for the points!