From ef985075670858582080bcc7a6c44a5337fcc6ac Mon Sep 17 00:00:00 2001 From: katiegoines Date: Wed, 31 Jul 2024 14:06:54 -0700 Subject: [PATCH 1/6] separate nav expander from link --- src/components/Menu/MenuItem.tsx | 50 ++++++++++++++++++++++---------- src/styles/menu.scss | 24 ++++++++++++--- 2 files changed, 55 insertions(+), 19 deletions(-) diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 4856308b938..e72f05ff0b2 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -1,6 +1,6 @@ import { usePathWithoutHash } from '@/utils/usePathWithoutHash'; import { ReactElement, useContext, useEffect, useState, useMemo } from 'react'; -import { Link as AmplifyUILink, Flex } from '@aws-amplify/ui-react'; +import { Link as AmplifyUILink, Button, Flex } from '@aws-amplify/ui-react'; import { IconExternalLink, IconChevron } from '@/components/Icons'; import Link from 'next/link'; import { JS_PLATFORMS, Platform, JSPlatform } from '@/data/platforms'; @@ -62,6 +62,19 @@ export function MenuItem({ } }; + const onCheveronClick = () => { + console.log('clicked'); + + setOpen((prevOpen) => !prevOpen); + + if (menuOpen) { + // Close the menu after clicking a link (applies to the mobile menu) + toggleMenuOpen(false); + } else { + toggleMenuOpen(true); + } + }; + const handleFocus = () => { if (parentSetOpen) { parentSetOpen(true); @@ -188,22 +201,29 @@ export function MenuItem({ key={pageNode.route} className={`menu__list-item ${listItemStyle}`} > - - + - {pageNode.title} - {children && hasVisibleChildren && level !== Levels.Category && ( + + {pageNode.title} + + + {children && hasVisibleChildren && level !== Levels.Category && ( + + )} + {children && ( From 05b5ea72dc485d4095380e57d7f6101516358a52 Mon Sep 17 00:00:00 2001 From: katiegoines Date: Fri, 9 Aug 2024 15:47:13 -0700 Subject: [PATCH 4/6] fix currentstyling --- src/components/Menu/MenuItem.tsx | 33 ++++++++++++++++---------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index fa218059a06..c4a8002ed60 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -59,21 +59,22 @@ export function MenuItem({ const setSelectability = () => { const current = ref.current; - const items = current?.parentElement.nextSibling.children; - - for (const item of items) { - const links = item.getElementsByTagName('a'); - const buttons = item.getElementsByTagName('button'); - if (links[0].getAttribute('tabIndex') == 0) { - for (const link of links) { - link.setAttribute('tabIndex', -1); - } - for (const button of buttons) { - button.setAttribute('tabIndex', -1); + const items = current?.parentElement?.nextSibling?.children; + if (items) { + for (const item of items) { + const links = item.getElementsByTagName('a'); + const buttons = item.getElementsByTagName('button'); + if (links[0].getAttribute('tabIndex') == 0) { + for (const link of links) { + link.setAttribute('tabIndex', -1); + } + for (const button of buttons) { + button.setAttribute('tabIndex', -1); + } + } else if (-links[0].getAttribute('tabIndex')) { + links[0]?.setAttribute('tabIndex', 0); + buttons[0]?.setAttribute('tabIndex', 0); } - } else if (-links[0].getAttribute('tabIndex')) { - links[0]?.setAttribute('tabIndex', 0); - buttons[0]?.setAttribute('tabIndex', 0); } } current?.focus(); @@ -235,9 +236,9 @@ export function MenuItem({ key={pageNode.route} className={`menu__list-item ${listItemStyle}`} > - + Date: Thu, 26 Sep 2024 13:23:26 -0700 Subject: [PATCH 5/6] trying to fix be havoir --- src/components/Menu/MenuItem.tsx | 71 ++++++++++++++++++++++++-------- 1 file changed, 53 insertions(+), 18 deletions(-) diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 99253d2a2ee..4cb1879af64 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -59,30 +59,66 @@ export function MenuItem({ const setSelectability = () => { const current = ref.current; - const items = current?.parentElement?.nextSibling?.children; - if (items) { - for (const item of items) { - const links = item.getElementsByTagName('a'); - const buttons = item.getElementsByTagName('button'); - if (links[0].getAttribute('tabIndex') == 0) { - for (const link of links) { - link.setAttribute('tabIndex', -1); - } - for (const button of buttons) { - button.setAttribute('tabIndex', -1); + const list = current?.parentElement?.nextSibling?.children; + if (list) { + for (const item of list) { + const subItems = item.children[1]?.children; + if (subItems) { + for (const subItem of subItems) { + const links = subItem.getElementsByTagName('a'); + const buttons = subItem.getElementsByTagName('button'); + if (!item.children[1]?.classList.contains('menu__list--hide')) { + for (const link of links) { + link.setAttribute('tabIndex', 0); + } + for (const button of buttons) { + button.setAttribute('tabIndex', 0); + } + } else { + const subMenus = item.children[1].children; + for (const subMenu of subMenus) { + if (subMenu.children.length > 1) { + subMenu.children[1].classList.add('menu__list--hide'); + } + } + for (const link of links) { + link.setAttribute('tabIndex', -1); + } + for (const button of buttons) { + button.setAttribute('tabIndex', -1); + } + // if (subItem.children.length > 1) { + // console.log('banan'); + // setOpen(false); + // } + } + // if ( + // subItem.children.length > 1 && + // item.children[1]?.classList.contains('menu__list--hide') + // ) { + // subItem.children[1].classList.add('menu__list--hide'); + // // console.log(subItem.children[0].children[1].children[0]); + // // if ( + // // !subItem.children[0].children[1].children[0].classList.contains( + // // 'icon-rotate-90-reverse' + // // ) + // // ) { + // // subItem.children[0].children[1].children[0].classList.add( + // // 'icon-rotate-90-reverse' + // // ); + // // } + + // setOpen(false); + // } } - } else if (-links[0].getAttribute('tabIndex')) { - links[0]?.setAttribute('tabIndex', 0); - buttons[0]?.setAttribute('tabIndex', 0); } } } - current?.focus(); }; - const onLinkClick = () => { - setSelectability(); + setTimeout(setSelectability, 0); + const onLinkClick = () => { // Category shouldn't be collapsible if ( level > Levels.Category && @@ -98,7 +134,6 @@ export function MenuItem({ }; const onCheveronClick = () => { - setSelectability(); setOpen((prevOpen) => !prevOpen); if (menuOpen) { From f4b3336f0d6898ec809172f2241d07e08db5df77 Mon Sep 17 00:00:00 2001 From: katiegoines Date: Fri, 27 Sep 2024 12:58:08 -0700 Subject: [PATCH 6/6] change attribute logic is basd on --- src/components/Menu/MenuItem.tsx | 103 ++++++++++++++----------------- 1 file changed, 47 insertions(+), 56 deletions(-) diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 4cb1879af64..eecc724a5d6 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -57,66 +57,38 @@ export function MenuItem({ [hideChildren, pageNode.children] ); - const setSelectability = () => { - const current = ref.current; - const list = current?.parentElement?.nextSibling?.children; - if (list) { - for (const item of list) { - const subItems = item.children[1]?.children; - if (subItems) { - for (const subItem of subItems) { - const links = subItem.getElementsByTagName('a'); - const buttons = subItem.getElementsByTagName('button'); - if (!item.children[1]?.classList.contains('menu__list--hide')) { - for (const link of links) { - link.setAttribute('tabIndex', 0); - } - for (const button of buttons) { - button.setAttribute('tabIndex', 0); - } - } else { - const subMenus = item.children[1].children; - for (const subMenu of subMenus) { - if (subMenu.children.length > 1) { - subMenu.children[1].classList.add('menu__list--hide'); - } - } - for (const link of links) { - link.setAttribute('tabIndex', -1); - } - for (const button of buttons) { - button.setAttribute('tabIndex', -1); - } - // if (subItem.children.length > 1) { - // console.log('banan'); - // setOpen(false); - // } - } - // if ( - // subItem.children.length > 1 && - // item.children[1]?.classList.contains('menu__list--hide') - // ) { - // subItem.children[1].classList.add('menu__list--hide'); - // // console.log(subItem.children[0].children[1].children[0]); - // // if ( - // // !subItem.children[0].children[1].children[0].classList.contains( - // // 'icon-rotate-90-reverse' - // // ) - // // ) { - // // subItem.children[0].children[1].children[0].classList.add( - // // 'icon-rotate-90-reverse' - // // ); - // // } - - // setOpen(false); - // } + const makeSubsKeyboardAccessible = () => { + const pages = ref.current?.children[1]?.children; + for (const page of pages) { + const links = page.children[0].children; + + for (const link of links) { + link.setAttribute('tabIndex', 0); + } + + if (!page.children[1]?.classList.contains('menu__list--hide')) { + const subs = page.children[1]?.children; + if (subs) { + for (const sub of subs) { + sub.children[0].children[0].setAttribute('tabIndex', 0); } } } } }; - setTimeout(setSelectability, 0); + const makeSubsKeyboardInaccessible = () => { + const subItems = ref.current?.children[1]; + const links = subItems?.getElementsByTagName('a'); + const buttons = subItems?.getElementsByTagName('button'); + + for (const link of links) { + link.setAttribute('tabIndex', -1); + } + for (const button of buttons) { + button.setAttribute('tabIndex', -1); + } + }; const onLinkClick = () => { // Category shouldn't be collapsible @@ -158,6 +130,26 @@ export function MenuItem({ let hideAPIResources = false; + useEffect(() => { + const current = ref.current; + if ( + current?.children.length > 1 && + open && + !current?.classList.contains('menu__list-item--category') + ) { + makeSubsKeyboardAccessible(); + } else if ( + current?.children.length > 1 && + !open && + !current?.classList.contains('menu__list-item--category') + ) { + const pages = current?.children[1]?.children; + if (pages) { + makeSubsKeyboardInaccessible(); + } + } + }, [open]); + useEffect(() => { if (current) { if (children && children.length > 0) { @@ -271,6 +263,7 @@ export function MenuItem({ onFocus={handleFocus} key={pageNode.route} className={`menu__list-item ${listItemStyle}`} + ref={ref} > Levels.Subcategory ? -1 : 0} passHref > @@ -292,7 +284,6 @@ export function MenuItem({