[buddypress-trac] [BuddyPress Trac] #7749: BP Nouveau: Group Activity UL element cannot be a direct descendant of a UL element.

[buddypress-trac]

#7749: BP Nouveau: Group Activity UL element cannot be a direct descendant of a UL
element.
-----------------------------+---------------------
 Reporter:  mercime          |       Owner:  hnla
     Type:  defect (bug)     |      Status:  closed
 Priority:  high             |   Milestone:  3.0
Component:  Templates        |     Version:
 Severity:  major            |  Resolution:  fixed
 Keywords:  has-screenshots  |
-----------------------------+---------------------
Description changed by netweb:

Old description:

> Direct descendants of `<ul>` and `<ol>` can only be `<li>`, `<script>`,
> or `<template>` elements.
>
> See:
> [https://www.w3.org/TR/html5/grouping-content.html#the-ul-element W3C
> HTML5 specs]
> [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul MDN UL
> Permitted Content]
> [https://dequeuniversity.com/rules/axe/2.2/list?application=lighthouse
> Specific to rendered markup below from Deque]
>
> Rendered markup for a group's activity:
>
> {{{
> <div class="activity single-group">
>         <ul id="activity-stream" class="activity-list item-list bp-list"
> data-bp-list="activity" style="display: block;">
>                 <ul class="activity-list item-list bp-list">
>                         <li class="groups joined_group activity-item mini
> date-recorded-1523723973" id="activity-538" data-bp-activity-id="538">
>                         // etc., etc., etc.
>                         </li>
>                 </ul>
>         </ul>
> </div>
> }}}
>

> Note also that both `UL`s above have the same `class="activity-list item-
> list bp-list"` which causes double padding in the group's activity stream
> as seen below.
>
> [[Image(https://cldup.com/eGHUMWugfJ.png)]]

New description:

 Direct descendants of `<ul>` and `<ol>` can only be `<li>`, `<script>`, or
 `<template>` elements.

 See:
 [https://www.w3.org/TR/html5/grouping-content.html#the-ul-element W3C
 HTML5 specs]
 [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul MDN UL
 Permitted Content]
 [https://dequeuniversity.com/rules/axe/2.2/list?application=lighthouse
 Specific to rendered markup below from Deque]

 Rendered markup for a group's activity:

 {{{
 <div class="activity single-group">
         <ul id="activity-stream" class="activity-list item-list bp-list"
 data-bp-list="activity" style="display: block;">
                 <ul class="activity-list item-list bp-list">
                         <li class="groups joined_group activity-item mini
 date-recorded-1523723973" id="activity-538" data-bp-activity-id="538">
                         // etc., etc., etc.
                         </li>
                 </ul>
         </ul>
 </div>
 }}}


 Note also that both `UL`s above have the same `class="activity-list item-
 list bp-list"` which causes double padding in the group's activity stream
 as seen below.

 [[Image(https://cldup.com/eGHUMWugfJ.png)]]

 (Description Edit for Slack Testing)

--

-- 
Ticket URL: <https://buddypress.trac.wordpress.org/ticket/7749#comment:10>
BuddyPress Trac <http://buddypress.org/>
BuddyPress Trac