Improve the semantics of the disclosure content wrapper when it has custom content
The following discussion from gitlab!110683 (merged) should be addressed:
-
@sdejonge started a discussion: (+2 comments) question: Can we remove this
<div role="group">
? I think the<slot>
inside<gl-disclosure-dropdown>
should already get an associated role from the computed<ul>
or<div role="group">
.The HTML output has
<div>
children of<ul>
which is invalid.<ul id="disclosure-6" aria-labelledby="dropdown-toggle-btn-2" data-testid="disclosure-content" tabindex="-1" class="gl-new-dropdown-contents"> <div> <ul role="group" class="gl-mb-0 gl-pl-0 gl-list-style-none">...</ul> </div> <div class="gl-border-t gl-pt-2 gl-mt-2"> <ul role="group" class="gl-mb-0 gl-pl-0 gl-list-style-none">...</ul> </div> <div class="gl-border-t gl-pt-2 gl-mt-2"> <ul role="group" class="gl-mb-0 gl-pl-0 gl-list-style-none">...</ul> </div> </ul>
The
isAllGroups
util to set the parent as<div role="group">
checks theitems
but not the<slot>
contents as in this case.question: would it be silly to make the root element of
<gl-disclosure-dropdown-group>
a<li>
and always render the slot contents of<gl-disclosure-dropdown>
in a<ul>
? Or is there a better way to set the parent as<div role="group">
when the<slot>
content only contains<gl-disclosure-dropdown-group>
?