Navigation Bar Drop Down Menus and Accessibility

[duskvirkus]

Been working on adding drop down menus to the navigation bar. Open to feedback or suggestions. I'll leave this open for a couple days so people have an opportunity to check it out and make sure it looks good.

Worked off comment from #1759 for accessibility. Tested with the following:

• Firefox and Chromium on Windows with NV Access Screen Reader
• Chrome on Android with Google TalkBack

fixes #1750

Here's some screenshots:

[gruselhaus]

Lgtm

[GypsyDangerous]

I really like these, the colors look good (though I didn't check them with a wcag color checker). Since you said you were able to do the accessibility tests and get the colors correct can you help me work on #1740 and #1759 sometime next year

[shiffman]

Wooohoo, this looks terrific! I am so excited to finally have some new organization to the site. I say let's merge and we can always adjust. The categories and naming all look great. I wonder if "streams" should be "live archive" or something else? But maybe "streams" is quite a conventional term. Thank you @violetcraze!

[gruselhaus]

@violetcraze the navbar does not work on Mac using Safari. Could you cross check that?

[shiffman]

I can confirm that it's not working on safari, don't seen anything in console.

Also, small thing but the "hand" doesn't appear when hovering the navbar as it does for other interactive elements on the page:

[phucduong86]

It doesn't work on Chrome either on my Mac. Only the Home button works as expected.
Looks like there was some regressions from the latest changes.

[vimkat]

Great work, @violetcraze! ^^

It's working for me - but only when you actually click the element. @gruselhaus / @shiffman / @phucduong86 have you tested hovering or clicking? Also adding a onmouseover event would make it feel more natural to desktop users.

The "hand" could easily be fixed by applying cursor: pointer; to the respected HTML element in CSS. Then it also feels "clicky".