Fix HTML validation issues.

EreMaijala · Jun 7, 2024 · 4eebfa8 · 4eebfa8
1 parent f0db4d7
commit 4eebfa8
Show file tree

Hide file tree

Showing 31 changed files with 90 additions and 75 deletions.
diff --git a/module/VuFind/src/VuFind/Controller/CombinedController.php b/module/VuFind/src/VuFind/Controller/CombinedController.php
@@ -125,7 +125,7 @@ public function resultAction()
                 'domId' => 'combined_' . str_replace(':', '____', $sectionId),
             ];
             // Initialize theme resources:
-            ($this->getViewRenderer()->plugin('headThemeResources'))();
+            ($this->getViewRenderer()->plugin('headThemeResources'))(true);
             // Render content:
             $html = $this->getViewRenderer()->render(
                 'combined/results-list.phtml',

diff --git a/module/VuFind/src/VuFind/View/Helper/Root/AccountMenu.php b/module/VuFind/src/VuFind/View/Helper/Root/AccountMenu.php
@@ -360,17 +360,19 @@ protected function getIlsConnection(): IlsConnection
      * Render account menu
      *
      * @param string $activeItem The name of current active item
+     * @param string $idPrefix   Element ID prefix
      *
      * @return string
      */
-    public function render(string $activeItem): string
+    public function render(string $activeItem, string $idPrefix = ''): string
     {
         $contextHelper = $this->getView()->plugin('context');
         return $contextHelper->renderInContext(
             'myresearch/menu.phtml',
             [
                 'items' => $this->getItems(),
                 'active' => $activeItem,
+                'idPrefix' => $idPrefix,
             ]
         );
     }

diff --git a/module/VuFind/src/VuFind/View/Helper/Root/SearchBox.php b/module/VuFind/src/VuFind/View/Helper/Root/SearchBox.php
@@ -426,7 +426,6 @@ protected function getCombinedHandlers($activeSearchClass, $activeHandler)
     {
         // Build settings:
         $handlers = [];
-        $selectedFound = false;
         $backupSelectedIndex = false;
         $addedBrowseHandlers = false;
         $settings = $this->getCombinedHandlerConfig($activeSearchClass);
@@ -447,10 +446,9 @@ protected function getCombinedHandlers($activeSearchClass, $activeHandler)
                     $j++;
                     $selected = $target == $activeSearchClass
                         && $activeHandler == $searchVal;
-                    if ($selected) {
-                        $selectedFound = true;
-                    } elseif (
-                        $backupSelectedIndex === false
+                    if (
+                        !$selected
+                        && $backupSelectedIndex === false
                         && $target == $activeSearchClass
                     ) {
                         $backupSelectedIndex = count($handlers);
@@ -503,7 +501,8 @@ protected function getCombinedHandlers($activeSearchClass, $activeHandler)
         }
 
         // If we didn't find an exact match for a selected index, use a fuzzy
-        // match:
+        // match (do the check here since it could be an AlphaBrowse index too):
+        $selectedFound = in_array(true, array_column($handlers, 'selected'), true);
         if (!$selectedFound && $backupSelectedIndex !== false) {
             $handlers[$backupSelectedIndex]['selected'] = true;
         }

diff --git a/module/VuFind/tests/integration-tests/src/VuFindTest/Mink/OaiTest.php b/module/VuFind/tests/integration-tests/src/VuFindTest/Mink/OaiTest.php
@@ -81,6 +81,7 @@ public static function serverProvider(): array
      *
      * @dataProvider serverProvider
      */
+    #[\VuFindTest\Attribute\HtmlValidation(false)]
     public function testDisabledByDefault(string $path): void
     {
         $session = $this->getMinkSession();

diff --git a/module/VuFindTheme/src/VuFindTheme/View/Helper/SetupThemeResources.php b/module/VuFindTheme/src/VuFindTheme/View/Helper/SetupThemeResources.php
@@ -64,12 +64,16 @@ public function __construct(\VuFindTheme\ResourceContainer $container)
     /**
      * Set up items based on contents of theme resource container.
      *
+     * @param bool $partial Whether rendering an HTML snippet instead of a full page
+     *
      * @return void
      */
-    public function __invoke()
+    public function __invoke(bool $partial = false)
     {
-        $this->addMetaTags();
-        $this->addLinks();
+        if (!$partial) {
+            $this->addMetaTags();
+        }
+        $this->addLinks($partial);
         $this->addScripts();
     }
 
@@ -97,9 +101,11 @@ protected function addMetaTags()
     /**
      * Add links to header.
      *
+     * @param bool $partial Whether rendering an HTML snippet instead of a full page
+     *
      * @return void
      */
-    protected function addLinks()
+    protected function addLinks(bool $partial = false)
     {
         // Convenient shortcut to view helper:
         $headLink = $this->getView()->plugin('headLink');
@@ -125,8 +131,7 @@ protected function addLinks()
         // If `favicon` is a string then treat it as a single file path to an .ico icon.
         // If `favicon` is an array then treat each item as an assoc array of html attributes and render
         // a link element for each.
-        $favicon = $this->container->getFavicon();
-        if (!empty($favicon)) {
+        if (!$partial && ($favicon = $this->container->getFavicon())) {
             $imageLink = $this->getView()->plugin('imageLink');
             if (is_array($favicon)) {
                 foreach ($favicon as $attrs) {

diff --git a/themes/bootstrap3/js/common.js b/themes/bootstrap3/js/common.js
@@ -408,9 +408,11 @@ var VuFind = (function VuFind() {
       link.addEventListener('click', function toggleQRCode() {
         var holder = this.nextElementSibling;
         if (holder.querySelectorAll('img').length === 0) {
-          // We need to insert the QRCode image
-          var template = holder.querySelector('.qrCodeImgTag').innerHTML;
-          holder.innerHTML = template;
+          // Replace the QRCode template with the image:
+          const templateEl = holder.querySelector('.qrCodeImgTag');
+          if (templateEl) {
+            templateEl.parentNode.innerHTML = templateEl.innerHTML;
+          }
         }
       });
     });

diff --git a/themes/bootstrap3/templates/Recommend/SideFacets.phtml b/themes/bootstrap3/templates/Recommend/SideFacets.phtml
@@ -54,7 +54,7 @@
           <?=$this->icon('collapse', 'facet-title-icon') ?>
         </button>
       </h3>
-      <div id="side-collapse-<?=$this->escapeHtmlAttr($title) ?>" role="listbox" aria-expanded="<?=$collapsed ? 'false' : 'true'?>" class="collapse<?php if (!$collapsed): ?> in<?php endif ?>"<?php if (in_array($title, $forceUncollapsedFacets)): ?> data-force-in="1"<?php endif ?>>
+      <div id="side-collapse-<?=$this->escapeHtmlAttr($title) ?>" role="listbox" class="collapse<?php if (!$collapsed): ?> in<?php endif ?>"<?php if (in_array($title, $forceUncollapsedFacets)): ?> data-force-in="1"<?php endif ?>>
         <?=
           $this->context($this)->renderInContext(
               'Recommend/SideFacets/facet.phtml',

diff --git a/themes/bootstrap3/templates/Recommend/SideFacets/cluster-list.phtml b/themes/bootstrap3/templates/Recommend/SideFacets/cluster-list.phtml
@@ -13,7 +13,7 @@
     'more-label' => $this->transEsc('more_ellipsis'),
     'less-label' => $this->transEsc('less_ellipsis'),
     'wrapper-class' => false,
-    'wrapper-tagname' => 'div',
+    'wrapper-tagname' => 'li',
   ];
   $facetLightboxParams = http_build_query(
       [

diff --git a/themes/bootstrap3/templates/Recommend/SideFacets/single-facet.phtml b/themes/bootstrap3/templates/Recommend/SideFacets/single-facet.phtml
@@ -53,12 +53,12 @@
 
 <?php // Render the element: ?>
 <?php if ($hasSubLinks): ?>
-  <div class="<?=implode(' ', $classList) ?>">
+  <span class="<?=implode(' ', $classList) ?>">
     <a class="text<?=$hasCheckbox ? ' icon-link' : ''?>" href="<?=$toggleUrl ?>" data-lightbox-ignore data-title="<?=$this->escapeHtmlAttr($this->facet['displayText']) ?>" data-count="<?=$this->facet['count'] ?>"<?php if ($this->facet['isApplied']): ?> title="<?=$this->transEscAttr('applied_filter') ?>"<?php endif;?>>
       <?=$displayText ?>
     </a>
     <?=$badgeExclude?>
-  </div>
+  </span>
 <?php else: ?>
   <a href="<?=$toggleUrl ?>" class="<?=implode(' ', $classList) ?><?=$hasCheckbox ? ' icon-link' : ''?>" data-title="<?=$this->escapeHtmlAttr($this->facet['displayText']) ?>" data-count="<?=$this->facet['count'] ?>"<?php if ($this->facet['isApplied']): ?> title="<?=$this->transEscAttr('applied_filter') ?>"<?php endif;?> data-lightbox-ignore>
     <span class="text">

diff --git a/themes/bootstrap3/templates/RecordDriver/DefaultRecord/explain.phtml b/themes/bootstrap3/templates/RecordDriver/DefaultRecord/explain.phtml
@@ -20,7 +20,7 @@ $link = $this->recordLinker()->getUrl($this->driver);
   <p>
     <?=
       $this->translate('explain_relevance', [
-      '%%recordId%%' => '<a href="' . $this->escapeHtmlAttr($link) . '">' . $recordId . '</a>',
+      '%%recordId%%' => '<a href="' . $this->escapeHtmlAttr($link) . '">' . $this->escapeHtml($recordId) . '</a>',
       '%%relevanceValue%%' => $this->localizedNumber($totalScore, $decimalPlaces)])
     ?>
     <?php if (isset($coord) || isset($boost)): ?>

diff --git a/themes/bootstrap3/templates/RecordDriver/DefaultRecord/list-entry.phtml b/themes/bootstrap3/templates/RecordDriver/DefaultRecord/list-entry.phtml
@@ -226,7 +226,7 @@
                   'buttonLink' => $deleteUrlGet,
                   'buttonIcon' => 'user-list-remove',
                   'buttonLabel' => 'Delete',
-                  'confirmId' => "confirm_delete_item_$id",
+                  'confirmId' => 'confirm_delete_item_' . urlencode($id),
               ]
           )
         ?>

diff --git a/themes/bootstrap3/templates/header.phtml b/themes/bootstrap3/templates/header.phtml
@@ -43,7 +43,7 @@
                 <li id="login-dropdown" class="dropdown hidden-xs">
                   <a href="#" data-toggle="dropdown"><?=$this->icon('dropdown-caret') ?></a>
                   <div class="dropdown-menu">
-                    <?=$this->accountMenu()->render('')?>
+                    <?=$this->accountMenu()->render('', 'header_')?>
                   </div>
                 </li>
               <?php endif; ?>

diff --git a/themes/bootstrap3/templates/hierarchy/tree.phtml b/themes/bootstrap3/templates/hierarchy/tree.phtml
@@ -17,8 +17,7 @@
   // Function for rendering a tree level. Optimized to avoid extra objects or
   // template calls and defined as array to avoid interfering with the plugin __call
   // magic.
-  $this->renderTreeLevel = [function ($nodes, $context, $hierarchyID, $driver, $selectedID) {
-    $this->parentNodeId ??= '';
+  $this->renderTreeLevel = [function ($nodes, $context, $hierarchyID, $driver, $selectedID, $parentNodeId = '') {
     $nodeId = 0;
     $icons = [
       'hierarchy-collection' => $this->icon('hierarchy-collection'),
@@ -62,10 +61,10 @@
       if ($hasChildren) {
         echo '<li' . ($liClasses ? ' class="' . implode(' ', $liClasses) . '"' : '') . '>';
         ++$nodeId;
-        $childUlId = 'hierarchy_' . $context . '_' . $this->parentNodeId . '_' . $nodeId;
+        $childUlIdEsc = $escapeAttr('hierarchy_' . $context . '_' . $parentNodeId . '_' . $nodeId);
         echo '<button class="hierarchy-tree__toggle-expanded js-toggle-expanded"'
           . ' aria-expanded="' . ($node->hasSelectedChild ? 'true' : 'false') . '"'
-          . ' aria-controls="' . $escapeAttr($childUlId) . '"'
+          . ' aria-controls="' . $childUlIdEsc . '"'
           // Use node title as button label so that a screen reader can read it as
           // "Expanded <text>" or "Collapsed <text>":
           . ' aria-label="' . $escapeAttr($node->title) . '"'
@@ -77,8 +76,8 @@
           . '</button>';
 
         echo " $itemHtml ";
-        echo '<ul class="hierarchy-tree__children">';
-        ($this->renderTreeLevel[0])($node->children, $context, $hierarchyID, $driver, $selectedID);
+        echo '<ul id="' . $childUlIdEsc . '" class="hierarchy-tree__children">';
+        ($this->renderTreeLevel[0])($node->children, $context, $hierarchyID, $driver, $selectedID, "{$parentNodeId}_$nodeId");
         echo '</ul></li>';
       } else {
         echo '<li' . ($liClasses ? ' class="' . implode(' ', $liClasses) . '"' : '') . '>'

diff --git a/themes/bootstrap3/templates/myresearch/menu.phtml b/themes/bootstrap3/templates/myresearch/menu.phtml
@@ -2,17 +2,17 @@
   $user = $this->auth()->getUserObject();
 ?>
 <?=$this->component('hide-offcanvas-button')?>
-<h3 id="acc-menu-acc-header"><?=$this->transEsc('Your Account')?></h3>
-<nav class="myresearch-menu" aria-labelledby="acc-menu-acc-header">
+<h3 id="<?=$this->idPrefix ?? ''?>acc-menu-acc-header"><?=$this->transEsc('Your Account')?></h3>
+<nav class="myresearch-menu" aria-labelledby="<?=$this->idPrefix ?? ''?>acc-menu-acc-header">
   <ul class="account-menu">
     <?php foreach ($this->items as $item): ?>
       <?=$this->render('myresearch/menu-item.phtml', ['active' => $this->active, ...$item])?>
     <?php endforeach; ?>
   </ul>
 </nav>
 <?php if ($user && $this->userlist()->getMode() !== 'disabled'): ?>
-  <h3 id="acc-menu-lists-header"><?=$this->transEsc('Your Lists')?></h3>
-  <nav class="myresearch-menu" aria-labelledby="acc-menu-lists-header">
+  <h3 id="<?=$this->idPrefix ?? ''?>acc-menu-lists-header"><?=$this->transEsc('Your Lists')?></h3>
+  <nav class="myresearch-menu" aria-labelledby="<?=$this->idPrefix ?? ''?>acc-menu-lists-header">
     <ul>
       <?php
         // Use a variable so that we can output this nicely without whitespace that would get underlined:

diff --git a/themes/bootstrap3/templates/record/ajaxview-accordion.phtml b/themes/bootstrap3/templates/record/ajaxview-accordion.phtml
@@ -6,11 +6,11 @@
   $idSuffixEsc = $this->escapeHtmlAttr(md5($this->driver->getUniqueId() . '|' . $this->driver->getSourceIdentifier()));
 ?>
 
-<div class="list-tabs panel-group" id="accordion_<?=$idSuffixEsc?>">
+<div class="list-tabs panel-group" id="accordion_<?=$idSuffixEsc?>" role="tablist">
   <?php $coreMetadata = $this->record($this->driver)->getCoreMetadata(); ?>
   <?php if (!empty($coreMetadata)): ?>
     <div class="panel panel-default">
-      <div id="information_<?=$idSuffixEsc?>" class="list-tab-toggle panel-heading loaded" data-toggle="collapse" data-parent="#accordion_<?=$idSuffixEsc?>" data-target="#information_<?=$idSuffixEsc?>-content">
+      <div id="information_<?=$idSuffixEsc?>" class="list-tab-toggle panel-heading loaded" data-bs-toggle="collapse" data-parent="#accordion_<?=$idSuffixEsc?>" data-bs-target="#information_<?=$idSuffixEsc?>-content" role="tab">
         <h4 class="panel-title">
           <a class="accordion-toggle">
             <?=$this->translate('ajaxview_label_information') ?>
@@ -30,7 +30,7 @@
   <?php $toolbar = $this->record($this->driver)->getToolbar(); ?>
   <?php if (!empty($toolbar)): ?>
     <div class="panel panel-default">
-      <div id="tools_<?=$idSuffixEsc?>" class="list-tab-toggle panel-heading loaded" data-toggle="collapse" data-parent="#accordion_<?=$idSuffixEsc?>" data-target="#tools_<?=$idSuffixEsc?>-content">
+      <div id="tools_<?=$idSuffixEsc?>" class="list-tab-toggle panel-heading loaded" data-bs-toggle="collapse" data-parent="#accordion_<?=$idSuffixEsc?>" data-bs-target="#tools_<?=$idSuffixEsc?>-content" role="tab">
         <h4 class="panel-title">
           <a class="accordion-toggle">
             <?=$this->translate('ajaxview_label_tools') ?>
@@ -48,7 +48,7 @@
   <?php $relatedList = $this->related()->getList($this->driver); ?>
   <?php if ($relatedList != null): ?>
     <div class="panel panel-default">
-      <div id="related_<?=$idSuffixEsc?>" class="list-tab-toggle panel-heading loaded" data-toggle="collapse" data-parent="#accordion_<?=$idSuffixEsc?>" data-target="#related_<?=$idSuffixEsc?>-content">
+      <div id="related_<?=$idSuffixEsc?>" class="list-tab-toggle panel-heading loaded" data-bs-toggle="collapse" data-parent="#accordion_<?=$idSuffixEsc?>" data-bs-target="#related_<?=$idSuffixEsc?>-content" role="tab">
         <h4 class="panel-title">
           <a class="accordion-toggle">
             <?=$this->transEsc('Related Items')?>
@@ -80,7 +80,7 @@
         }
       ?>
       <div class="panel panel-default <?=implode(' ', $tab_classes) ?>">
-        <div id="<?=$this->escapeHtmlAttr(strtolower($tab))?>_<?=$idSuffixEsc?>" class="list-tab-toggle panel-heading" data-toggle="collapse" data-parent="#accordion_<?=$idSuffixEsc?>" data-target="#<?=strtolower($tab)?>_<?=$idSuffixEsc?>-content"<?php if ($obj->supportsAjax() && in_array($tab, $this->backgroundTabs)):?> data-background<?php endif ?>>
+        <div id="<?=$this->escapeHtmlAttr(strtolower($tab))?>_<?=$idSuffixEsc?>" class="list-tab-toggle panel-heading" data-bs-toggle="collapse" data-parent="#accordion_<?=$idSuffixEsc?>" data-bs-target="#<?=strtolower($tab)?>_<?=$idSuffixEsc?>-content"<?php if ($obj->supportsAjax() && in_array($tab, $this->backgroundTabs)):?> data-background<?php endif ?>>
           <h4 class="panel-title">
             <a class="accordion-toggle" data-href="<?=$this->escapeHtmlAttr($this->recordLinker()->getTabUrl($this->driver, $tab))?>#tabnav"><?=$this->transEsc($desc) ?></a>
           </h4>

diff --git a/themes/bootstrap3/templates/search/facet-list-content.phtml b/themes/bootstrap3/templates/search/facet-list-content.phtml
@@ -33,8 +33,10 @@
     </li>
   <?php endforeach; ?>
   <?php if ($this->anotherPage): ?>
-    <a<?=$this->htmlAttributes($nextParams)?>>
-      <span class="text"><?=$this->transEsc('more_ellipsis') ?></span>
-    </a>
+    <li>
+      <a<?=$this->htmlAttributes($nextParams)?>>
+        <span class="text"><?=$this->transEsc('more_ellipsis') ?></span>
+      </a>
+    </li>
   <?php endif; ?>
 </ul>
diff --git a/themes/bootstrap3/templates/search/facet-list.phtml b/themes/bootstrap3/templates/search/facet-list.phtml
@@ -25,7 +25,7 @@
   <form class="form-inline">
 
     <div class="full-facet-sort-options form-group" role="group" aria-labelledby="full-facet-sort-label">
-      <label id="full-facet-sort-label" class="control-label" for="btn-group-sort"><?=$this->translate('Sort') ?></label>
+      <label id="full-facet-sort-label" class="control-label"><?=$this->translate('Sort') ?></label>
       <div id="btn-group-sort" class="btn-group">
         <?php foreach ($this->sortOptions as $key => $sort): ?>
           <a href="<?=$this->escapeHtmlAttr($urlBase . '&' . http_build_query(['facetpage' => 1, 'facetsort' => $key, 'contains' => $contains])) ?>" class="btn btn-default js-facet-sort<?php if($this->sort == $key): ?> active<?php endif; ?>" data-sort="<?=$this->escapeHtmlAttr($key) ?>" data-lightbox-ignore><?=$this->transEsc($sort) ?></a>
@@ -37,7 +37,7 @@
       <?php if ($this->results->getParams()->supportsFacetFiltering($this->facet) === true): ?>
         <label id="facet-lightbox-filter-label" class="control-label" for="input-contains"><?=$this->transEsc('Filter') ?></label>
         <input id="input-contains" class="ajax_param form-control" data-name="contains" type="text" value="<?=htmlspecialchars($this->contains)?>" aria-label="<?=$this->transEscAttr('search_terms')?>">
-        <button id="btn-reset-contains" class="btn btn-default <?=strlen($this->contains) < 1 ? 'hidden' : ''?>" type="reset" role="button" aria-label="<?=$this->transEsc('searchform_reset_button')?>"><?=$this->icon('ui-reset-search')?></button>
+        <button id="btn-reset-contains" class="btn btn-default <?=strlen($this->contains) < 1 ? 'hidden' : ''?>" type="reset" aria-label="<?=$this->transEsc('searchform_reset_button')?>"><?=$this->icon('ui-reset-search')?></button>
       <?php endif; ?>
 
       <?php $ajaxParams = ['facet' => $this->facet, 'facetexclude' => $this->exclude, 'facetop' => $this->operator, 'facetpage' => $this->page, 'facetsort' => $this->sort, 'urlBase' => $urlBase, 'searchAction' => $searchAction]; ?>

diff --git a/themes/bootstrap3/templates/search/searchbox.phtml b/themes/bootstrap3/templates/search/searchbox.phtml
@@ -83,10 +83,11 @@
     <?= $this->context($this)->renderInContext('search/searchTabs', ['searchTabs' => $tabConfig['tabs'], 'showCounts' => $tabConfig['showCounts']]); ?>
     <div class="searchForm-inputs">
       <?php
+        // Note: we need type="text" for autocomplete role="combobox"
         $searchboxAttributes = [
           'id' => 'searchForm_lookfor',
           'class' => 'searchForm_lookfor form-control search-query',
-          'type' => 'search',
+          'type' => 'text',
           'name' => 'lookfor',
           'value' => $this->lookfor,
           'aria-label' => $this->translate('search_terms'),

diff --git a/themes/bootstrap5/js/common.js b/themes/bootstrap5/js/common.js
@@ -408,9 +408,11 @@ var VuFind = (function VuFind() {
       link.addEventListener('click', function toggleQRCode() {
         var holder = this.nextElementSibling;
         if (holder.querySelectorAll('img').length === 0) {
-          // We need to insert the QRCode image
-          var template = holder.querySelector('.qrCodeImgTag').innerHTML;
-          holder.innerHTML = template;
+          // Replace the QRCode template with the image:
+          const templateEl = holder.querySelector('.qrCodeImgTag');
+          if (templateEl) {
+            templateEl.parentNode.innerHTML = templateEl.innerHTML;
+          }
         }
       });
     });

diff --git a/themes/bootstrap5/templates/Recommend/SideFacets.phtml b/themes/bootstrap5/templates/Recommend/SideFacets.phtml
@@ -54,7 +54,7 @@
           <?=$this->icon('collapse', 'facet-title-icon') ?>
         </button>
       </h3>
-      <div id="side-collapse-<?=$this->escapeHtmlAttr($title) ?>" role="listbox" aria-expanded="<?=$collapsed ? 'false' : 'true'?>" class="collapse<?php if (!$collapsed): ?> in<?php endif ?>"<?php if (in_array($title, $forceUncollapsedFacets)): ?> data-force-in="1"<?php endif ?>>
+      <div id="side-collapse-<?=$this->escapeHtmlAttr($title) ?>" role="listbox" class="collapse<?php if (!$collapsed): ?> in<?php endif ?>"<?php if (in_array($title, $forceUncollapsedFacets)): ?> data-force-in="1"<?php endif ?>>
         <?=
           $this->context($this)->renderInContext(
               'Recommend/SideFacets/facet.phtml',

diff --git a/themes/bootstrap5/templates/Recommend/SideFacets/cluster-list.phtml b/themes/bootstrap5/templates/Recommend/SideFacets/cluster-list.phtml
@@ -13,7 +13,7 @@
     'more-label' => $this->transEsc('more_ellipsis'),
     'less-label' => $this->transEsc('less_ellipsis'),
     'wrapper-class' => false,
-    'wrapper-tagname' => 'div',
+    'wrapper-tagname' => 'li',
   ];
   $facetLightboxParams = http_build_query(
       [