@@ -6,6 +6,7 @@ var searchOverlayVisible = false;
66var mobileMenuVisible = false ;
77var figmaEmbeds = [ ] ;
88var ref = { } ;
9+ var isMobile = window . innerWidth <= 1024 ;
910
1011function toggleMenu ( ) {
1112 if ( mobileMenuVisible ) {
@@ -16,8 +17,6 @@ function toggleMenu() {
1617} ;
1718
1819function updateNavAccessibility ( ) {
19- var isMobile = window . innerWidth <= 375 ;
20-
2120 ref . navTrigger . setAttribute ( "aria-hidden" , ! isMobile ) ;
2221 ref . siteNav . setAttribute ( "aria-hidden" , isMobile ) ;
2322
@@ -34,10 +33,17 @@ function showMenu() {
3433
3534 // Update nav menu accessibility properties
3635 ref . siteNav . removeAttribute ( "hidden" ) ;
36+ ref . siteNav . setAttribute ( "aria-hidden" , false ) ;
3737
3838 setTimeout ( function ( ) {
3939 ref . header . classList . add ( '-active' ) ;
40- } , 5 ) ;
40+
41+ // Focus on the first nav item
42+ var links = ref . siteNav . getElementsByTagName ( 'a' ) ;
43+ if ( links . length > 0 ) {
44+ links [ 0 ] . focus ( ) ;
45+ }
46+ } , 50 ) ;
4147
4248 if ( searchOverlayVisible ) {
4349 hideSearchOverlay ( ) ;
@@ -53,6 +59,7 @@ function hideMenu() {
5359
5460 setTimeout ( function ( ) {
5561 ref . siteNav . setAttribute ( "hidden" , "hidden" ) ;
62+ ref . siteNav . setAttribute ( "aria-hidden" , true ) ;
5663 } , 400 ) ;
5764} ;
5865
@@ -195,10 +202,10 @@ function toggleSecondaryNav(event) {
195202
196203 if ( navListItem . classList . contains ( '-active' ) ) {
197204 navListItem . classList . remove ( '-active' ) ;
198- navListItem . setAttribute ( 'aria-expanded' , false ) ;
205+ event . currentTarget . setAttribute ( 'aria-expanded' , false ) ;
199206 } else {
200207 navListItem . classList . add ( '-active' ) ;
201- navListItem . setAttribute ( 'aria-expanded' , true ) ;
208+ event . currentTarget . setAttribute ( 'aria-expanded' , true ) ;
202209 }
203210}
204211
@@ -344,10 +351,8 @@ function handleModalImageLinkClick(e) {
344351 } ) ;
345352 }
346353
347- var mobile = window . innerWidth < 640 ;
348-
349354 ref . modalImageContainer . classList . add ( 'loading' ) ;
350- if ( mobile && imgTag . dataset . modalWidthMobile && imgTag . dataset . modalHeightMobile ) ref . modalImageDimensions = [ imgTag . dataset . modalWidthMobile , imgTag . dataset . modalHeightMobile ] ;
355+ if ( isMobile && imgTag . dataset . modalWidthMobile && imgTag . dataset . modalHeightMobile ) ref . modalImageDimensions = [ imgTag . dataset . modalWidthMobile , imgTag . dataset . modalHeightMobile ] ;
351356 else if ( imgTag . dataset . modalWidth && imgTag . dataset . modalHeight ) ref . modalImageDimensions = [ imgTag . dataset . modalWidth , imgTag . dataset . modalHeight ] ;
352357 else ref . modalImageDimensions = [ imgTag . getAttribute ( 'width' ) , imgTag . getAttribute ( 'height' ) ] ;
353358 ref . modalImage . setAttribute ( 'width' , ref . modalImageDimensions [ 0 ] ) ;
@@ -374,7 +379,7 @@ function handleModalImageLinkClick(e) {
374379
375380 var img ,
376381 modalLink = imgTag . closest ( '.modal-image-link' ) ;
377- if ( mobile && modalLink . dataset . modalImageMobile ) img = modalLink . dataset . modalImageMobile ;
382+ if ( isMobile && modalLink . dataset . modalImageMobile ) img = modalLink . dataset . modalImageMobile ;
378383 else img = modalLink . getAttribute ( 'href' ) ;
379384
380385 var request = new Request ( img ) ;
@@ -577,11 +582,53 @@ function decideIfLottie(){
577582}
578583
579584window . addEventListener ( "resize" , function ( event ) {
585+ isMobile = window . innerWidth <= 1024 ;
586+
580587 resizeFigmaEmbeds ( ) ;
581588 resizeModal ( ) ;
582589} )
583590
591+ // Adds keyup listeners to links in the mobile nav.
592+ setupMobileNavLinkKeyboardNavigation = function ( ) {
593+ var navLinks = ref . siteNav . getElementsByTagName ( 'a' ) ;
594+ if ( navLinks . length > 0 ) {
595+ for ( var i = 0 ; i < navLinks . length ; i ++ ) {
596+ navLinks [ i ] . setAttribute ( 'data-index' , i ) ;
597+ navLinks [ i ] . addEventListener ( 'keyup' , onMobileNavLinkKeyUp ) ;
598+ }
599+ }
600+ } ;
601+
602+ // Handles arrow up/down and escape for mobile nav links.
603+ onMobileNavLinkKeyUp = function ( event ) {
604+ if ( isMobile && mobileMenuVisible ) {
605+ if ( event . which == 38 || event . which == 40 ) {
606+ // Select previous or next menu option.
607+ event . preventDefault ( ) ;
608+ var index = parseInt ( event . target . getAttribute ( 'data-index' ) ) ;
609+ var navLinks = ref . siteNav . getElementsByTagName ( 'a' ) ;
610+ var direction = event . which == 38 ? - 1 : 1 ;
611+ var newIndex = index + direction ;
612+ if ( newIndex < 0 ) newIndex = navLinks . length - 1 ;
613+ if ( newIndex >= navLinks . length ) newIndex = 0 ;
614+ var newLink = navLinks [ newIndex ] ;
615+ while ( newLink . offsetParent === null ) {
616+ newIndex += direction ;
617+ if ( newIndex < 0 ) newIndex = navLinks . length - 1 ;
618+ if ( newIndex >= navLinks . length ) newIndex = 0 ;
619+ newLink = navLinks [ newIndex ] ;
620+ }
621+ newLink . focus ( ) ;
622+ } else if ( event . which == 27 ) {
623+ // Escape closes the menu
624+ hideMenu ( ) ;
625+ }
626+ }
627+ } ;
628+
584629document . addEventListener ( "DOMContentLoaded" , function ( event ) {
630+ isMobile = window . innerWidth <= 1024 ;
631+
585632 ref . header = document . getElementById ( "site-header" ) ;
586633 ref . siteNav = document . getElementById ( 'site-nav' ) ;
587634 ref . navTrigger = document . getElementById ( "nav-trigger" ) ;
@@ -609,6 +656,8 @@ document.addEventListener("DOMContentLoaded", function(event) {
609656
610657 if ( ref . navTrigger ) {
611658 ref . navTrigger . addEventListener ( 'click' , toggleMenu ) ;
659+
660+ setupMobileNavLinkKeyboardNavigation ( ) ;
612661 }
613662
614663 var secondaryNavListExpander = document . getElementsByClassName ( "nav-list-expander" ) ;
@@ -621,7 +670,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
621670
622671 setupUnitsAndSymbolsFormatter ( ) ;
623672
624- for ( var i = 0 ; i < ref . modalImageLinks . length ; i ++ ) {
625- ref . modalImageLinks [ i ] . addEventListener ( 'click' , handleModalImageLinkClick ) ;
673+ for ( var k = 0 ; i < ref . modalImageLinks . length ; k ++ ) {
674+ ref . modalImageLinks [ k ] . addEventListener ( 'click' , handleModalImageLinkClick ) ;
626675 }
627676} ) ;
0 commit comments