Add font size toggle.

assets/scripts/routes/common.js

@@ -1,9 +1,64 @@
+import * as Cookies from 'js-cookie';
+
 export default {
 	init() {
 		// JavaScript to be fired on all pages
 		$( 'body' )
 			.removeClass( 'no-js' )
 			.addClass( 'js' );
+		$( document ).ready( function () {
+			// Fontsize handler
+			if ( Cookies.get( 'a11y-larger-fontsize' ) === '1' ) {
+				$( 'html' ).addClass( 'fontsize' );
+				$( '#is_normal_fontsize' )
+					.attr( 'id', 'is_large_fontsize' )
+					.attr( 'aria-checked', true )
+					.addClass( 'active' )
+					.text( PB_A11y.decrease_label )
+					.attr( 'title', PB_A11y.decrease_label );
+			}
+
+			$( '.toggle-fontsize' ).on( 'click', function () {
+				if ( $( this ).attr( 'id' ) === 'is_normal_fontsize' ) {
+					$( 'html' ).addClass( 'fontsize' );
+					$( this )
+						.attr( 'id', 'is_large_fontsize' )
+						.attr( 'aria-checked', true )
+						.addClass( 'active' )
+						.text( PB_A11y.decrease_label )
+						.attr( 'title', PB_A11y.decrease_label );
+					Cookies.set( 'a11y-larger-fontsize', '1', { expires: 365, path: '' } );
+					return false;
+				} else {
+					$( 'html' ).removeClass( 'fontsize' );
+					$( this )
+						.attr( 'id', 'is_normal_fontsize' )
+						.removeAttr( 'aria-checked' )
+						.removeClass( 'active' )
+						.text( PB_A11y.increase_label )
+						.attr( 'title', PB_A11y.increase_label );
+					Cookies.set( 'a11y-larger-fontsize', '0', { expires: 365, path: '' } );
+					return false;
+				}
+			} );
+
+			// Sets a -1 tabindex to ALL sections for .focus()-ing
+			let sections = document.getElementsByTagName( 'section' );
+			for ( let i = 0, max = sections.length; i < max; i++ ) {
+				sections[i].setAttribute( 'tabindex', -1 );
+				sections[i].className += ' focusable';
+			}
+
+			// If there is a '#' in the URL (someone linking directly to a page with an anchor), go directly to that area and focus is
+			// Thanks to WebAIM.org for this idea
+			if ( document.location.hash && document.location.hash !== '#' ) {
+				let anchorUponArrival = document.location.hash;
+				setTimeout( function () {
+					$( anchorUponArrival ).scrollTo( { duration: 1500 } );
+					$( anchorUponArrival ).focus();
+				}, 100 );
+			}
+		} );
 		$( '.js-header-menu-toggle' ).click( event => {
 			event.preventDefault();
 			$( event.currentTarget ).toggleClass( '--active' );

dist/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/scripts/aldine.js": "/scripts/aldine.js?id=e0b974d636182fae8146",
+    "/scripts/aldine.js": "/scripts/aldine.js?id=f0380c51980a33b2d33c",
-    "/styles/aldine.css": "/styles/aldine.css?id=313d7502c19cb88b2c4e",
+    "/styles/aldine.css": "/styles/aldine.css?id=a225aa1ffc24c78e9e14",
     "/scripts/customizer.js": "/scripts/customizer.js?id=f1f1f4225cba4c1b35f2"
 }

footer.php

@@ -73,7 +73,7 @@ $pb_network_contact_form = get_option( 'pb_network_contact_form' );
 	</div><!-- .container -->
 </footer><!-- .footer -->
 
-<?php get_template_part( 'content', 'accessibility-toolbar' ); ?>
+<?php get_template_part( 'partials/content', 'accessibility-toolbar' ); ?>
 
 <?php wp_footer(); ?>
 

inc/actions/namespace.php

@@ -140,6 +140,14 @@ function enqueue_assets() {
 	wp_enqueue_style( 'aldine/style', $assets->getPath( 'styles/aldine.css' ), false, null );
 	wp_enqueue_style( 'aldine/webfonts', 'https://fonts.googleapis.com/css?family=Karla:400,400i,700|Spectral:400,400i,600', false, null );
 	wp_enqueue_script( 'aldine/script', $assets->getPath( 'scripts/aldine.js' ), [ 'jquery' ], null, true );
+	wp_localize_script(
+		'aldine/script',
+		'PB_A11y',
+		[
+			'increase_label' => __( 'Increase Font Size', 'pressbooks-book' ),
+			'decrease_label' => __( 'Decrease Font Size', 'pressbooks-book' ),
+		]
+	);
 }
 
 /**

package.json

@@ -23,7 +23,8 @@
 	"eslintConfig": {
 		"extends": "./node_modules/pressbooks-build-tools/config/eslint.js",
 		"globals": {
-			"$": true
+			"$": true,
+			"PB_A11y": true
 		}
 	},
 	"stylelint": {
@@ -56,6 +57,7 @@
 		"isotope-layout": "^3.0.4",
 		"jquery": "1.12.4 - 3",
 		"jquery-bridget": "^2.0.1",
+		"js-cookie": "^2.2.0",
 		"wpapi": "^1.1.2"
 	}
 }

partials/content-accessibility-toolbar.php

@@ -0,0 +1,13 @@
+<!-- a11y toolbar -->
+<div class="a11y-toolbar">
+	<div class="wrap">
+	  <ul>
+			<li>
+				<a href="#" role="button" class="a11y-toggle-fontsize toggle-fontsize" id="is_normal_fontsize" title="<?php _e( 'Increase Font Size', 'pressbooks-book' ); ?>">
+					<?php _e( 'Increase Font Size', 'pressbooks-book' ); ?>
+				</a>
+			</li>
+		</ul>
+	</div>
+</div>
+<!-- // a11y toolbar -->

yarn.lock

@@ -4379,6 +4379,10 @@ js-base64@^2.1.8, js-base64@^2.1.9:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.3.1.tgz#3705897c35fce0e202132630e750d8a17cd220ec"
 
+js-cookie@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.0.tgz#1b2c279a6eece380a12168b92485265b35b1effb"
+
 js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"