Added accessibility changes to small_drawer

- Added aria-expanded. - Increase visibility of the drawer on mobile by moving it to the top of the screen. - Added close button to drawer. - If drawer is opened using keyboard then the focus jumps to the first element inside the drawer.
mysociety · Feb 4, 2025 · 0516828 · 0516828
1 parent 444a9e3
commit 0516828
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 26 deletions.
diff --git 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/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
@@ -1,5 +1,5 @@
 <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">
@@ -12,10 +12,10 @@
         %][% 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="has-inline-svg" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]">[% loc('Get updates' ) %][% INCLUDE 'icons/rss.html' width='1.3em' height='1.3em' %]</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="has-inline-svg" href="#report-share">[% loc('Share') %][% INCLUDE 'icons/share.html' width='1.5em' height='1.5em' %]</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' %]
@@ -26,19 +26,21 @@
     </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 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/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.
@@ -1361,8 +1400,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/sass/_base.scss b/web/cobrands/sass/_base.scss
@@ -1020,6 +1020,8 @@ html.mobile.js-nav-open #js-menu-open-modal {
 }
 
 #report-updates-data {
+  box-sizing: border-box;
+  box-shadow: 0px 10px 5px 2px rgba(0,0,0,0.15);
   img {
     float: $right;
   }
@@ -1031,6 +1033,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;

diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
@@ -704,6 +704,7 @@ body.authpage {
 // 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 {