V3 toggle menu aria label

.nvmrc

@@ -0,0 +1 @@
+10

README.md

@@ -1,6 +1,6 @@
-# Responsive Foundation
+# Responsive Foundation 3
 
-Responsive Foundation is Boston University's front-end development framework. Built in Sass and JavaScript, Foundation powers the frontend of custom WordPress themes, longform editorial work, and special projects such as our Annual Report. 
+Responsive Foundation is Boston University's front-end development framework. Built in Sass and JavaScript, Foundation powers the frontend of custom WordPress themes, longform editorial work, and special projects such as our Annual Report.
 
 This framework is currently internal, and may not be used without permission.
 
@@ -13,7 +13,7 @@ Note that this repository does not include any production-ready assets (e.g. min
 ## Installation
 
 We recommend installing Foundation using Node Package Manager (npm). You can learn more about how to install npm
-here: https://www.npmjs.com/get-npm
+here: <https://www.npmjs.com/get-npm>
 
 Once you're set up with npm, you can install Foundation in your project directory like so:
 
@@ -53,8 +53,8 @@ You can get moving quickly by importing the full package in your Sass:
 
 You can also choose to import individual partials. Individual build tool setups vary, but if you
 are using [grunt-sass](https://github.com/sindresorhus/grunt-sass) to manage compiling your Sass,
-you can use the [`includePaths` option](https://github.com/sass/node-sass#includepaths) to simplify 
-your import paths by adding the folder path to Responsive Foundation in `node_modules`. 
+you can use the [`includePaths` option](https://github.com/sass/node-sass#includepaths) to simplify
+your import paths by adding the folder path to Responsive Foundation in `node_modules`.
 
 For a highly customizable implementation of Foundation that leans heavily on customization with
 Sass variables, see the [Responsive Child Starter package](https://github.com/bu-ist/responsive-child-starter).
@@ -65,7 +65,7 @@ Full usage documentation can be found in our [style guide](https://bu-ist.github
 
 After each major release, one version is maintained until everyone can be upgraded to the next major version. Currently, these versions are maintained for the purposes of hotfixes only:
 
-* 0.1.0.2
-* 1.0.4.2
-* 1.4.1
-* 1.4.2.2
+- 0.1.0.2
+- 1.0.4.2
+- 1.4.1
+- 1.4.2.2

RENAMING.md

@@ -6,67 +6,61 @@ Based on newly defined coding standards established in October 2014 by the BU We
 
 ### Grayscale color variables
 
-* $black --> $grayScale-0
-* $gray_darkest --> $grayScale-1
-* $gray_darker --> $grayScale-2
-* $gray_dark --> $grayScale-3
-* $gray_light --> $grayScale-7
-* $gray_lighter --> $grayScale-9
-* $white --> $grayScale-f
+- $black --> $grayScale-0
+- $gray_darkest --> $grayScale-1
+- $gray_darker --> $grayScale-2
+- $gray_dark --> $grayScale-3
+- $gray_light --> $grayScale-7
+- $gray_lighter --> $grayScale-9
+- $white --> $grayScale-f
 
 ### Breakpoint variables
 
-* $container_S: --> $container-S
-* $container_M: --> $container-M
-* $container_L: --> $container-L
+- $container_S: --> $container-S
+- $container_M: --> $container-M
+- $container_L: --> $container-L
 
 ### Class and ID Names
 
-* #page_wrapper --> .wrapper
-* #utility --> .utilityNav
-* #right-content-area --> .sidebar
-* #bottom-content-area --> .footbar
-* .responsive-video --> .responsiveVideo
-* .banner-container --> .bannerContainer
-* .window-width --> .bannerContainer-windowWidth (check child themes, like research, for content banner changes)
-* .page-width --> .bannerContainer-pageWidth
-* .content-width --> .bannerContainer-contentWidth
-* .open --> .is-open
-* .navopen --> .nav-open (also changed in toggle.js, and needs to be adjusted in cfa theme)
-
-#### Remanimg. Again.
-
-* #nav --> .primary-nav-menu --> .primaryNav-menu
-* #nav --> .primaryNav-menu --> .primary-nav-menu-menu
-* .mainNav --> .navContainer --> .primary-nav
-* .contentWrapper --> .content
-	* .container --> .content-container
-* .footbar .container --> .footbar .footbar-container
+- #page_wrapper --> .wrapper
+- #utility --> .utilityNav
+- #right-content-area --> .sidebar
+- #bottom-content-area --> .footbar
+- .responsive-video --> .responsiveVideo
+- .banner-container --> .bannerContainer
+- .window-width --> .bannerContainer-windowWidth (check child themes, like research, for content banner changes)
+- .page-width --> .bannerContainer-pageWidth
+- .content-width --> .bannerContainer-contentWidth
+- .open --> .is-open
+- .navopen --> .nav-open (also changed in toggle.js, and needs to be adjusted in cfa theme)
+
+#### Renaming, Again
+
+- #nav --> .primary-nav-menu --> .primaryNav-menu
+- #nav --> .primaryNav-menu --> .primary-nav-menu-menu
+- .mainNav --> .navContainer --> .primary-nav
+- .contentWrapper --> .content
+- .container --> .content-container
+- .footbar .container --> .footbar .footbar-container
 
 ## Additions
 
-* z-index scale in _variables.scss
-* sidebar widget border colors, sidebar widget background colors, page grid border colors, page grid background colors, footbar widget border colors in _variables.scss
-
-
+- z-index scale in _variables.scss
+- sidebar widget border colors, sidebar widget background colors, page grid border colors, page grid background colors, footbar widget border colors in _variables.scss
 
 ## Restructuring
 
-* header.php: added <div class="wrapper">, <div class="contentWrapper"> before bu_content_banner function (line 113, 114)
-* footer-no-sidebar.php, footer.php: added </div><!-- .contentWrapper -->, </div><!-- .wrapper --> after <?php wp_footer(); ?>
-* separated navigation styles in to their own partial: _navigation.scss (in burf-theme)
+- header.php: added `<div class="wrapper">`, `<div class="contentWrapper">` before bu_content_banner function (line 113, 114)
+- footer-no-sidebar.php, footer.php: added `</div><!-- .contentWrapper -->`, `</div><!-- .wrapper -->` after `<?php wp_footer(); ?>`
+- separated navigation styles in to their own partial: _navigation.scss (in burf-theme)
 
 ### Grid variables
 
-* $grid-rowMargin
-* $grid-columnPadding
+- $grid-rowMargin
+- $grid-columnPadding
 
 ## TODO
 
-* Remove any instance of generic grid classes from template markup, e.g. `.col-md-8` and instead use `@extend`
-* Create global typography styles that work for all content, including widgets, without specifically having to target `<article>`. Overrides should be applied to all other areas, e.g. the `primary-nav-menu`.
-* rgba colors are not consistently using mixin or don't have have solid fallback (e.g. in `.footbar`)
-
-
-
-
+- Remove any instance of generic grid classes from template markup, e.g. `.col-md-8` and instead use `@extend`
+- Create global typography styles that work for all content, including widgets, without specifically having to target `<article>`. Overrides should be applied to all other areas, e.g. the `primary-nav-menu`.
+- rgba colors are not consistently using mixin or don't have have solid fallback (e.g. in `.footbar`)

js-dev/dist/toggle.js

@@ -1,61 +1,55 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.toggle = toggle;
-
 var _jquery = _interopRequireDefault(require("jquery"));
-
 /**
  * Toggle behavior for navigation / search buttons.
  *
  * @package ResponsiveFoundation
  */
+
 function toggle() {
   var $body = (0, _jquery.default)('body');
   var $toggle = (0, _jquery.default)('.js-nav-toggle');
+  var $toggleAriaLabelWhenOpen = $toggle.children('.nav-toggle-label-open').text();
+  var $toggleAriaLabelWhenClosed = $toggle.children('.nav-toggle-label-closed').text();
   var $toggleitems = $toggle.add('nav');
   var $searchtoggle = (0, _jquery.default)('.js-search-toggle');
-  var $searchitems = $searchtoggle.add('#quicksearch'); // Add aria attributes for control/expanded if JS is available
+  var $searchitems = $searchtoggle.add('#quicksearch');
 
+  // Add aria attributes for control/expanded if JS is available
   $searchtoggle.attr('aria-expanded', 'false').attr('aria-controls', 'quicksearch');
   $toggle.attr('aria-expanded', 'false').attr('aria-controls', 'primary-nav-menu');
   $toggle.on('click', function (e) {
     e.preventDefault();
-
     if ($toggle.attr('aria-expanded') === 'false') {
-      $toggle.attr('aria-expanded', 'true').attr('aria-label', 'Close menu');
+      $toggle.attr('aria-expanded', 'true').attr('aria-label', $toggleAriaLabelWhenOpen);
     } else {
-      $toggle.attr('aria-expanded', 'false').attr('aria-label', 'Open menu');
+      $toggle.attr('aria-expanded', 'false').attr('aria-label', $toggleAriaLabelWhenClosed);
     }
-
     $toggleitems.toggleClass('is-open');
     $searchitems.removeClass('is-open');
     $body.toggleClass('nav-open').removeClass('search-open');
   });
-
   function toggleSearchPanel(focus) {
     $toggleitems.removeClass('is-open');
-
     if (focus === true && !(0, _jquery.default)(this).hasClass('is-open')) {
       setTimeout(function () {
         (0, _jquery.default)('#q').focus();
       }, 100);
     }
-
     if ($searchtoggle.attr('aria-expanded') === 'false') {
       $searchtoggle.attr('aria-expanded', 'true').attr('aria-label', 'Close search');
     } else {
       $searchtoggle.attr('aria-expanded', 'false').attr('aria-label', 'Open search');
     }
-
     $searchitems.toggleClass('is-open');
     $body.toggleClass('search-open').removeClass('nav-open');
   }
-
   $searchtoggle.on({
     click: function click(e) {
       e.preventDefault();

js-dev/modules/toggle.js

@@ -11,6 +11,10 @@ export function toggle() {
 
 	const $toggle = $( '.js-nav-toggle' );
 
+	const $toggleAriaLabelWhenOpen = $toggle.children('.nav-toggle-label-open').text();
+
+	const $toggleAriaLabelWhenClosed = $toggle.children('.nav-toggle-label-closed').text();
+
 	const $toggleitems = $toggle.add( 'nav' );
 
 	const $searchtoggle = $( '.js-search-toggle' );
@@ -29,9 +33,9 @@ export function toggle() {
 		e.preventDefault();
 
 		if ( $toggle.attr( 'aria-expanded' ) === 'false' ) {
-			$toggle.attr( 'aria-expanded', 'true' ).attr( 'aria-label', 'Close menu' );
+			$toggle.attr( 'aria-expanded', 'true' ).attr( 'aria-label', $toggleAriaLabelWhenOpen );
 		} else {
-			$toggle.attr( 'aria-expanded', 'false' ).attr( 'aria-label', 'Open menu' );
+			$toggle.attr( 'aria-expanded', 'false' ).attr( 'aria-label', $toggleAriaLabelWhenClosed );
 		}
 
 		$toggleitems.toggleClass( 'is-open' );