Repository: mysociety/fixmystreet
Pull request #5354: Improve meaningful sequence in report/around page
Author: login: lucascumsille
Created: 2025-02-05T09:50:00Z | Merged: 2025-04-30T06:20:28Z

Fixes: https://github.com/mysociety/societyworks/issues/4560

Replaces: https://github.com/mysociety/fixmystreet/pull/5208

Unlike the previous [PR#5208](https://github.com/mysociety/fixmystreet/pull/5208) I thought that a better approach to include the icons would be to use HTML templates instead of copy and pasting the SVG. [See commit here](https://github.com/mysociety/fixmystreet/pull/5354/commits/204fb2926dc461b82a685e6a1d65d9a86913c59a)

### Preview 

https://github.com/user-attachments/assets/5fcf7689-dc7a-4b15-8ea2-f32d0b3df265


### Preview Mobile
https://github.com/user-attachments/assets/093b5109-7b1e-4bc0-9260-e215fc804a07


### Pending from PR #5208 
> This template seems very similar to the non-mobile one, I can combine them later.
https://github.com/mysociety/fixmystreet/pull/5208#discussion_r1846514980
- [ ] `templates/web/base/report/display_tools_mobile.html` is quite 




Diff:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 08e4ff9af31..38d0547df9b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@
     - Front end improvements:
         - Make the continue button / asset stopper messages float at the bottom
           of initial steps of reporting flow.
+        - Improve display of key tools on mobile. #5354
+    - Accessibility improvements:
+        - Improved accessibility of small drawer. #5354
+        - Added skip report tools to Around page. #5354
     - Admin improvements:
         - Improve performance of admin reports search for email. #5284
         - import-export-data script exports and imports `send_method` for category #4818
diff --git a/templates/web/base/alert/_updates.html b/templates/web/base/alert/_updates.html
index b237b1bff1b..d169c6dd78f 100644
--- a/templates/web/base/alert/_updates.html
+++ b/templates/web/base/alert/_updates.html
@@ -5,12 +5,13 @@
     </a>
 
     [% IF NOT c.user_exists OR c.user.alert_updates_by(c.cobrand) != 'phone' %]
-        [% loc('Receive email when updates are left on this problem.') %]
+      <span id="report-updates-data-title">[% loc('Receive email when updates are left on this problem.') %]</span>
     [% ELSE %]
-        [% loc('Receive a text when updates are left on this problem.') %]
+      <span id="report-updates-data-title">[% loc('Receive a text when updates are left on this problem.') %]</span>
     [% END %]
     </p>
 
+    <button type="button" class="close-drawer screen-reader-only">&#10005; Close</button>
     [% PROCESS 'auth/form_extra.html' %]
 
   [% IF c.user_exists %]
diff --git a/templates/web/base/around/_skip_key_tools.html b/templates/web/base/around/_skip_key_tools.html
new file mode 100644
index 00000000000..e74191e2ab3
--- /dev/null
+++ b/templates/web/base/around/_skip_key_tools.html
@@ -0,0 +1 @@
+<a href="#report-list-filters" class="skiplink" aria-label="Skip report tools at the bottom of the page and go to report filters">Skip report tools</a>
diff --git a/templates/web/base/around/_updates.html b/templates/web/base/around/_updates.html
index e5af69da08a..97f6bbe32d5 100755
--- a/templates/web/base/around/_updates.html
+++ b/templates/web/base/around/_updates.html
@@ -1,5 +1,11 @@
+[% INCLUDE 'around/_skip_key_tools.html' %]
 <div class="shadow-wrap">
     <ul id="key-tools">
-        <li><a class="feed js-feed" id="key-tool-around-updates" href="[% email_url | html %]">[% loc("Get updates") %]</a></li>
+        <li>
+            <a class="js-feed has-inline-svg" id="key-tool-around-updates" href="[% email_url | html %]">
+                <span>[% loc("Get updates") %] </span>
+                [% INCLUDE 'icons/rss.html' width='0.7em' height='0.7em' %]
+            </a>
+        </li>
     </ul>
 </div>
diff --git a/templates/web/base/around/display_location.html b/templates/web/base/around/display_location.html
index 33395609582..88aa497fdac 100755
--- a/templates/web/base/around/display_location.html
+++ b/templates/web/base/around/display_location.html
@@ -94,7 +94,10 @@
 
       [% IF allow_creation %]
         <div style="display:none" id="side-form">
-            <a href="#" class="js-back problem-back problem-back--top">[% loc('Back') %]</a>
+            <a href="#" class="js-back problem-back problem-back--top has-inline-svg">
+                [% INCLUDE 'icons/chevron-left.html' width='1.5em' height='1.5em' %]
+                [% loc('Back') %]
+            </a>
         [% INCLUDE "report/new/fill_in_details_form.html"
             js = 1,
             report.used_map = 1
diff --git a/templates/web/base/icons/chevron-down.html b/templates/web/base/icons/chevron-down.html
new file mode 100644
index 00000000000..f9377758611
--- /dev/null
+++ b/templates/web/base/icons/chevron-down.html
@@ -0,0 +1 @@
+<svg role="presentation" aria-hidden="true" width="[% width || '1rem' %]" height="[% height || '1rem' %]" viewBox="0 0 16 13" xmlns="http://www.w3.org/2000/svg"><path d="M16 6.5V0L8 6.5L0 0V6.5L8 13L16 6.5Z" fill="currentColor"/></svg>
diff --git a/templates/web/base/icons/chevron-left.html b/templates/web/base/icons/chevron-left.html
new file mode 100644
index 00000000000..507eb33606f
--- /dev/null
+++ b/templates/web/base/icons/chevron-left.html
@@ -0,0 +1 @@
+<svg role="presentation" aria-hidden="true" width="[% width || '1rem' %]" height="[% height || '1rem' %]" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H13L6.5 8L13 16H6.5L0 8L6.5 0Z" fill="currentColor"/></svg>
diff --git a/templates/web/base/icons/chevron-right.html b/templates/web/base/icons/chevron-right.html
new file mode 100644
index 00000000000..c6630acc20b
--- /dev/null
+++ b/templates/web/base/icons/chevron-right.html
@@ -0,0 +1 @@
+<svg role="presentation" aria-hidden="true" width="[% width || '1rem' %]" height="[% height || '1rem' %]" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/templates/web/base/icons/chevron-up.html b/templates/web/base/icons/chevron-up.html
new file mode 100644
index 00000000000..2ee3d124bb2
--- /dev/null
+++ b/templates/web/base/icons/chevron-up.html
@@ -0,0 +1 @@
+<svg role="presentation" aria-hidden="true" width="[% width || '1rem' %]" height="[% height || '1rem' %]" viewBox="0 0 16 13" xmlns="http://www.w3.org/2000/svg"><path d="M0 6.5V13L8 6.5L16 13V6.5L8 0L0 6.5Z" fill="currentColor"/></svg>
diff --git a/templates/web/base/icons/rss.html b/templates/web/base/icons/rss.html
new file mode 100644
index 00000000000..5097a87b2b7
--- /dev/null
+++ b/templates/web/base/icons/rss.html
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="[% width || '1rem' %]" height="[% height || '1rem' %]" viewBox="0 0 24 24" fill="currentColor" role="presentation" aria-hidden="true"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg>
diff --git a/templates/web/base/icons/share.html b/templates/web/base/icons/share.html
new file mode 100644
index 00000000000..7a119422920
--- /dev/null
+++ b/templates/web/base/icons/share.html
@@ -0,0 +1 @@
+<svg role="presentation" aria-hidden="true" width="[% width || '1rem' %]" height="[% height || '1rem' %]" fill="currentColor" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M378,324a69.78,69.78,0,0,0-48.83,19.91L202,272.41a69.68,69.68,0,0,0,0-32.82l127.13-71.5A69.76,69.76,0,1,0,308.87,129l-130.13,73.2a70,70,0,1,0,0,107.56L308.87,383A70,70,0,1,0,378,324Z"/></svg>
diff --git a/templates/web/base/icons/warning.html b/templates/web/base/icons/warning.html
new file mode 100644
index 00000000000..df792ceb9e3
--- /dev/null
+++ b/templates/web/base/icons/warning.html
@@ -0,0 +1 @@
+<svg role="presentation" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="[% width || '1rem' %]" height="[% height || '1rem' %]" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0zM11 16v2h2v-2h-2zm0-7v5h2V9h-2z"/></svg>
diff --git a/templates/web/base/report/_back_to_all.html b/templates/web/base/report/_back_to_all.html
index dc386052a5b..25028ce2e18 100644
--- a/templates/web/base/report/_back_to_all.html
+++ b/templates/web/base/report/_back_to_all.html
@@ -1,2 +1,2 @@
 <a href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]"
-    class="problem-back js-back-to-report-list">[% loc('Back to all reports') %]</a>
+    class="problem-back js-back-to-report-list has-inline-svg has-inline-svg--left-align">[% INCLUDE 'icons/chevron-left.html' width='1.5em' height='1.5em' %][% loc('Back to all reports') %]</a>
diff --git a/templates/web/base/report/display.html b/templates/web/base/report/display.html
index ead7f832d76..d0853fe35a6 100644
--- a/templates/web/base/report/display.html
+++ b/templates/web/base/report/display.html
@@ -45,9 +45,6 @@
 [% END %]
 
 [% TRY %][% INCLUDE 'report/_message_manager.html' %][% CATCH file %][% END %]
-[% INCLUDE 'report/display_tools.html' %]
-[% TRY %][% INCLUDE 'report/sharing.html' %][% CATCH file %][% END %]
-[% INCLUDE 'report/updates.html' %]
 
 [% IF problem.duplicate_of %]
     [% INCLUDE 'report/duplicate-no-updates.html' %]
@@ -57,6 +54,10 @@
     [% PROCESS 'report/update-form-wrapper.html' %]
 [% END %]
 
+[% INCLUDE 'report/display_tools.html' %]
+[% TRY %][% INCLUDE 'report/sharing.html' %][% CATCH file %][% END %]
+[% INCLUDE 'report/updates.html' %]
+
   </div>
 
   [% second_column | safe %]
diff --git a/templates/web/base/report/display_tools.html b/templates/web/base/report/display_tools.html
index c6b40e5e7db..b0477b9595d 100644
--- a/templates/web/base/report/display_tools.html
+++ b/templates/web/base/report/display_tools.html
@@ -1,44 +1,46 @@
 <div class="shadow-wrap">
-    <ul id="key-tools">
+    <ul id="key-tools" class="js-key-tools">
       [% IF c.user_exists OR NOT problem.non_public %]
         [% IF c.cobrand.users_can_hide AND relevant_staff_user %]
         <li><form method="post" action="/report/[% problem.id %]/delete" id="remove-from-site-form">
             <input type="hidden" name="token" value="[% csrf_token %]">
-            <button type="submit" id="key-tool-report-abuse" class="abuse" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site">[% loc('Remove from site') %]</button>
+            <button type="submit" id="key-tool-report-abuse" class="has-inline-svg" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site">[% loc('Remove from site') %][% INCLUDE 'icons/warning.html' width='1.5em' height='1.5em' %]</button>
         </form></li>
         [% ELSIF c.cobrand.moniker != 'zurich' %]
-        <li><a rel="nofollow" id="key-tool-report-abuse" class="abuse" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">[%
+        <li><a rel="nofollow" id="key-tool-report-abuse" class="has-inline-svg" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">[%
             c.cobrand.moniker == 'fixmystreet' OR c.cobrand.moniker == 'highwaysengland' ? 'Unsuitable?' : loc('Report abuse')
-        %]</a></li>
+        %][% INCLUDE 'icons/warning.html' width='1.5em' height='1.5em' %]</a></li>
         [% END %]
         [% IF c.cobrand.moniker != 'zurich' %]
-        <li><a rel="nofollow" id="key-tool-report-updates" class="feed" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]">[% loc('Get updates' ) %]</a></li>
+        <li><a rel="nofollow" class="has-inline-svg js-key-tool-report-updates" aria-expanded="false" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]">[% loc('Get updates' ) %][% INCLUDE 'icons/rss.html' width='1.3em' height='1.3em' %]</a></li>
         [% END %]
         [% IF c.cobrand.moniker == 'fixmystreet' %]
-        <li><a rel="nofollow" id="key-tool-report-share" class="share" href="#report-share">[% loc('Share') %]</a></li>
+        <li><a rel="nofollow" class="has-inline-svg js-key-tool-report-share" href="#report-share" aria-expanded="false">[% loc('Share') %][% INCLUDE 'icons/share.html' width='1.5em' height='1.5em' %]</a></li>
         [% END %]
       [% END %]
       [% IF c.cobrand.moniker == 'zurich' %]
-        <li><a class="chevron" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">[% loc( 'Problems on the map' ) %]</a></li>
+        <li><a class="has-inline-svg" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">[% loc( 'Problems on the map' ) %][% INCLUDE 'icons/chevron-right.html' width='1.5em' height='1.5em' %]</a></li>
       [% ELSE %]
-        <li><a class="chevron" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">[% loc( 'Problems nearby' ) %]</a></li>
+        <li><a class="has-inline-svg" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">[% loc( 'Problems nearby' ) %][% INCLUDE 'icons/chevron-right.html' width='1.5em' height='1.5em' %]</a></li>
       [% END %]
     </ul>
 
 [% IF c.cobrand.moniker == 'fixmystreet' %]
-    <div id="report-share" class="hidden-js" align="center">
-        <a class="btn btn--social btn--twitter" href="https://twitter.com/intent/tweet?text=I%20just%20viewed%20this%20report:%20&lsquo;[% problem.title_safe | uri %]&rsquo;&amp;url=[% c.cobrand.base_url | uri %][% c.req.uri.path | uri %]&amp;via=fixmystreet&amp;related=mySociety">
-            <img alt="" src="/i/twitter-icon-32.png" width="17" height="32">
-            Tweet
-        </a>
-        <a class="btn btn--social btn--facebook" href="https://www.facebook.com/sharer/sharer.php?u=[% c.cobrand.base_url %][% c.req.uri.path %]">
-            <img alt="" src="/i/facebook-icon-32.png" width="17" height="32">
-            Share
-        </a>
-    </div>
+  <div id="report-share" class="hidden-js" align="center" role="dialog" aria-modal="true" aria-labelledby="report-share-title">
+    <p id="report-share-title" class="screen-reader-only">Share this report on Twitter or Facebook</p>
+    <a class="btn btn--social btn--twitter" href="https://twitter.com/intent/tweet?text=I%20just%20viewed%20this%20report:%20&lsquo;[% problem.title_safe | uri %]&rsquo;&amp;url=[% c.cobrand.base_url | uri %][% c.req.uri.path | uri %]&amp;via=fixmystreet&amp;related=mySociety">
+      <img alt="" src="/i/twitter-icon-32.png" width="17" height="32">
+      Tweet
+    </a>
+    <a class="btn btn--social btn--facebook" href="https://www.facebook.com/sharer/sharer.php?u=[% c.cobrand.base_url %][% c.req.uri.path %]">
+      <img alt="" src="/i/facebook-icon-32.png" width="17" height="32">
+      Share
+    </a>
+    <button type="button" class="close-drawer screen-reader-only">&#10005; Close</button>
+  </div>
 [% END %]
 
-<div id="report-updates-data" class="hidden-js">
+<div id="report-updates-data" class="hidden-js" role="dialog" aria-modal="true" aria-labelledby="report-updates-data-title">
     [% INCLUDE 'alert/_updates.html' %]
 </div>
 
diff --git a/templates/web/base/report/new/fill_in_details.html b/templates/web/base/report/new/fill_in_details.html
index 7a9a2e3f152..4754e8d44e7 100644
--- a/templates/web/base/report/new/fill_in_details.html
+++ b/templates/web/base/report/new/fill_in_details.html
@@ -42,7 +42,7 @@
   [% END %]
 
             <div id="report-a-problem-main">
-                <a href="#" class="js-back problem-back problem-back--top">[% loc('Back') %]</a>
+                <a href="#" class="js-back problem-back problem-back--top has-inline-svg">[% INCLUDE 'icons/chevron-left.html' width='1.5em' height='1.5em' %][% loc('Back') %]</a>
               [% IF login_success %]
                 [% PROCESS 'report/new/login_success_form.html' %]
               [% ELSIF oauth_need_email %]
diff --git a/templates/web/base/reports/_list-filters.html b/templates/web/base/reports/_list-filters.html
index f11ce2de872..7d2d14ad197 100644
--- a/templates/web/base/reports/_list-filters.html
+++ b/templates/web/base/reports/_list-filters.html
@@ -27,7 +27,7 @@
   [% END %]
 [% END %]
 
-<div class="report-list-filters-wrapper govuk-fieldset-wrapper govuk-small">
+<div id="report-list-filters" class="report-list-filters-wrapper govuk-fieldset-wrapper govuk-small">
 
 [% IF use_form_wrapper %]
     <form method="get" action="">
diff --git a/templates/web/base/reports/_rss.html b/templates/web/base/reports/_rss.html
index 731eef90c6e..614d08353cb 100644
--- a/templates/web/base/reports/_rss.html
+++ b/templates/web/base/reports/_rss.html
@@ -1,6 +1,8 @@
 <div id="key-tools-wrapper" class="shadow-wrap">
     <ul id="key-tools">
-        <li class="feed-list-wrapper"><a rel="nofollow" id="key-tool-updates-area" class="feed" href="[% rss_url %]">[%
+        <li class="feed-list-wrapper">
+            <a rel="nofollow" id="key-tool-updates-area" class="has-inline-svg" href="[% rss_url %]">
+            [%
             SET monikers = ['bromley','hounslow'];
             IF monikers.grep(c.cobrand.moniker).size AND thing == 'council';
                 'Get updates of reports in ' _ c.cobrand.moniker.ucfirst;
@@ -13,12 +15,15 @@
             ELSE;
                 tprintf(loc('Get updates of problems in this %s'), thing);
             END
-        %]</a></li>
+            %]
+            [% INCLUDE 'icons/rss.html' width='1.3em' height='1.3em' %]
+            </a>
+        </li>
         [% IF children.size %]
             [% TRY %]
                 [% INCLUDE 'reports/_rss_other_districts.html' %]
             [% CATCH %]
-                <li><a href="#council_wards" id="key-tool-wards" class="chevron">[% ward_text %]</a></li>
+                <li><a href="#council_wards" id="key-tool-wards" class="has-inline-svg">[% ward_text %][% INCLUDE 'icons/chevron-right.html' width='1.5em' height='1.5em' %]</a></li>
             [% END %]
         [% END %]
     </ul>
diff --git a/templates/web/oxfordshire/reports/_rss_other_districts.html b/templates/web/oxfordshire/reports/_rss_other_districts.html
index ec31f98f677..f41925c650e 100644
--- a/templates/web/oxfordshire/reports/_rss_other_districts.html
+++ b/templates/web/oxfordshire/reports/_rss_other_districts.html
@@ -1,5 +1,5 @@
-<li class="area-report"><a href="#council_wards" id="key-tool-area" class="chevron">View area reports</a></li>
-<li class="sub-area-item"><a href="#council_wards" id="key-tool-division" class="chevron">By division</a></li>
-<li class="sub-area-item"><a href="#council_parishes" id="key-tool-parish" class="chevron">By parish</a></li>
-<li class="sub-area-item"><a href="#council_district_wards" id="key-tool-ward" class="chevron">By ward</a></li>
-<li class="sub-area-item"><a href="#council_districts" id="key-tool-district" class="chevron">By district</a></li>
+<li class="area-report"><a href="#council_wards" id="key-tool-area" class="has-inline-svg">View area reports[% INCLUDE 'icons/chevron-right.html' width='1.5em' height='1.5em' %]</a></li>
+<li class="sub-area-item"><a href="#council_wards" id="key-tool-division" class="has-inline-svg">By division[% INCLUDE 'icons/chevron-right.html' width='1.5em' height='1.5em' %]</a></li>
+<li class="sub-area-item"><a href="#council_parishes" id="key-tool-parish" class="has-inline-svg">By parish[% INCLUDE 'icons/chevron-right.html' width='1.5em' height='1.5em' %]</a></li>
+<li class="sub-area-item"><a href="#council_district_wards" id="key-tool-ward" class="has-inline-svg">By ward[% INCLUDE 'icons/chevron-right.html' width='1.5em' height='1.5em' %]</a></li>
+<li class="sub-area-item"><a href="#council_districts" id="key-tool-district" class="has-inline-svg">By district[% INCLUDE 'icons/chevron-right.html' width='1.5em' height='1.5em' %]</a></li>
diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss
index df1a2d935bd..918d71024b5 100644
--- a/web/cobrands/bromley/base.scss
+++ b/web/cobrands/bromley/base.scss
@@ -135,10 +135,6 @@ a:active {
 #key-tools {
   a, button {
     background-color: darken(#f5f5f5, 10%);
-
-    &:after {
-      background-image: url("/cobrands/bromley/images/report-tools.svg");
-    }
   }
 }
 
diff --git a/web/cobrands/bromley/images/report-tools.svg b/web/cobrands/bromley/images/report-tools.svg
deleted file mode 100644
index d812b350bc8..00000000000
--- a/web/cobrands/bromley/images/report-tools.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="112" height="16" viewBox="0 0 112 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M104 1c.3 0 .6.2.8.4l7 12.3c.2.2.2.6 0 .9 0 .2-.4.4-.7.4H97a.9.9 0 0 1-.8-.4.9.9 0 0 1 0-1l7.1-12.2c.2-.2.5-.4.8-.4zm-1 10.2v2h2v-2h-2zm0-6.1v5h2v-5h-2z" fill="#999" fill-rule="nonzero"/><g transform="translate(81)"><path stroke="#999" stroke-width="2" d="M11 3L3 8l8 5"/><circle fill="#999" cx="11" cy="3" r="3"/><circle fill="#999" cx="3" cy="8" r="3"/><circle fill="#999" cx="11" cy="13" r="3"/></g><path d="M68.8 13.1a1.9 1.9 0 1 1-3.8 0 1.9 1.9 0 0 1 3.8 0zM65 5.8v2.8c3.5 0 6.4 2.9 6.4 6.4h2.8c0-5-4.1-9.2-9.2-9.2zm0-2c6.2 0 11.2 5 11.2 11.2H79A14 14 0 0 0 65 1v2.8zM18 0h6.5L31 8l-6.5 8H18l6.5-8M48 2v6.5L40 15l-8-6.5V2l8 6.5M48 14V7.5L56 1l8 6.5V14l-8-6.5M14 0H7.5L1 8l6.5 8H14L7.5 8" fill="#999" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index d29fead4d17..665a3e1f25a 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -20,28 +20,67 @@ function isR2L() {
     // A sliding drawer from the bottom of the page, small version
     // that doesn't change the main content at all.
     small_drawer: function(id) {
-        var $this = $(this), d = $('#' + id);
+        var $this = $(this), d = $('#' + id),
+        keyboardTriggered = false,
+        previousFocus;
+
+        this.on('keydown', function(e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+                keyboardTriggered = true;
+            }
+        });
+
         this.on('click', function(e) {
             e.preventDefault();
+            previousFocus = $(document.activeElement);
             if (!$this.hasClass('hover')) {
                 if (opened) {
                     opened.trigger('click');
                 }
                 if (!$this.addClass('hover').data('setup')) {
+                    var parentWidth = d.parent().width();
+                    var isMobile = $('html').hasClass('mobile');
+                    var bottomValue = ( $(window).height() - $this.offset().top + 3 ) + 'px';
                     d.hide().removeClass('hidden-js').css({
                     padding: '1em',
-                    background: '#fff'
+                    background: '#fff',
+                    position: 'fixed',
+                    top: isMobile ? '0' : '',
+                    left: '0',
+                    bottom: isMobile ? '' : bottomValue,
+                    'z-index': 9999,
+                    width: isMobile ? '100vw' : parentWidth
                     });
                     $this.data('setup', true);
                 }
-                d.slideDown();
+                d.slideDown(function() {
+                    $this.attr('aria-expanded', 'true');
+                    // We want to focus on first focusable element inside the drawer, but only if the user has use the keyboard. It is a bit odd having this behaviour when using the mouse.
+                    if (keyboardTriggered) {
+                        d.find('a, button, input, select, textarea').first().focus();
+                        keyboardTriggered = false;
+                    }
+                });
                 opened = $this;
             } else {
                 $this.removeClass('hover');
-                d.slideUp();
+                d.slideUp(function() {
+                    $this.attr('aria-expanded', 'false');
+                });
                 opened = null;
             }
         });
+
+        d.on('click', '.close-drawer', function() {
+            $this.removeClass('hover');
+            d.slideUp(function() {
+                $this.attr('aria-expanded', 'false');
+                if (previousFocus) {
+                    previousFocus.focus();
+                }
+            });
+            opened = null;
+        });
     },
 
     // A sliding drawer from the bottom of the page, large version
@@ -98,7 +137,7 @@ function isR2L() {
 
                 // Insert the .shadow-wrap controls into the top of the drawer.
                 $sw.addClass('static').prependTo($drawer);
-                $('#key-tools').addClass('area-js');
+                $('.js-key-tools').addClass('area-js');
                 $('#key-tool-wards').addClass('hover');
 
                 // Animate the drawer into place, enitrely covering the sidebar.
@@ -1395,8 +1434,12 @@ $.extend(fixmystreet.set_up, {
         $('#key-tool-wards').drawer('council_wards', false);
         $('#key-tool-around-updates').drawer('updates_ajax', true);
     }
-    $('#key-tool-report-updates').small_drawer('report-updates-data');
-    $('#key-tool-report-share').small_drawer('report-share');
+    $('.js-key-tool-report-updates').each(function() {
+        $(this).small_drawer('report-updates-data');
+    });
+    $('.js-key-tool-report-share').each(function() {
+        $(this).small_drawer('report-share');
+    });
   },
 
   ward_select_multiple: function() {
diff --git a/web/cobrands/fixmystreet/images/report-tools.svg b/web/cobrands/fixmystreet/images/report-tools.svg
deleted file mode 100644
index 6512fde8a1d..00000000000
--- a/web/cobrands/fixmystreet/images/report-tools.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="112" height="16" viewBox="0 0 112 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M104 1c.3 0 .6.2.8.4l7 12.3c.2.2.2.6 0 .9 0 .2-.4.4-.7.4H97a.9.9 0 0 1-.8-.4.9.9 0 0 1 0-1l7.1-12.2c.2-.2.5-.4.8-.4zm-1 10.2v2h2v-2h-2zm0-6.1v5h2v-5h-2z" fill="#D1D1D1" fill-rule="nonzero"/><g transform="translate(81)"><path stroke="#D1D1D1" stroke-width="2" d="M11 3L3 8l8 5"/><circle fill="#D1D1D1" cx="11" cy="3" r="3"/><circle fill="#D1D1D1" cx="3" cy="8" r="3"/><circle fill="#D1D1D1" cx="11" cy="13" r="3"/></g><path d="M68.8 13.1a1.9 1.9 0 1 1-3.8 0 1.9 1.9 0 0 1 3.8 0zM65 5.8v2.8c3.5 0 6.4 2.9 6.4 6.4h2.8c0-5-4.1-9.2-9.2-9.2zm0-2c6.2 0 11.2 5 11.2 11.2H79A14 14 0 0 0 65 1v2.8zM18 0h6.5L31 8l-6.5 8H18l6.5-8M48 2v6.5L40 15l-8-6.5V2l8 6.5m8 5.5V7.5L56 1l8 6.5V14l-8-6.5M14 0H7.5L1 8l6.5 8H14L7.5 8" fill="#D1D1D1" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index 4ae2f714252..cf7f4f09630 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -323,7 +323,6 @@ textarea {
 
     a,
     button {
-      display: block;
       background-color: #f5f5f5;
       background-repeat: no-repeat;
       color: #333 !important;
@@ -342,34 +341,6 @@ textarea {
         background-color: #333;
         color: #fff !important;
       }
-
-      &:after {
-        content: "";
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        margin-#{$left}: 0.5em;
-        vertical-align: -0.25em;
-        background-size: 112px 16px;
-        background-repeat: no-repeat;
-        background-image: url("/cobrands/fixmystreet/images/report-tools.svg");
-      }
-
-      &.abuse:after {
-        background-position: -96px 0;
-      }
-
-      &.feed:after {
-        background-position: -64px 0;
-      }
-
-      &.share:after {
-        background-position: -80px 0;
-      }
-
-      &.chevron:after {
-        background-position: flip(-16px 0, 0 0);
-      }
     }
 
     .sub-area-item {
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 6c0bfa95411..bc853a9554e 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -936,19 +936,15 @@ html.mobile.js-nav-open #js-menu-open-modal {
 #key-tools {
   @include list-reset-soft;
   margin-bottom: 1em;
-  display: table;
+  padding: 0 1em;
+  display: flex;
+  flex-direction: row;
+  gap: 0.25rem;
+  box-sizing: border-box;
   width: 100%;
 
   li {
-    display: table-cell;
-    vertical-align: bottom;
-    text-align: center;
-    border-#{$right}: 0.25em solid #fff;
-
-    &:last-child {
-      border-#{$right}: none;
-    }
-
+    flex: 1;
     &.hidden-js {
       display: none;
       visibility: hidden;
@@ -962,17 +958,22 @@ html.mobile.js-nav-open #js-menu-open-modal {
 
   a,
   button {
-    display: block;
+    display: flex;
+    flex-direction: column-reverse;
+    border-radius:4px;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    height: 100%;
     background-color: #f5f5f5;
     background-repeat: no-repeat;
     color: #333 !important;
-    padding: 1em;
+    padding: 1em 0.5em;
     font-size: 0.6875em;
     font-family: $meta-font;
     font-weight: normal;
     line-height: 1.2em;
-    white-space: normal;
-    border-radius: 0;
+    // Prevents elements with more than two words to break into multiple lines
+    white-space: nowrap;
 
     &:hover,
     &.hover,
@@ -982,34 +983,6 @@ html.mobile.js-nav-open #js-menu-open-modal {
       color: #fff !important;
     }
 
-    &:after {
-      content: "";
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      margin-#{$left}: 0.5em;
-      vertical-align: -0.25em;
-      background-size: 112px 16px;
-      background-repeat: no-repeat;
-      background-image: url("/cobrands/fixmystreet/images/report-tools.svg");
-    }
-
-    &.abuse:after {
-      background-position: -96px 0;
-    }
-
-    &.feed:after {
-      background-position: -64px 0;
-    }
-
-    &.share:after {
-      background-position: -80px 0;
-    }
-
-    &.chevron:after {
-      background-position: flip(-16px 0, 0 0);
-    }
-
     &.offline:after {
       background-size: 16px 16px;
       background-position: 0 0;
@@ -1032,7 +1005,25 @@ html.mobile.js-nav-open #js-menu-open-modal {
   }
 }
 
+.has-inline-svg {
+  display: flex;
+  flex-direction: row;
+  gap: 0.25rem;
+  align-items: center;
+  justify-content: center;
+
+  &.has-inline-svg--left-align {
+    justify-content: left;
+  }
+
+  &.has-inline-svg--column-wrap {
+    flex-direction: column;
+  }
+}
+
 #report-updates-data {
+  box-sizing: border-box;
+  box-shadow: 0px 10px 5px 2px rgba(0,0,0,0.15);
   img {
     float: $right;
   }
@@ -1044,6 +1035,8 @@ html.mobile.js-nav-open #js-menu-open-modal {
 }
 
 #report-share {
+  box-sizing: border-box;
+  box-shadow: 0px 10px 5px 2px rgba(0,0,0,0.15);
   .btn {
     padding-#{$left}: 1.5em;
     padding-#{$right}: 1.5em;
@@ -1833,7 +1826,6 @@ input.final-submit {
 }
 
 .problem-back {
-  display: block;
   font-size: 1em;
   line-height: 1.2em;
   margin: -1em -1em 1em -1em;
@@ -1845,20 +1837,8 @@ input.final-submit {
   &:hover {
     color: #666;
   }
-
-  &:before {
-    content: "";
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    margin-#{$right}: 0.5em;
-    vertical-align: -0.15em;
-    background-size: 112px 16px;
-    background-repeat: no-repeat;
-    background-image: url("/cobrands/fixmystreet/images/report-tools.svg");
-    background-position: flip(0 0, -16px 0);
-  }
 }
+
 .problem-back--top {
     margin-top: 0;
 }
@@ -2273,11 +2253,6 @@ html.js #map .noscript {
     width: 50%;
   }
 
-  .feed:after {
-    @extend %sub-map-link-icon;
-    background-position: -12px 0;
-  }
-
   #fms_shortlist_all:after {
     @extend %sub-map-link-icon;
     background-position: -60px 0;
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 1721db13faf..04ea95f1100 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -661,29 +661,39 @@ body.authpage {
 
 // Wraps around #key-tools box - sticks to the bottom of the screen on desktop
 .shadow-wrap {
-  position: fixed;
-  z-index: 10; //this is just to ensure anythign inside .content that has position set goes sites it
-  bottom: 0;
-  #{$left}: 0;
   margin: 0;
   width: $mappage-sidebar-width;
   overflow: hidden;
   padding-top: 2em;
-
+  
   &.static {
     padding: 0 0 1em;
     margin: 0 -1em; // overlap parent side padding
     position: static;
     width: auto; // avoid horizontal scrollbar as drawer opens (on devices with permanent scroll bars)
   }
+  
+  .js & {
+    // If JS is not available then shadow wrap position will be static and won't cover any other content on the page.
+    position: fixed;
+    z-index: 10; //this is just to ensure anything inside .content that has position set goes sites it
+    bottom: 0;
+    #{$left}: 0;
+  }
 }
 
 #key-tools {
   border-top: 0.25em solid $primary;
   margin: 0;
   box-shadow: 0 0 1em 1em #fff;
+  padding: unset;
+
+  html.js & {
+    display: table;
+  }
 
   li {
+    display: table-cell;
     border-#{$right}: none; // undo border-right/left from _base.scss
 
     // Cancel centre alignment, if the *only child* in list.
@@ -693,17 +703,21 @@ body.authpage {
   }
 
   a, button {
+    flex-direction: row;
     font-size: 0.75em;
     line-height: 18px; // match `body`
     color: #666;
     padding: 0.5em;
     text-transform: none; // undo uppercase from _base.scss
+    border-radius: 0;
+    border: unset;
   }
 }
 
 // If JS is disabled, these are still CSS positioned, so don't want behind shining through.
 #report-share, #report-updates-data {
     background-color: #fff;
+    box-shadow: 0px -10px 5px -1px rgba(0,0,0,0.15);
 }
 // Prevent gap in non-JS, and looks better with JS, due to some padding/margin effect.
 #report-updates-data fieldset {


Reviews:
user: login: dracos
body: Looks good, thanks for tidying and making all those changes :) I think the display_tools_mobile template can include the other SVG templates you changed the main template to use, and I had one question about when the buttons are hidden on mobile.
The browser tests fail a lot, I assume due to where things have moved to so that will need looking at, I can take a look at some of them if time later today.
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-04-10T10:59:44Z
user: login: dracos
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-10T12:46:53Z
user: login: dracos
body: Oh great, that's much nicer/simpler, isn't it! :)
I've rebased and added a line to the changelog, and tidied up the cypress tests (as they don't need changing now there's only one key tools again).
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-29T13:57:15Z

Review comments:
diff_hunk: @@ -1032,7 +1001,43 @@ html.mobile.js-nav-open #js-menu-open-modal {
   }
 }
 
+#key-tools-mobile {
+  padding: 0 1em;
+  li {
+    flex: 1;
+
+    a, button {
+      border-radius:4px;
+      border: 1px solid #ccc;
+    }
+  }
+}
+
+#key-tools {
+  html.js & {
+    display: none;
path: web/cobrands/sass/_base.scss
user: login: dracos
body: Why are the desktop buttons only hidden if JS is enabled? It means both sets of buttons are shown if JS isn't working - is there an issue with always hiding them, does something go wrong?
created_at: 2025-04-10T10:53:27Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,43 @@
+<div class="shadow-wrap">
+    <ul id="key-tools-mobile" class="js-key-tools">
+      [% IF c.user_exists OR NOT problem.non_public %]
+        [% IF c.cobrand.users_can_hide AND relevant_staff_user %]
+        <li><form method="post" action="/report/[% problem.id %]/delete" id="remove-from-site-form">
+            <input type="hidden" name="token" value="[% csrf_token %]">
+            <button type="submit" id="key-tool-report-abuse" class="has-inline-svg has-inline-svg--column-wrap" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site">
+              <svg role="presentation" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0zM11 16v2h2v-2h-2zm0-7v5h2V9h-2z"/></svg>
path: templates/web/base/report/display_tools_mobile.html
user: login: dracos
body: This template could use the same icons/ templates I think? The contents of the SVGs look the same.
created_at: 2025-04-10T10:56:28Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,43 @@
+<div class="shadow-wrap">
+    <ul id="key-tools-mobile" class="js-key-tools">
+      [% IF c.user_exists OR NOT problem.non_public %]
+        [% IF c.cobrand.users_can_hide AND relevant_staff_user %]
+        <li><form method="post" action="/report/[% problem.id %]/delete" id="remove-from-site-form">
+            <input type="hidden" name="token" value="[% csrf_token %]">
+            <button type="submit" id="key-tool-report-abuse" class="has-inline-svg has-inline-svg--column-wrap" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site">
+              <svg role="presentation" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0zM11 16v2h2v-2h-2zm0-7v5h2V9h-2z"/></svg>
path: templates/web/base/report/display_tools_mobile.html
user: login: dracos
body: (Then, if all that's different then is the order of the text and the SVG, can flex order fix that? Then they could share more of the same template for the list items themselves.)
created_at: 2025-04-10T10:57:46Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,43 @@
+<div class="shadow-wrap">
path: templates/web/base/report/display_tools_mobile.html
user: login: dracos
body: Sorry, one more thing - this file has some IDs in that are duplicating the ones in display_tools.html. I see you fixed the ones that you were then using in the JS, but the others will need fixing too - e.g. key-tool-report-abuse (not used at all, can be removed), key-tool-problems-nearby (does have some uses), and remove-from-site-form (not needed at all?)
created_at: 2025-04-10T12:46:53Z
author_association: MEMBER

PR comments:
user: login: codecov[bot]
created_at: 2025-02-05T10:01:49Z
body: ## [Codecov](https://app.codecov.io/gh/mysociety/fixmystreet/pull/5354?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mysociety) Report
Attention: Patch coverage is `64.28571%` with `10 lines` in your changes missing coverage. Please review.
> Project coverage is 82.39%. Comparing base [(`193441f`)](https://app.codecov.io/gh/mysociety/fixmystreet/commit/193441f2c011c16868825680bff5489c28a5c25c?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mysociety) to head [(`eb11a4f`)](https://app.codecov.io/gh/mysociety/fixmystreet/commit/eb11a4f37694101dbe22dd9cd8286bb5b304973e?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mysociety).
> Report is 4 commits behind head on master.

| [Files with missing lines](https://app.codecov.io/gh/mysociety/fixmystreet/pull/5354?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mysociety) | Patch % | Lines |
|---|---|---|
| [web/cobrands/fixmystreet/fixmystreet.js](https://app.codecov.io/gh/mysociety/fixmystreet/pull/5354?src=pr&el=tree&filepath=web%2Fcobrands%2Ffixmystreet%2Ffixmystreet.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mysociety#diff-d2ViL2NvYnJhbmRzL2ZpeG15c3RyZWV0L2ZpeG15c3RyZWV0Lmpz) | 64.28% | [10 Missing :warning: ](https://app.codecov.io/gh/mysociety/fixmystreet/pull/5354?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mysociety) |

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##           master    #5354      +/-   ##
==========================================
- Coverage   82.40%   82.39%   -0.01%     
==========================================
  Files         431      431              
  Lines       34185    34207      +22     
  Branches     5526     5526              
==========================================
+ Hits        28170    28185      +15     
- Misses       4369     4376       +7     
  Partials     1646     1646              
```

</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/mysociety/fixmystreet/pull/5354?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mysociety).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mysociety).

<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
author_association: NONE
user: login: lucascumsille
created_at: 2025-02-05T10:21:31Z
body: A couple of notes from the previous PR:
https://github.com/mysociety/fixmystreet/pull/5208

```
if ($('#key-tools-mobile a.js-feed').length) {
```
>This change shouldn't be made - the js-feed is still in key-tools on any page it is used (not a report page), and needs to moved from there to sub_map_links.
And I'm afraid that sub_map_links uses a background image, so you then end up with two RSS feed icons being shown.
https://github.com/mysociety/fixmystreet/pull/5208#discussion_r1846522253

I solved this issue in this PR. See here:

<img width="372" alt="Screenshot 2025-02-05 at 10 18 22" src="https://github.com/user-attachments/assets/e6d83ce5-eec7-4aec-a402-5bdf8bf96733" />


author_association: CONTRIBUTOR
user: login: lucascumsille
created_at: 2025-02-06T07:21:19Z
body: @dracos I made the changes requested in[ #5208](https://github.com/mysociety/fixmystreet/pull/5208#pullrequestreview-2442477120) so I split the commits into 4:

>1.A commit to switch from external to inline SVGs, no other changes (that would also involve e.g. fixing the issue where the Feed link is moved to sub_map_links).
2.A commit to add the close button to the small drawer (and anything else related to that, but nothing more).
3.The skip button on around page if needed.
4.Changes to have a separate key-tools for desktop than mobile (fixing the issue with placement, not working for non-staff, etc)

In the review I included the latest comments you left in #5208 
author_association: CONTRIBUTOR
user: login: lizettal
created_at: 2025-04-08T12:05:34Z
body: @dracos I think this is still with you for review. Could you please review this before you go on leave so we can try and get this wrapped up in the coming sprint.
author_association: CONTRIBUTOR
user: login: dracos
created_at: 2025-04-10T12:53:47Z
body: I've hopefully patched the commit so that the Cypress tests are passing again (they were getting confused now there were two key tools blocks in the source). So just the small issues above :)
author_association: MEMBER
user: login: lucascumsille
created_at: 2025-04-29T05:50:59Z
body: @dracos on my latest commits I tackled all the issues above:

> (Then, if all that's different then is the order of the text and the SVG, can flex order fix that? Then they could share more of the same template for the list items themselves.)
 
I ended up getting rid of the `display_tool_mobile.html` considering that is pretty similar to `display_tool`. `flex-direction` did the trick =)

The above would also fix:

>  IDs in that are duplicating
> This template could use the same icons/ templates
> desktop buttons only hidden if JS is enabled

Let me know if you are happy with those changes =)



author_association: CONTRIBUTOR
user: login: lucascumsille
created_at: 2025-04-29T14:07:27Z
body: Definitely, It's much better. Thanks for your help Matthew 🙌
author_association: CONTRIBUTOR
user: login: dracos
created_at: 2025-05-15T09:16:01Z
body: Sorry, not sure how I missed this, or if it got introduced later on this has completely changed the layout of the update on a report page. The update form is now appearing above all the updates, rather than at the bottom as it used to be? I don't think this was mentioned or a desired change of this PR, which is now much more confusing in terms of getting a form for an update before you've seen the previous updates. It's changed the reading order, rather than made the source order match the visual order.
author_association: MEMBER