Skip to content

Commit

Permalink
Nav a11y updates
Browse files Browse the repository at this point in the history
  • Loading branch information
skysarwer committed Jan 11, 2023
1 parent de6d6eb commit 047f72f
Show file tree
Hide file tree
Showing 8 changed files with 204 additions and 69 deletions.
5 changes: 5 additions & 0 deletions functions.php
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,11 @@ function evn_widgets_init() {
*/
require get_template_directory() . '/inc/services.php';

/**
* Navigation
*/
require get_template_directory() . '/inc/navigation.php';

/**
* Load Jetpack compatibility file.
*/
Expand Down
2 changes: 2 additions & 0 deletions header.php
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>' ,
'walker' => new EVN_Menu_Walker()
)
);
?>
Expand Down
2 changes: 1 addition & 1 deletion inc/enqueue.php
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ function evn_scripts() {

wp_enqueue_style( 'evn-style', get_stylesheet_uri(), array(), EVN_VERSION );

wp_enqueue_script( 'evn-navigation', get_template_directory_uri() . '/js/navigation.js', array(), EVN_VERSION, true );
wp_enqueue_script( 'evn-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), EVN_VERSION, true );

wp_enqueue_script( 'evn-cta-sidebar', get_template_directory_uri() . '/js/cta-sidebar.js', array(), EVN_VERSION, true );

Expand Down
68 changes: 68 additions & 0 deletions inc/navigation.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<?php

class EVN_Menu_Walker extends Walker_Nav_Menu {
/**
* Starts the list before the elements are added.
*
* @see Walker::start_lvl()
*
* @param string $output Used to append additional content (passed by reference).
* @param int $depth Depth of menu item. Used for padding.
* @param stdClass $args An object of wp_nav_menu() arguments.
*/
public function start_lvl( &$output, $depth = 0, $args = null ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = str_repeat( $t, $depth );

// Default class.
$classes = array( 'sub-menu' );

// ! Get parent item ID:
$id = isset( $args->item_id ) ? ' id="submenu-' . absint( $args->item_id ) . '"' : '';

/**
* Filters the CSS class(es) applied to a menu list element.
*
* @since 4.8.0
*
* @param string[] $classes Array of the CSS classes that are applied to the menu `<ul>` element.
* @param stdClass $args An object of `wp_nav_menu()` arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$class_names = implode( ' ', apply_filters( 'nav_menu_submenu_css_class', $classes, $args, $depth ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

// ! Insert ID:
$output .= "{$n}{$indent}<ul{$class_names}{$id}>{$n}";
}
}

add_filter(
'nav_menu_item_args',
function( $args, $item, $depth ) {
$args->item_id = $item->ID;

return $args;
},
10,
3
);


//Add custom dropdown filter to Primary Menu
add_filter( 'walker_nav_menu_start_el', 'evn_parent_menu_dropdown', 10, 4 );
function evn_parent_menu_dropdown( $item_output, $item, $depth, $args ) {

if ( ! empty( $item->classes ) && in_array( 'menu-item-has-children', $item->classes ) ) {
$stripped_item_output = preg_replace('/<a[^>]*>(.*)<\/a>/', '$1', $item_output);
return '<span class="flex">'.$item_output . '<button class="submenu-toggle outline" aria-expanded="false" data-labelvalue="'.$stripped_item_output.'" aria-label="Expand '.$stripped_item_output.' sub-menu" aria-controls="submenu-'.$args->item_id.'">+</button></span>';
}

return $item_output;
}
30 changes: 26 additions & 4 deletions js/navigation.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* Handles toggling the navigation menu for small screens and enables TAB key
* navigation support for dropdown menus.
*/
( function() {
( function($) {
const siteNavigation = document.getElementById( 'site-navigation' );

// Return early if the navigation doesn't exist.
Expand Down Expand Up @@ -55,8 +55,10 @@
// Get all the link elements within the menu.
const links = menu.getElementsByTagName( 'a' );

// Get all the link elements with children within the menu.
const linksWithChildren = menu.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
const linksWithChildren = menu.querySelectorAll( '.menu-item-has-children a, .page_item_has_children a' );

// Get all the submenu toggle buttons within the menu.
const submenuToggles = menu.querySelectorAll( '.menu-item-has-children .submenu-toggle, .page_item_has_children .submenu-toggle' );

// Toggle focus each time a menu link is focused or blurred.
for ( const link of links ) {
Expand All @@ -69,6 +71,26 @@
link.addEventListener( 'touchstart', toggleFocus, false );
}

for ( const toggle of submenuToggles ) {

const submenu = document.getElementById( toggle.getAttribute('aria-controls') );

// Toggle the the .toggled class and the aria-expanded value each time a .submenu-toggle button is clicked.
toggle.addEventListener( 'click', function() {
$(submenu).slideToggle( );

if ( toggle.getAttribute( 'aria-expanded' ) === 'true' ) {
toggle.innerHTML = '+'
toggle.setAttribute( 'aria-expanded', 'false' );
toggle.setAttribute( 'aria-label', 'Expand ' + toggle.getAttribute( 'data-labelvalue' ) + 'sub-menu');
} else {
toggle.innerHTML = '-'
toggle.setAttribute( 'aria-expanded', 'true' );
toggle.setAttribute( 'aria-label', 'Collapse ' + toggle.getAttribute( 'data-labelvalue' ) + 'sub-menu');
}
} );
}

/**
* Sets or removes .focus class on an element.
*/
Expand Down Expand Up @@ -96,4 +118,4 @@
menuItem.classList.toggle( 'focus' );
}
}
}() );
})(jQuery);
38 changes: 20 additions & 18 deletions sass/structure/_header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,38 +17,40 @@ header.site-header {
}

.nav-bar {
width: 1.5em;
height: 0.3em;
width: 2em;
height: 0.4em;
margin-bottom: 0.125em;
display: block;
background: #000;
border-radius: 22%;
position: relative;
transition: 0.2s;
border-top: 1.75px solid black;
}

.menu-toggle {
background: none;
border: none;
padding: 0;
z-index: 9999;
}

&.homepage {

color: #fff;
position: sticky;
top: 0;

*:focus {
outline: 2px dotted $color__background-body;
}

&[aria-expanded="true"] {
.nav-bar {
background: #fff;
&:nth-child(2) {
transform: rotate(45deg) scaleX(1.125);
transform-origin: 1px 8px;
transition: 0.2s;
}
&:nth-child(3) {
opacity: 0;
}
&:nth-child(4) {
transform: rotate(-45deg) scaleX(1.125);
transform-origin: 5px -4px;
transition: 0.2s;
}
}

.logo svg path, .logo svg polygon {
fill: #fff;
}

}
}

124 changes: 78 additions & 46 deletions sass/structure/_navigation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,56 +6,64 @@
max-width: 70%;

ul {
display: none;
list-style: none;
visibility: hidden;
margin: 0;
padding-left: 0;
gap: 1em;

ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 100%;
left: -999em;
z-index: 99999;

ul {
transition: 0.25s;

@media screen and (min-width: 600px) {
.sub-menu {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 100%;
left: -999em;
top: 0;
}
z-index: 99999;
background: $color__accent-dark;
padding-left: 1em;
color: white;

ul {
//display: none;
left: -999em;
top: 0;
}

li {
li {

&:hover > ul,
&.focus > ul {
display: block;
left: auto;
&:hover > ul,
&.focus > ul {
display: block;
left: auto;
}
}
}

a {
width: 200px;
}
a {
width: 200px;
}

:hover > a,
.focus > a {
}
:hover > a,
.focus > a {
}

a:hover,
a.focus {
a:hover,
a.focus {
}
}
}

li:hover > ul,
li.focus > ul {
left: auto;
li:hover > ul,
li.focus > ul {
left: auto;
}
}
}

li {
position: relative;
font-family: $font__semibold;
margin-bottom: 0;
padding-bottom: 0.5em;
}

a {
Expand All @@ -78,32 +86,50 @@
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
display: block;
visibility: visible;
}

@media screen and (max-width: (37.49em)) {

.sub-menu {
display: none;
visibility: visible !important;
font-size: 0.9em;
padding-left: 1em !important;
}

.menu-menu-container {
position: fixed;
display: flex;
align-items: space-between;
transition: 0.25s;
z-index: 999;
height: 100vh;
width: 100%;
right: 0;
top: 0;
padding-left: 2em;
padding-right: 1em;
}

#primary-menu .nav-menu,
#primary-menu.nav-menu {
position: absolute;
width: max-content;
right: 0;
background: $color__accent;
transition: 0.25s;
padding: 1em;
margin-top: 1em;
color: #fff;
z-index: 999;

&::before {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid $color__accent;
top: -0.5em;
right: 0;
li button {
border: 0 !important;
font-family: $font__bold;

&:hover, &:focus {
color: $color__accent !important;
background-color: transparent !important;
}
}
}
}
Expand All @@ -114,6 +140,12 @@

@media screen and (min-width: 600px) {

#primary-menu {
li button {
display: none;
}
}

.main-navigation {
right: 2em;
}
Expand Down
4 changes: 4 additions & 0 deletions sass/utilities/_general.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,7 @@
flex-direction: row-reverse;
}
}

.flex {
display: flex;
}

0 comments on commit 047f72f

Please sign in to comment.