Merge pull request #4456 from fecgov/feature/aria-fixes-for-search-ty…

…peahead-mobilemenu ARIA/accessibility fixes for mobile menu and search/typeahead
fecgov · Mar 16, 2021 · f24025c · f24025c
2 parents d79e1c5 + 23e7b06
commit f24025c
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 45 deletions.
diff --git a/fec/data/templates/layouts/main.jinja b/fec/data/templates/layouts/main.jinja
@@ -86,6 +86,7 @@
             <input type="hidden" name="type" value="committees">
             <input type="hidden" name="type" value="site">
             <label class="u-visually-hidden" for="query">Search</label>
+             <div class="combo combo--search">
             <input
               class="js-site-search combo__input"
               autocomplete="off"
@@ -96,6 +97,7 @@
             <button type="submit" class="button--standard combo__button button--search">
               <span class="u-visually-hidden">Search</span>
             </button>
+           </div>
           </form>
         </li>
       </ul>

diff --git a/fec/fec/static/js/modules/dropdowns.js b/fec/fec/static/js/modules/dropdowns.js
@@ -2,6 +2,7 @@
 
 var $ = require('jquery');
 require('perfect-scrollbar/jquery')($);
+const accessibility = require('./accessibility');
 
 var listeners = require('./listeners');
 
@@ -84,6 +85,7 @@ Dropdown.prototype.toggle = function(e) {
 };
 
 Dropdown.prototype.show = function() {
+  accessibility.restoreTabindex(this.$panel);
   this.$panel.attr('aria-hidden', 'false');
   this.$panel.perfectScrollbar({ suppressScrollX: true });
   this.$panel.find('input[type="checkbox"]:first').focus();
@@ -92,6 +94,7 @@ Dropdown.prototype.show = function() {
 };
 
 Dropdown.prototype.hide = function() {
+  accessibility.removeTabindex(this.$panel);
   this.$panel.attr('aria-hidden', 'true');
   this.$button.removeClass('is-active');
   this.isOpen = false;

diff --git a/fec/fec/static/js/modules/filters/filter-typeahead.js b/fec/fec/static/js/modules/filters/filter-typeahead.js
@@ -88,6 +88,8 @@ FilterTypeahead.prototype.typeaheadInit = function() {
   }
 
   this.$elm.find('.tt-menu').attr('aria-live', 'polite');
+  this.$elm.find('.tt-input').removeAttr('aria-readonly');
+  this.$elm.find('.tt-input').attr('aria-expanded', 'false');
 };
 
 FilterTypeahead.prototype.setFirstItem = function() {
@@ -98,6 +100,7 @@ FilterTypeahead.prototype.setFirstItem = function() {
   $(this.$elm.find('.tt-suggestion')[0]).addClass('tt-cursor');
   if (this.$elm.find('.tt-suggestion').length > 0) {
     this.enableButton();
+    this.$field.attr('aria-expanded', 'true');
   }
 };
 
@@ -122,6 +125,12 @@ FilterTypeahead.prototype.handleAutocomplete = function(e, datum) {
 FilterTypeahead.prototype.handleKeypress = function(e) {
   this.handleChange();
 
+  if (this.$elm.find('.tt-suggestion').length > 0) {
+    this.$field.attr('aria-expanded', 'true');
+  } else {
+    this.$field.attr('aria-expanded', 'false');
+  }
+
   if (e.keyCode === 13) {
     this.handleSubmit(e);
   }

diff --git a/fec/fec/static/js/modules/site-nav.js b/fec/fec/static/js/modules/site-nav.js
@@ -2,6 +2,7 @@
 
 var $ = require('jquery');
 var helpers = require('./helpers');
+const accessibility = require('./accessibility');
 
 window.$ = window.jQuery = $;
 
@@ -20,13 +21,24 @@ function SiteNav(selector) {
   this.$element = $(selector);
   this.$menu = this.$element.find('#site-menu');
   this.$toggle = this.$element.find('.js-nav-toggle');
+  this.$searchbox = this.$body.find('.utility-nav__search');
 
   this.assignAria();
 
   this.initMenu();
 
   // Open and close the menu on mobile
   this.$toggle.on('click', this.toggleMenu.bind(this));
+
+  /*matchMedia is used belowto ensure searchbox is appended to correct location when 
+  user resizes screen while mobile menu is open */
+
+  //Define min-width media query that matches our med('mobile') breakpoint
+  const mql = window.matchMedia('screen and (min-width: 860px)');
+  // call listener function explicitly at run time
+  this.mediaQueryResponse(mql);
+  // attach listener function to listen for change in mediaQuery list
+  mql.addListener(this.mediaQueryResponse);
 }
 
 SiteNav.prototype.initMenu = function() {
@@ -66,6 +78,28 @@ SiteNav.prototype.assignAria = function() {
   if (helpers.getWindowWidth() < helpers.BREAKPOINTS.LARGE) {
     this.$toggle.attr('aria-haspopup', true);
     this.$menu.attr('aria-hidden', true);
+    accessibility.removeTabindex(this.$menu);
+  }
+};
+
+//Append searchbox to correct location uponn user screen resize
+SiteNav.prototype.mediaQueryResponse = function(mql) {
+  //If large
+  if (mql.matches) {
+    $('body')
+      .find('.utility-nav__search')
+      .appendTo('.utility-nav.list--flat');
+  }
+  //if mobile
+  else {
+    $('body')
+      .find('.utility-nav__search')
+      .prependTo('.site-nav__panel');
+    if ($('.js-site-nav').hasClass('is-open')) {
+      accessibility.restoreTabindex($('.utility-nav__search'));
+    } else {
+      accessibility.removeTabindex($('.utility-nav__search'));
+    }
   }
 };
 
@@ -81,6 +115,10 @@ SiteNav.prototype.showMenu = function() {
   this.$element.addClass('is-open');
   this.$toggle.addClass('active');
   this.$menu.attr('aria-hidden', false);
+  //append seacrh to mobile menu uponn opening
+  $('.site-nav__panel').prepend(this.$searchbox);
+  accessibility.restoreTabindex(this.$menu);
+
   this.isOpen = true;
 };
 
@@ -91,6 +129,10 @@ SiteNav.prototype.hideMenu = function() {
   this.$element.removeClass('is-open');
   this.$toggle.removeClass('active');
   this.$menu.attr('aria-hidden', true);
+  //append search to header
+  $('.utility-nav.list--flat').prepend(this.$searchbox);
+  accessibility.removeTabindex(this.$menu);
+
   this.isOpen = false;
   if (this.isMobile) {
     this.$element.find('[aria-hidden=false]').attr('aria-hidden', true);

diff --git a/fec/fec/static/js/modules/typeahead.js b/fec/fec/static/js/modules/typeahead.js
@@ -273,6 +273,8 @@ function Typeahead(selector, type, url) {
   this.init();
 
   events.on('searchTypeChanged', this.handleChangeEvent.bind(this));
+
+  this.$input.on('keyup', this.setAria.bind(this));
 }
 
 Typeahead.prototype.init = function() {
@@ -283,13 +285,24 @@ Typeahead.prototype.init = function() {
   this.$element = this.$input.parent('.twitter-typeahead');
   this.$element.css('display', 'block');
   this.$element.find('.tt-menu').attr('aria-live', 'polite');
+  this.$element.find('.tt-input').removeAttr('aria-readonly');
+  this.$element.find('.tt-input').attr('aria-expanded', 'false');
   this.$input.on('typeahead:select', this.select.bind(this));
 };
 
 Typeahead.prototype.handleChangeEvent = function(data) {
   this.init(data.type);
 };
 
+Typeahead.prototype.setAria = function() {
+  if (this.$element.find('.tt-menu').attr('aria-expanded') == 'false') {
+    this.$element.find('.tt-input').attr('aria-expanded', 'false');
+  } else {
+    this.$element.find('.tt-input').attr('aria-expanded', 'true');
+  }
+  //alert('closed')
+};
+
 Typeahead.prototype.select = function(event, datum) {
   if (datum.type === 'individual') {
     window.location =

diff --git a/fec/fec/static/scss/components/_nav.scss b/fec/fec/static/scss/components/_nav.scss
@@ -266,18 +266,18 @@
   }
 }
 
-.mobile-search.utility-nav__search {
-  width: u(30rem);
-  padding: u(1rem);
-  display: block;
+.utility-nav__search {
+  /*width: u(30rem);*/
+  padding: 0 u(1rem);
+/*  display: block;*/
  }
 
-
+/*
 @include media($lg) {
   .mobile-search.utility-nav__search {
     display: none;
   }
-}
+}*/
 
 
 // Grid overhaul, using _grid.scss breakpoints but Bootstrap naming as inspiration,

diff --git a/fec/fec/templates/base.html b/fec/fec/templates/base.html
@@ -53,16 +53,20 @@ <h2 style="color: #ffffff">Your browser is outdated</h2>
               <input type="hidden" name="type" value="committees">
               <input type="hidden" name="type" value="site">
               <label class="u-visually-hidden" for="query">Search</label>
-              <input
-                class="js-site-search combo__input"
-                autocomplete="off"
-                id="query"
-                name="query"
-                type="text"
-                aria-label="Search FEC.gov">
-              <button type="submit" class="button--standard combo__button button--search">
-                <span class="u-visually-hidden">Search</span>
-              </button>
+              <div class="combo combo--search">
+                <input
+                  class="js-site-search combo__input"
+                  autocomplete="off"
+                  aria-expanded="false"
+                  aria-controls="query_listbox"
+                  id="query"
+                  name="query"
+                  type="text"
+                  aria-label="Search FEC.gov">
+                <button type="submit" class="button--standard combo__button button--search">
+                  <span class="u-visually-hidden">Search</span>
+                </button>
+              </div>
             </form>
           </li>
         </ul>
@@ -76,23 +80,27 @@ <h2 style="color: #ffffff">Your browser is outdated</h2>
         <a title="Home" href="/" class="site-title" rel="home"><span class="u-visually-hidden">Federal Election Commission | United States of America</span></a>
         <ul class="utility-nav list--flat">
           <li class="utility-nav__item{% if self.content_section == 'calendar' %} is-active{% endif %}"><a href="/calendar/">Calendar</a></li>
-          <li class="utility-nav__item"><a class="js-glossary-toggle glossary__toggle">Glossary</a></li>
+           <li class="utility-nav__item"><a class="js-glossary-toggle glossary__toggle">Glossary</a></li>
           <li class="utility-nav__search">
             <form accept-charset="UTF-8" action="/search" id="search_form" class="combo" method="get" role="search">
               <input type="hidden" name="type" value="candidates">
               <input type="hidden" name="type" value="committees">
               <input type="hidden" name="type" value="site">
               <label class="u-visually-hidden" for="query">Search</label>
-              <input
-                class="js-site-search combo__input"
-                autocomplete="off"
-                id="query"
-                name="query"
-                type="text"
-                aria-label="Search FEC.gov">
-              <button type="submit" class="button--standard combo__button button--search">
-                <span class="u-visually-hidden">Search</span>
-              </button>
+              <div class="combo combo--search">
+                <input
+                  class="js-site-search combo__input"
+                  autocomplete="off"
+                  aria-expanded="false"
+                  aria-controls="query_listbox"
+                  id="query"
+                  name="query"
+                  type="text"
+                  aria-label="Search FEC.gov">
+                <button type="submit" class="button--standard combo__button button--search">
+                  <span class="u-visually-hidden">Search</span>
+                </button>
+              </div>
             </form>
           </li>
         </ul>

diff --git a/fec/fec/templates/home_base.html b/fec/fec/templates/home_base.html
@@ -52,16 +52,19 @@ <h2 style="color: #ffffff">Your browser is outdated</h2>
               <input type="hidden" name="type" value="committees">
               <input type="hidden" name="type" value="site">
               <label class="u-visually-hidden" for="query">Search</label>
-              <input
-                class="js-site-search combo__input"
-                autocomplete="off"
-                id="query"
-                name="query"
-                type="text"
-                aria-label="Search FEC.gov">
-              <button type="submit" class="button--standard combo__button button--search">
-                <span class="u-visually-hidden">Search</span>
-              </button>
+              <div class="combo combo--search">
+                <input
+                  class="js-site-search combo__input"
+                  autocomplete="off"
+                  aria-controls="query_listbox"
+                  id="query"
+                  name="query"
+                  type="text"
+                  aria-label="Search FEC.gov">
+                <button type="submit" class="button--standard combo__button button--search">
+                  <span class="u-visually-hidden">Search</span>
+                </button>
+              </div>
             </form>
           </li>
         </ul>
@@ -82,6 +85,7 @@ <h2 style="color: #ffffff">Your browser is outdated</h2>
               <input type="hidden" name="type" value="committees">
               <input type="hidden" name="type" value="site">
               <label class="u-visually-hidden" for="query">Search</label>
+              <div class="combo combo--search">
               <input
                 class="js-site-search combo__input"
                 autocomplete="off"
@@ -92,7 +96,8 @@ <h2 style="color: #ffffff">Your browser is outdated</h2>
               <button type="submit" class="button--standard combo__button button--search">
                 <span class="u-visually-hidden">Search</span>
               </button>
-            </form>
+            </div>
+           </form>
           </li>
         </ul>
       </div>

diff --git a/fec/fec/templates/partials/navigation/navigation.html b/fec/fec/templates/partials/navigation/navigation.html
@@ -1,7 +1,8 @@
 <nav class="site-nav js-site-nav">
+ <button class="js-nav-toggle site-nav__button" aria-controls="site-menu">Menu</button>
   <div id="site-menu" class="site-nav__container">
     <ul class="site-nav__panel site-nav__panel--main">
-      <li class="mobile-search utility-nav__search">
+      <!-- <li class="mobile-search utility-nav__search">
         <form accept-charset="UTF-8" action="/search" id="search_form" class="combo" method="get" role="search">
           <input type="hidden" name="type" value="candidates">
           <input type="hidden" name="type" value="committees">
@@ -20,41 +21,40 @@
             </button>
          </div>
         </form>
-      </li>
+      </li> -->
       <li><h2 class="site-nav__title u-under-lg-only">Menu</h2></li>
       <li class="site-nav__item u-under-lg-only">
         <a class="site-nav__link" href="/" rel="home">
           <span class="site-nav__link__title">Home</span>
         </a>
       </li>
       <li class="site-nav__item" data-submenu="data">
-        <a class="site-nav__link {% if self.content_section == 'data' or parent == 'data' %}is-parent{% endif %}" href="/data/" tabindex="0">
+        <a class="site-nav__link {% if self.content_section == 'data' or parent == 'data' %}is-parent{% endif %}" href="/data/" >
           <span class="site-nav__link__title">
           Campaign finance data</span>
         </a>
         {% include 'partials/navigation/nav-data.html' %}
       </li>
       <li class="site-nav__item site-nav__item--secondary" data-submenu="help">
-        <a href="/help-candidates-and-committees/" tabindex="0" class="site-nav__link {% if self.content_section == 'help' %}is-parent{% endif %}">
+        <a href="/help-candidates-and-committees/" class="site-nav__link {% if self.content_section == 'help' %}is-parent{% endif %}">
           <span class="site-nav__link__title">Help for candidates and committees</span>
         </a>
         {% include 'partials/navigation/nav-help.html' %}
       </li>
       <li class="site-nav__item" data-submenu="legal">
-        <a href="/legal-resources/" tabindex="0" class="site-nav__link {% if self.content_section == 'legal' or parent == 'legal' %}is-parent{% endif %}">
+        <a href="/legal-resources/" class="site-nav__link {% if self.content_section == 'legal' or parent == 'legal' %}is-parent{% endif %}">
           <span class="site-nav__link__title">Legal resources</span>
         </a>
         {% include 'partials/navigation/nav-legal.html' %}
       </li>
       <li class="site-nav__item site-nav__item--secondary" data-submenu="about">
-        <a href="/about/" tabindex="0" class="site-nav__link {% if self.content_section == 'about' %}is-parent{% endif %}">
+        <a href="/about/" class="site-nav__link {% if self.content_section == 'about' %}is-parent{% endif %}">
           <span class="site-nav__link__title">About</span>
         </a>
         {% include 'partials/navigation/nav-about.html' %}
       </li>
 
     </ul>
   </div>
-  <button class="js-nav-toggle site-nav__button" aria-controls="site-menu">Menu</button>
   <a title="Home" href="/" class="site-title"><span class="u-visually-hidden">Federal Election Commission | United States of America</span></a>
 </nav>