Customized Advanced Search Form formSelect index not updating

I’m on Omeka 3.1.2

I built a customized theme for my team’s project a few years ago, and the items/search-form.php that I based our theme’s version on was from Omeka 2.X. Our advanced search stopped working with the upgrade to Omeka 3 in the following way:

The form names being generated for only the <select> elements were not being incremented. So instead of:
name = advanced[0][joiner] for the first
name = advanced[1][joiner] for the second
etc.

they were all being set to name = advanced[0][joiner].

This was happening for all selects, so the element_id and terms as well.

I noticed in the current version of items/search-form.php, its been updated for accessibility, so I added in the aria labels to see if that helped, and it has not. The only thing that fixes it and returns it to normal functioning is to move the lines that increment the selects ahead of the incrementing of the aria elements, iow move the following lines in the Omeka core application/views/scripts/javascripts/items-search.js like so:

…starting at line 50

            //Reset the selects, inputs, and aria labels.
            inputs.val('');
            inputs.attr('name', function () {
                return this.name.replace(/\d+/, newIndex);
            });
         
            incrementScreenReaderLabels('id', div, newIndex);
            incrementScreenReaderLabels('aria-label', div, newIndex);
            div.find('input, select, button').each(function() {
                incrementScreenReaderLabels('aria-labelledby', $(this), newIndex);
            });

            selects.each(function () {
                this.selectedIndex = 0;
            });
            selects.attr('name', function () {
                return this.name.replace(/\d+/, newIndex);
            });

…etc

changes to this

            //Reset the selects, inputs, and aria labels.
            inputs.val('');
            inputs.attr('name', function () {
                return this.name.replace(/\d+/, newIndex);
            });
            
            selects.each(function () {
                this.selectedIndex = 0;
            });
            selects.attr('name', function () {
                return this.name.replace(/\d+/, newIndex);
            });

            incrementScreenReaderLabels('id', div, newIndex);
            incrementScreenReaderLabels('aria-label', div, newIndex);
            div.find('input, select, button').each(function() {
                incrementScreenReaderLabels('aria-labelledby', $(this), newIndex);
            });

…etc

I obviously don’t want to edit the core, I know that’s bad practice, but I can’t figure out what I’m missing in my template that is causing the increment not to work with the existing Javascript. I made the change to the core temporarily on my live site so my team can still use it, so its not broken right now, but here is the search form live if that helps: Search Records · Southeast Asian Archaeology Bibliographic Database

Here is what I believe is the relevant part of my items/search-form.php:

            <div id="search-narrow-by-fields" class="field">
                <label><?php echo __('Narrow by Specific Fields'); ?></label>
                <div class="inputs">
                <?php
                // If the form has been submitted, retain the number of search
                // fields used and rebuild the form
                if (!empty($_GET['advanced'])) {
                    $search = $_GET['advanced'];
                } else {
                    $search = array(array('field' => '', 'type' => '', 'value' => ''));
                }

                //Here is where we actually build the search form
                //The POST looks like =>
                // advanced[0] =>
                //[field] = 'description'
                //[type] = 'contains'
                //[terms] = 'foobar'
                //etc
                foreach ($search as $i => $rows): ?>
                    <div class="search-entry" id="search-row-<?php echo $i; ?>" aria-label="<?php echo __('Row %s', $i+1); ?>">
                        <?php

                        echo $this->formSelect(
                            "advanced[$i][joiner]",
                            @$rows['joiner'],
                            array(
                                'title' => __("Search Joiner"),
                                'id' => null,
                                'class' => 'advanced-search-joiner',
                                'aria-labelledby' => 'search-narrow-by-fields-label search-row-' . $i . ' search-narrow-by-fields-joiner',
                            ),
                            array(
                                'and' => __('AND'),
                                'or' => __('OR'),
                            )
                        );
                        if (get_theme_option('Asearch Fields') != "") {
                        	// $bibElementSet= get_record('ElementSet',array('name'=>"Item Type Metadata"));
                          echo $this->formSelect(
                              "advanced[$i][element_id]",
                              @$rows['element_id'],
                              array(
                                  'title' => __("Search Field"),
                                  'id' => null,
                                  'class' => 'advanced-search-element',
                                  'aria-labelledby' => 'search-narrow-by-fields-label search-row-' . $i . ' search-narrow-by-fields-property',
                              ),
                              $bibElements
                          );
                        } else {
                            echo $this->formSelect(
                                "advanced[$i][element_id]",
                                @$rows['element_id'],
                                array(
                                    'title' => __("Search Field"),
                                    'id' => null,
                                    'class' => 'advanced-search-element',
                                    'aria-labelledby' => 'search-narrow-by-fields-label search-row-' . $i . ' search-narrow-by-fields-property',
                                ),
                                $ab_fields
                            );
                        }
                        echo $this->formSelect(
                            "advanced[$i][type]",
                            @$rows['type'],
                            array(
                                'title' => __("Search Type"),
                                'id' => null,
                                'class' => 'advanced-search-type',
                                'aria-labelledby' => 'search-narrow-by-fields-label search-row-' . $i . ' search-narrow-by-fields-type',
                            ),
                            array(
                                'contains' => __('contains'),
                                'does not contain' => __('does not contain'),
                                'is exactly' => __('is exactly'),
                                'is empty' => __('is empty'),
                                'is not empty' => __('is not empty'),
                                'starts with' => __('starts with'),
                                'ends with' => __('ends with'))
                        );
                        echo $this->formText(
                            "advanced[$i][terms]",
                            @$rows['terms'],
                            array(
                                'size' => '20',
                                'title' => __("Search Terms"),
                                'id' => null,
                                'class' => 'advanced-search-terms',
                                'aria-labelledby' => 'search-narrow-by-fields-label search-row-' . $i . ' search-narrow-by-fields-terms',
                            )
                        );
                        ?>
                        <button type="button" class="remove_search" disabled="disabled" style="display: none;"><?php echo __('Remove field'); ?></button>
                    </div>
                <?php endforeach; ?>
                </div>
                <button type="button" class="add_search btn btn-light"><?php echo __('Add a Field'); ?></button>
            </div>

Incidentally, in trying to debug this, I think you might increment the aria labels and ids twice (maybe that’s on purpose?) because you increment it once, and then pass “newIndex” into your incrementers which, then also increments it again. Not sure if that is intended.

Thanks for any advice anyone has.

There’s a small change we have which isn’t quite released yet that avoids this problem with themes that don’t have the accessibility-related attributes on these form elements; you can see it here.

The two basic options that should work are, making that change to the core’s JS, or changing your theme’s search partial so that the search-entry row divs have id and aria-label attributes, and that the form inputs and “remove” button inside each row have aria-labelledby attributes. Just aligning to what the core’s partial has for all those elements should do the trick. In your case it may be as simple as the “remove_search” button not having the aria-labelledby attribute.