Nestable slider: cannot be set as ul

Feature Requests / Improvements
1

Browser: Any
OS: macOS

The nestable slider element sets each slide to be an li. However it does not set the div containing the list items to be a ul, it leaves it as a div which is semantically incorrect.

You cannot set the nestable slider element to be a ul so you have to set its parent container/block/div to a ul. However this is also semantically incorrect as the ul then contains other divs before you get to the list items. You can see this in the screenshot below. The line is blue is the container holding the nestable slider. There are then 3 divs before you get to the list of slider items. The div with the class splide__list should automatically be a ul rather than a div.

Screenshot 2023-11-21 at 12.50.38
Screenshot 2023-11-21 at 12.50.38738×906 165 KB

2

Hi Simon,
Thanks so much for your report!

Unfortunately, I cannot reproduce the issue. Is it possible that a plugin or custom code changes the elements?

image
image668×1370 179 KB

Best regards,
timmse

3

Yes sorry, I’m using a frames card which is set to li.

Surely though as we can set the items in the slider to be list items we need the ability to set the slider to be a ul so for screen readers the html is semantically correct.

4

Hi Simon,
Then it is an improvement/feature request. It’s not our fault that the slides are created as li :wink: I’ll move the thread accordingly.

5

It seems like this is still an issue in 2025.
Is there any plan to fix this?

2 Likes
6

Same here: I need to set the slider to UL, and the slides to LI.

7

Same situation here. Let’s hope this feature comes in the next releases…

8

I have the same problem. Bricks 2.0 Beta still hasn’t implemented it. Is there any information on when this feature will be available?

9

Same problem, Bricks 2.1 :slight_smile:

10

Let us change the tag for any element and it is fixed for all elements

11

For anyone who wants to have the .splide__list element to be an ul element if the slides are li elements, use this in your functions.php of your child theme.

add_filter('bricks/frontend/render_element', function($element_html, $element_instance) {
    if ( $element_instance instanceof Bricks\Element_Slider_Nested && str_contains($element_html, 'class="splide__list"><li') ) {
        return str_replace('<div class="splide__list"', '<ul class="splide__list"', $element_html);
    }
    return $element_html;
}, 10, 2);
12

Be careful changing the slider/slides to lists though. just changing the HTML tags won’t be enough, as it will mean some of the attributes that splide adds won’t be valid for that element. We had to change these for the bricksextras slider to allow users to change to using lists without the accessibility issue from splide.

13

I guess you are talking about the role attribute and the aria-label? For the ones interested, I think this should solve it Support extensions for splide in Bricks builder · GitHub

14

i think it was the role attribute, yes.