Top-level links not firing megamenu in Safari

[unidb]

Hello,

I hope someone might be able to help with this issue. We've used the Adobe Accessible Mega Menu code here https://www.liverpool.ac.uk/new-header/ and it works very well and fires the megamenu exactly as required on all browsers except Safari on Mac desktop. It's fine in iOS.

On clicking the Study with Liverpool/Our research/About us links, the JS should append a class of "open" which calls the CSS to display the megamenu content. This does not happen in Safari on Mac Desktop. Nothing at all seems to happen on click. Can anyone help us to debug it and find out why this is happening?

Many thanks

[majornista]

Hi,

In Safari, turning on Preferences > Advanced > Accessibility: Press Tab to highlight each item on a webpage seems to solve the issue, but it will remain a problem for mouse users using the default browser settings. I'll see if I can provide a fix.

[unidb]

Hello,

Thanks so much for looking at this issue.

I’ve just tried as you suggested below, using www.browserstack.comhttp://www.browserstack.com, and I can see that working now using an instance of Sierra on Mac. Although, as you say, it would have remained a problem for mouse users.

A fix using default settings+mouse would be extremely welcome!

Many thanks

From: Michael Jordan [mailto:notifications@github.com] Sent: 11 May 2018 14:35 To: adobe-accessibility/Accessible-Mega-Menu Cc: Bradford, Darren; Author Subject: Re: [adobe-accessibility/Accessible-Mega-Menu] Top-level links not firing megamenu in Safari (#54)

Hi,

In Safari, turning on Preferences > Advanced > Accessibility: Press Tab to highlight each item on a webpage seems to solve the issue, but it will remain a problem for mouse users using the default browser settings. I'll see if I can provide a fix.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/adobe-accessibility/Accessible-Mega-Menu/issues/54#issuecomment-388365155, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AlV2MkoSj6AF0zDUE_Dxi9DW7Om2DX-Kks5txZOKgaJpZM4T7NTA.

[majornista]

Did you remove mouseover opening on hover here: https://github.com/adobe-accessibility/Accessible-Mega-Menu/blob/master/js/jquery-accessibleMegaMenu.js#L656?

This is a much requested feature, but it seems to be messing with the current behavior.

[unidb]

I don’t know I’m afraid, I have oversight of the project, but haven’t been hands-on with the code.

We may well have consciously removed that line though – as we have gone for an on-click megamenu approach rather than on-hover.

From: Michael Jordan [mailto:notifications@github.com] Sent: 11 May 2018 15:18 To: adobe-accessibility/Accessible-Mega-Menu Cc: Bradford, Darren; Author Subject: Re: [adobe-accessibility/Accessible-Mega-Menu] Top-level links not firing megamenu in Safari (#54)

Did you remove mouseover opening on hover here: https://github.com/adobe-accessibility/Accessible-Mega-Menu/blob/master/js/jquery-accessibleMegaMenu.js#L656?

This is a much requested feature, but it seems to be messing with the current behavior.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/adobe-accessibility/Accessible-Mega-Menu/issues/54#issuecomment-388377237, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AlV2Mpx-Mz1AG_ZGTs_7ihN8tB4aGHNUks5txZ2UgaJpZM4T7NTA.

[majornista]

Just committed a few, long overdue, fixes that may help.

[unidb]

Thanks again for looking at this.

Forgive my ignorance, but how can I test if this will work for us on Safari now?

I assume I download the latest js and css you’ve added and use these files instead of those we are linking to now. Do you expect that I will see the anticipated on click behaviour in Safari if I do that? Or are there any further steps to add?

Thank you

From: Michael Jordan [mailto:notifications@github.com] Sent: 11 May 2018 18:10 To: adobe-accessibility/Accessible-Mega-Menu Cc: Bradford, Darren; Author Subject: Re: [adobe-accessibility/Accessible-Mega-Menu] Top-level links not firing megamenu in Safari (#54)

Just committed a few, long overdue, fixes that may help.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/adobe-accessibility/Accessible-Mega-Menu/issues/54#issuecomment-388426052, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AlV2MuodV_nQZrAZxZ17_rRGfcRDsXYPks5txcXfgaJpZM4T7NTA.

[majornista]

You should be able to swap out jquery-accessibleMegaMenu.js and, unless there were other significant modifications to the script for your site, it should now, by default, expand or collapse the dropdown menus on clicking a top nav item rather than by hovering over it.

[unidb]

After some initial testing, this appears to work really well. Do you maintain this code as a side project? My team were very impressed that this was sorted so quickly! Thanks so much for your help!

From: Michael Jordan [mailto:notifications@github.com] Sent: 14 May 2018 13:50 To: adobe-accessibility/Accessible-Mega-Menu Cc: Bradford, Darren; Author Subject: Re: [adobe-accessibility/Accessible-Mega-Menu] Top-level links not firing megamenu in Safari (#54)

You should be able to swap out jquery-accessibleMegaMenu.js and, unless there were other significant modifications to the script for your site, it should now, by default, expand or collapse the dropdown menus on clicking a top nav item rather than by hovering over it.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/adobe-accessibility/Accessible-Mega-Menu/issues/54#issuecomment-388804900, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AlV2MlEVqiNHhsDBejkNjKXxgNGU8Hwqks5tyX1ygaJpZM4T7NTA.

[majornista]

Glad to see it's working for you. To be honest, I had done some work on this back in March to implement the much requested change to have the menus open with a click, rather than have different behaviors on Desktop and Mobile, but hadn't committed the changes. I haven't really been maintaining this project, because I've needed to focus on other work. I hope it provides a good example for developers needing to implement an accessible mega menu on their own, but it is not an ongoing project.