Added aria-label attribute to 'multi-select-button' elements

In this fix the <label> elements with no "for" attribute, haven been
replaced for <span> elements. I have also added aria-labels for all
the .multi-select-button elements on the report page. The aria-label
should be clear enough to help the users using screen readers.

To implement this solution, I have used approach number 2 of this
guideline: https://www.w3.org/WAI/tutorials/forms/labels/

Added new translation_strings for both .multi-select-button (report
status and report categories)

templates/web/base/admin/triage/_list-filters.html

@@ -21,8 +21,8 @@
 [% END %]
 
         <p class="report-list-filters">
-            [% tprintf(loc('<label for="statuses">Show</label> %s reports <label for="filter_categories">about</label> %s', "The first %s is a dropdown of all/fixed/etc, the second is a dropdown of categories"), 'untriaged', mark_safe(select_category)) %]
-            <input type="submit" name="filter_update" value="[% loc('Go') %]">
+          [% tprintf(loc('<label id="select-label-statuses" for="statuses">Show</label> %s reports <label id="select-label-categories" for="filter_categories">about</label> %s', "The first %s is a dropdown of all/fixed/etc, the second is a dropdown of categories"), mark_safe(select_status), mark_safe(select_category)) %]
+          <input type="submit" name="filter_update" value="[% loc('Go') %]">
         </p>
 
         <p class="report-list-filters">

templates/web/base/js/translation_strings.html

@@ -110,6 +110,9 @@
             saved_to_submit: '[% loc('You have <a id="oFN" href=""><span>%s</span> saved to submit</a>.', "JS") %]',
             update_single: '[% loc('update', "JS") %]',
             update_plural: '[% loc('updates', "JS") %]'
-        }
+        },
+
+        select_status_aria_label: '[% loc('Select report status', "JS") %]',
+        select_category_aria_label: '[% loc('Select a category to display', "JS") %]'
     };
 [% END %]

templates/web/base/reports/_list-filters.html

@@ -34,8 +34,8 @@
 [% END %]
 
         <p class="report-list-filters">
-            [% tprintf(loc('<label for="statuses">Show</label> %s reports <label for="filter_categories">about</label> %s', "The first %s is a dropdown of all/fixed/etc, the second is a dropdown of categories"), mark_safe(select_status), mark_safe(select_category)) %]
-            <input type="submit" name="filter_update" value="[% loc('Go') %]">
+          [% tprintf(loc('<label id="select-label-statuses" for="statuses">Show</label> %s reports <label id="select-label-categories" for="filter_categories">about</label> %s', "The first %s is a dropdown of all/fixed/etc, the second is a dropdown of categories"), mark_safe(select_status), mark_safe(select_category)) %]
+          <input type="submit" name="filter_update" value="[% loc('Go') %]">
         </p>
 
         [% PROCESS 'reports/_list-filters-sort.html' %]

web/cobrands/fixmystreet/fixmystreet.js

@@ -1975,3 +1975,25 @@ function setup_popstate() {
         });
     }, 0);
 }
+
+$( document ).ready(function() {
+    var idCnt = 1;
+    setTimeout(function() {
+        //This will replace the label elements with span elements
+        $('#select-label-statuses').replaceWith( "<span>Show</span>" );
+        $('#select-label-categories').replaceWith( "<span>about</span>" );
+
+        // add ID to each one of the multi-select-button. This will allow us to 
+        // add personalised aria-label attributes.
+        $('.multi-select-button').each(function () {
+            $(this).attr('id', function (index) {
+                return "multiselect" + idCnt;
+            });
+            idCnt++;
+        });
+        var select_status_aria_label_var = translation_strings.select_status_aria_label;
+        var select_category_aria_label_var = translation_strings.select_category_aria_label;    
+        $('#multiselect1').attr('aria-label', select_status_aria_label_var);
+        $('#multiselect2').attr('aria-label', select_category_aria_label_var);
+    }, 100);
+});