RFR: JDK-8273034: Make javadoc navigation collapsible on small displays
Hannes Wallnöfer
hannesw at openjdk.java.net
Fri Sep 3 12:22:39 UTC 2021
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
-------------
Commit messages:
- JDK-8273034: make header scrollable if necessary
- JDK-8273034: update tests
- JDK-8273034: fix media queries
- JDK-8273034: Better collapse
- JDK-8273034: Clean up CSS for sub-navigation bar
- JDK-8273034: Make javadoc navigation collapsible on small displays
Changes: https://git.openjdk.java.net/jdk/pull/5360/files
Webrev: https://webrevs.openjdk.java.net/?repo=jdk&pr=5360&range=00
Issue: https://bugs.openjdk.java.net/browse/JDK-8273034
Stats: 253 lines in 10 files changed: 170 ins; 12 del; 71 mod
Patch: https://git.openjdk.java.net/jdk/pull/5360.diff
Fetch: git fetch https://git.openjdk.java.net/jdk pull/5360/head:pull/5360
PR: https://git.openjdk.java.net/jdk/pull/5360
More information about the javadoc-dev
mailing list