search

drupalwxt / wxt

Drupal variant of the Web Experience Toolkit (WxT).
https://drupalwxt.github.io
GNU General Public License v2.0
27 stars 27 forks source link

Canada.ca flyout menu is broken. #268

Closed liquidcms closed 2 years ago

liquidcms commented 3 years ago

I reported this a couple months back against WxT Bootstrap on D.org (https://www.drupal.org/project/wxt_bootstrap/issues/3236799); but guessing not a lot of attention to that queue; so figured I should also post here.

menu set up outcome

liquidcms commented 3 years ago

this seems to mostly fix it.. but more testing to do yet

.slflnk.expanded.dropdown.open ul.sm {
  display: block;
}
.slflnk.expanded.dropdown ul.sm {
  display: none;
}
liquidcms commented 3 years ago

This is just a small piece of the issue; i see that the flyout portions are only on click (supposed to be on hover) and they are not positioned correctly. I see the code for acting on hover and it is being hit but failing at some point (no error). My guess is there is a class wrapper missing from the entire menu which makes the wet portions of this work... but comparing to what's on canada.ca i don't see it.

liquidcms commented 3 years ago

the following fixes the menu (externally, not in the WxT distribution). My guess is that some of this is added in WxT and they made a change to WET which has not been taken into account in WxT updates (as classes are missing and css is wrong).

JS: $('nav#wb-auto-2 a.dropdown-toggle').attr('aria-haspopup', 'true');

CSS:

.gcweb-menu a[aria-expanded="true"] + ul.sm {
  display: block;
}
.expanded.dropdown ul.sm {
  display: none;
}

.gcweb-menu .dropup,
.gcweb-menu .dropdown {
  position: static;
}

As a side note, its startling how poor the structure of this menu is (parent items faked in css to look like parents) and how poorly the WET JS code is written in general. Spelling mistakes, formatting is extremely inconsistent with spaces and blank lines scattered around all over. Odd this has never been cleaned up or better, some sort of jslint rule set defined for it.

liquidcms commented 3 years ago

and a better version:

JS: $('nav.gcweb-menu a.dropdown-toggle').attr('aria-haspopup', 'true');

CSS:

.gcweb-menu a[aria-expanded="true"] + ul.sm {
  display: block;
}
.expanded.dropdown ul.sm {
  display: none;
}

.gcweb-menu .dropup,
.gcweb-menu .dropdown {
  position: static;
}
sylus commented 2 years ago

Apologies I finally got time to take a look at this and believe I have it fixed.

I documented the fixes over in the issue:

https://www.drupal.org/project/wxt/issues/3236799#comment-14347979