User tests: Successful: Unsuccessful:
Pull Request resolves #48611.
In components/com_tags/tmpl/tags/default_items.php, the template determines when to open and close <ul> elements around tag items.
When tag_columns is set to 1 (or defaulted to 1), $bscolumns is 1. The conditions previously included $bscolumns === 1:
<?php if ($n === 1 || $i === 0 || $bscolumns === 1 || $i % $bscolumns === 0) : ?>
<ul class="com-tags__category category list-group">
<?php endif; ?>and
<?php if (($i === 0 && $n === 1) || $i === $n - 1 || $bscolumns === 1 || (($i + 1) % $bscolumns === 0)) : ?>
</ul>
<?php endif; ?>Because $bscolumns === 1 was evaluated on every iteration, and because $i % 1 === 0 and ($i + 1) % 1 === 0 are also true for every integer $i, the template opened and closed a new <ul> for every single tag item in single-column layouts. This produced invalid markup with multiple single-item lists instead of one continuous list group:
<ul class="com-tags__category category list-group">
<li class="list-group-item list-group-item-action">...</li>
</ul>
<ul class="com-tags__category category list-group">
<li class="list-group-item list-group-item-action">...</li>
</ul>This PR adjusts the opening and closing conditions so that:
$bscolumns === 1), the <ul> opens only on the first item ($i === 0) and closes on the last item ($i === $n - 1), grouping all tags into a single <ul class="com-tags__category category list-group">.$bscolumns > 1), rows are split into <ul> containers every $bscolumns items as before:
<?php if ($i === 0 || ($bscolumns > 1 && $i % $bscolumns === 0)) : ?><?php if ($i === $n - 1 || ($bscolumns > 1 && ($i + 1) % $bscolumns === 0)) : ?>1.2, 3, or 4 to ensure multi-column row splitting remains intact.Every single tag item is wrapped in its own <ul class="com-tags__category category list-group">...</ul>:
<ul class="com-tags__category category list-group">
<li class="list-group-item list-group-item-action">
<h3 class="mb-0"><a href="...">Tag 1</a></h3>
</li>
</ul>
<ul class="com-tags__category category list-group">
<li class="list-group-item list-group-item-action">
<h3 class="mb-0"><a href="...">Tag 2</a></h3>
</li>
</ul>This causes broken visual styling (disconnected list-group items with separate margins and borders) and poor accessibility (screen readers announce each tag as a list of 1 item).
All tag items are rendered inside a single <ul class="com-tags__category category list-group"> element:
<ul class="com-tags__category category list-group">
<li class="list-group-item list-group-item-action">
<h3 class="mb-0"><a href="...">Tag 1</a></h3>
</li>
<li class="list-group-item list-group-item-action">
<h3 class="mb-0"><a href="...">Tag 2</a></h3>
</li>
</ul>Please select: