Improve meaningful sequence in report/around page

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 %]

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>

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>

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

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>

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>

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>

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>

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>

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>

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>

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>

templates/web/base/report/display.html

@@ -45,9 +45,7 @@
 [% 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' %]
+[% INCLUDE 'report/display_tools_mobile.html' %]
 
 [% IF problem.duplicate_of %]
     [% INCLUDE 'report/duplicate-no-updates.html' %]
@@ -57,6 +55,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 %]

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' ? '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>
 

templates/web/base/report/display_tools_mobile.html

@@ -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>
+              [% loc('Remove from site') %]
+            </button>
+        </form></li>
+        [% ELSIF c.cobrand.moniker != 'zurich' %]
+        <li><a rel="nofollow" id="key-tool-report-abuse" class="has-inline-svg has-inline-svg--column-wrap" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">
+          <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>
+          [% c.cobrand.moniker == 'fixmystreet' ? 'Unsuitable?' : loc('Report abuse') %] 
+        </a></li>
+        [% END %]
+        [% IF c.cobrand.moniker != 'zurich' %]
+        <li><a rel="nofollow" class="js-key-tool-report-updates has-inline-svg has-inline-svg--column-wrap" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]" aria-expanded="false">
+          <svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" 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>
+          [% loc('Get updates' ) %]
+        </a></li>
+        [% END %]
+        [% IF c.cobrand.moniker == 'fixmystreet' %]
+        <li><a rel="nofollow" class="js-key-tool-report-share has-inline-svg has-inline-svg--column-wrap" href="#report-share" aria-expanded="false">
+          <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" 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>
+          [% loc('Share') %]
+        </a></li>
+        [% END %]
+      [% END %]
+      [% IF c.cobrand.moniker == 'zurich' %]
+        <li><a class="has-inline-svg has-inline-svg--column-wrap" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">
+          <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" 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>
+          [% loc( 'Problems on the map' ) %]
+        </a></li>
+      [% ELSE %]
+        <li><a class="has-inline-svg has-inline-svg--column-wrap" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">
+          <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" 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>
+          [% loc( 'Problems nearby' ) %]
+        </a></li>
+      [% END %]
+    </ul>
+</div>

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 %]

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="">

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>

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>

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");
-    }
   }
 }