Change HTML tags for JetEngine listing wrappers

[zehjotkah]

Using JetEngine listings and in Bricks/Elementor the element "Listing Grid". I'd like to be able to change the HTML tag for those elements.

Seems to be a standard function for standard elements in Bricks:

Also seems to be a standard function for standard elements in Elementor.

There is already a comment from another user which describes it well: https://github.com/Crocoblock/suggestions/issues/7140#issuecomment-1759911339

This way we could use correct semantics in our website's DOM.

Instead of:

<div class="jet-listing-grid__items">
<div class="jet-listing-grid__item"></div>
<div class="jet-listing-grid__item"></div>
</div>

The correct HTML semantics:

<ul class="jet-listing-grid__items">
<li class="jet-listing-grid__item"></li>
<li class="jet-listing-grid__item"></li>
</ul>

[heckpet]

Highly needed! I'm not using the listing grid because of this issue regarding accessibility.

[norman-pixelkings]

Yes this is very much needed! I would like to output an unordered list or a table. Then the listings (Twig) template should output <li></li> or <tr><td></td></tr> etc. In the wrapper I would like to add the <ul></ul> or <table></table>. Now I have to use some javascript to inject this.

[afagard]

Highly needed! I'm not using the listing grid because of this issue regarding accessibility.

Can you reference how this isn't accessible? Or am I not thinking of the correct use-case. I'm thinking of grids. In Bootstrap:

<div class="row">
<div class="col-md-6">
<div class="col-md-6">
</div>

is valid and accessible and matches this output. I can understand for true lists a div-like structure isn't proper (nav's and such), but depending on the content can still be accessible.

I would really only use the listing grid to render, well, grids and a repeater to render ordered or bulleted lists (performance plays a roll too - listing grids aren't the fastest)

[zehjotkah]

@afagard You're correct that in many cases, a div-based grid can be perfectly accessible, especially for layout purposes like in your example.

However, the accessibility concern here is more about semantic meaning rather than just visual layout. When we're dealing with a list of items (even if displayed in a grid), using list elements (<ul> and <li>) can provide better semantic structure and improve screen reader navigation.

For example, if we're displaying a grid of products, blog posts, or any collection of similar items, semantically these are still a list. Screen readers can better understand and navigate this content when it's marked up as a list, providing users with information like the total number of items and allowing them to jump between list items easily.

That said, you're absolutely right that the appropriate HTML structure depends on the specific use case. For pure layout grids, div structures are fine. For lists of content items, semantic list structures are often preferable.