Fix inappropriately nested list elements rendered within GlDropdown
Our current implementation of GlDropdown
produces semantically incorrect markup through its use of nested div
s used to created headers, footers, and scrollable sections.
When these were implemented, the fact that BDropdown
was rendering ul
and li
elements under the hood went unnoticed and the resulting markup now looks something like:
<ul>
<div>
<div>
<li>...</li>
<li>...</li>
</div>
<div>
<li>...</li>
<li>...</li>
</div>
</div>
</ul>
We can fix this in a number of ways:
-
utilizing
li
for these section wrappers rather thandiv
and then nesting a newul
inside it. -
re-implementing these features (sticky headers/footers and scrollable middle section) using
position:sticky
instead -
re-write the semantics of these elements to no longer use
ul
andli
(since we are forking BDropdown anyway - see #1546 (closed))