Main menu does not work when using "Basic HTML version" on some government websites

grifare commented 3 months ago

While conducting WCAG testing for a portal, on the basic HTML version, I discovered that:

Main menu could not be operated at all, neither with keyboard nor with mouse. Accordions do not open, menu links do nothing.
The contrast issue on the menu is so severe that main menu becomes dark blue rectangles, as if there is no text in them. Only when they are hovered or they receive focus, the link names are revealed.

(Please note that Canada.ca works normally.)

I assume websites using this template linked below have the same issue: CDTS Sample - Custom Menu (Basic HTML)

shawnthompson commented 3 months ago

Here is a screenshot of what you get when "Basic HTML" is enabled:

shawnthompson commented 3 months ago

This is what I have so far for CSS changes in the public/gcweb/cdtsapps.css:

    /*Menu bar - When `wbdisable=true` passed in URL*/
    .wb-disable #wb-sm .menu {
        background: #E1E4E7;
        border-bottom: 1px solid #D3D4D8;
        border-top: 1px solid #D3D4D8;
    }

    /*Menu bar dropdown - When `wbdisable=true` passed in URL*/
    .wb-disable .wb-menu .sm {
        display: inline;
        max-height: fit-content;
        background: #C9CFD4;
    }

    /*Menu bar dropdown - links - When `wbdisable=true` passed in URL*/
    .wb-disable #wb-sm .menu .sm>li>a {
        color: #335075;
    }

The hover still needs some work and you might want specific colour combos to fit the Canada.ca look and feel. I wish I had more time to give you on this. I kind of miss working on this project.

wet-boew / cdts-sgdc

Main menu does not work when using "Basic HTML version" on some government websites #1234