Make shortlist button focusable

This fix allows users using keyboards to be able to focus the label.btn--shortlist element to shortlist a report.
mysociety · Nov 4, 2024 · a6ebf9a · a6ebf9a
1 parent bd545ee
commit a6ebf9a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 42 deletions.
diff --git a/templates/web/base/report/_main.html b/templates/web/base/report/_main.html
@@ -16,25 +16,6 @@
     <input type="hidden" name="id" value="[% problem.id %]">
     <input type="hidden" name="token" value="[% csrf_token %]">
     <input type="hidden" name="[% IF c.user.is_planned_report(problem) %]shortlist-remove[% ELSE %]shortlist-add[% END %]" value="1">
-    <p><input
-        type="submit"
-        id="shortlist-report"
-        data-label-remove="[% loc('Remove from shortlist') %]"
-        data-label-add="[% loc('Add to shortlist') %]"
-        data-value-remove="[% loc('Shortlisted') %]"
-        data-value-add="[% loc('Shortlist') %]"
-        data-class-remove="btn--shortlisted"
-        data-class-add="btn--shortlist"
-    [%~ IF c.user.is_planned_report(problem) ~%]
-        value="[% loc('Shortlisted') %]"
-        aria-label="[% loc('Remove from shortlist') %]"
-        class="btn--shortlisted"
-    [%~ ELSE ~%]
-        value="[% loc('Shortlist') %]"
-        aria-label="[% loc('Add to shortlist') %]"
-        class="btn--shortlist"
-    [%~ END ~%]
-    ></p>
 </form>
 [% END %]
 
@@ -130,11 +111,17 @@ <h1>[% problem.title | html %]</h1>
             aria-label="[% loc('Moderate this report') %]">[% loc('Moderate') %]</a>
       [% END %]
       [% IF permissions.planned_reports %]
-          [%~ IF c.user.is_planned_report(problem) ~%]
-            <label class="btn btn--shortlisted" for="shortlist-report" role="menuitem" aria-label="[% loc('Remove from shortlist') %]">[% loc('Shortlisted') %]</label>
-          [%~ ELSE ~%]
-            <label class="btn btn--shortlist" for="shortlist-report" role="menuitem" aria-label="[% loc('Add to shortlist') %]">[% loc('Shortlist') %]</label>
-          [%~ END ~%]
+        <button class="btn [% IF c.user.is_planned_report(problem) %]btn--shortlisted[% ELSE %]btn--shortlist[% END %]" 
+                form="planned_form" 
+                aria-label="[% IF c.user.is_planned_report(problem) %][% loc('Remove from shortlist') %][% ELSE %][% loc('Add to shortlist') %][% END %]"
+                data-label-remove="[% loc('Remove from shortlist') %]" 
+                data-value-remove="[% loc('Shortlisted') %]" 
+                data-class-remove="btn--shortlisted" 
+                data-label-add="[% loc('Add to shortlist') %]" 
+                data-value-add="[% loc('Shortlist') %]" 
+                data-class-add="btn--shortlist">
+            [% IF c.user.is_planned_report(problem) %][% loc('Shortlisted') %][% ELSE %][% loc('Shortlist') %][% END %]
+        </button>
       [% END %]
     </div>
   [% END %]

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
@@ -509,38 +509,41 @@ $.extend(fixmystreet.set_up, {
     $('#planned_form').on('submit', function(e) {
         if (e.metaKey || e.ctrlKey) {
             return;
-        }
+        } 
+
         e.preventDefault();
-        var $form = $(this),
-            $submit = $form.find("input[type='submit']" ),
-            $labels = $('label[for="' + $submit.attr('id') + '"]'),
-            problemId = $form.find("input[name='id']").val(),
-            data = $form.serialize() + '&ajax=1',
-            changeValue,
-            buttonLabel,
-            buttonValue,
-            classToAdd,
-            classToRemove;
+        var $form = $(this);
+        var $submit = $('button[form="planned_form"]');
+        var problemId = $form.find("input[name='id']").val();
+        var data = $form.serialize() + '&ajax=1';
 
         $.post(this.action, data, function(data) {
-            if (data.outcome == 'add') {
-                $form.find("input[name='shortlist-add']" ).attr('name', 'shortlist-remove');
+            var inputName, newInputName, buttonLabel, buttonValue, classToAdd, classToRemove;
+
+            if (data.outcome === 'add') {
+                inputName = 'shortlist-add';
+                newInputName = 'shortlist-remove';
                 buttonLabel = $submit.data('label-remove');
                 buttonValue = $submit.data('value-remove');
                 classToAdd = $submit.data('class-remove');
                 classToRemove = $submit.data('class-add');
                 $('.shortlisted-status').remove();
                 $(document).trigger('shortlist-add', problemId);
-            } else if (data.outcome == 'remove') {
-                $form.find("input[name='shortlist-remove']" ).attr('name', 'shortlist-add');
+            } else if (data.outcome === 'remove') {
+                inputName = 'shortlist-remove';
+                newInputName = 'shortlist-add';
                 buttonLabel = $submit.data('label-add');
                 buttonValue = $submit.data('value-add');
-                $(document).trigger('shortlist-remove', problemId);
                 classToAdd = $submit.data('class-add');
                 classToRemove = $submit.data('class-remove');
+                $(document).trigger('shortlist-remove', problemId);
             }
-            $submit.val(buttonValue).attr('aria-label', buttonLabel).removeClass(classToRemove).addClass(classToAdd);
-            $labels.text(buttonValue).attr('aria-label', buttonLabel).removeClass(classToRemove).addClass(classToAdd);
+
+            $form.find("input[name='" + inputName + "']").attr('name', newInputName);
+            $submit.text(buttonValue)
+                   .attr('aria-label', buttonLabel)
+                   .removeClass(classToRemove)
+                   .addClass(classToAdd);
         });
     });
   },