RFR: JDK-8273034: Make javadoc navigation collapsible on small displays

[Hannes Wallnöfer]

On Fri, 3 Sep 2021 12:15:45 GMT, Hannes Wallnöfer <hannesw at openjdk.org> wrote:

> Please review a change to add a collapsible "hamburger" navigation bar to javadoc pages for small screens. The collapsible navbar is activated when the browser width is below 920px, which is the point where the normal navigation bar starts to wrap for some javadoc pages. 
> 
> The feature is implemented using CSS and JavaScript techniques employed by popular frameworks and has been successfully tested on several browsers and platforms, including various Android and iOS devices as well as IE and Edge browsers on Windows 10.
> 
> Sample documentation generated with this change is provided at the URL below. For testing, please review it on a mobile phone or tablet, or using the device emulation features provided with the developer tools of many desktop browsers.
> 
> http://cr.openjdk.java.net/~hannesw/8273034/api.00/index.html
> 
> One peculiarity of this change is that the sub-navigation links are rendered separately for the normal and the mobile navbar. The reason for this is that the links are structured differently (flat list vs nested lists) and reside in different containers. 
> 
> On the CSS side, apart from the collapsible navbar I overhauled the styles for the search input, especially the small reset "X" button. The positioning of the reset button is now simpler and more robust by using `absolute` instead of `relative` position, and doesn't require moving the search input and label to the right anymore.
> 
> The collapsible menu uses the `aria-controls`, `aria-expanded` attributes as described in the following wiki page:
> 
> https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions
> 
> Furthermore, the `aria-label` attribute is used to provide a human-readable lable for the button.
> 
> https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Thanks for the feedback, Pavel! Both of the issues you spotted are very valid. I spent some time on both of them, but gave up for the time being since I didn't find a quick solution. 

Regarding the menu collapsing when resizing the browser (only when changing browser width btw), avoiding this would have required either duplication of hard-coded values between the CSS and script files, or adding more complexity to the script than seemed reasonable to me. I haven't looked at how Bootstrap solves this particular problem, but I guess they are willing to go the extra mile since this is part of their core purpose. In the pursuit of simplicity and maintainability, I thought the closing behaviour was acceptable. 

Regarding the same color being used for active and inactive links in the navigation bar, I tried to find a faded-out color for the inactive links, but it turned out that with the particular blue background any color but white is considered to break accessibility rules. We might want to file an separate issue for this.

-------------

PR: https://git.openjdk.java.net/jdk/pull/5360