Release v2.5.4 New Design for Navigation Bar + Fixes for Accessibility Issues · chriskyfung/amp-affiliately-jekyll-theme

What's Changed

Refactored Navbar Menu with A11y Design 👨‍🦽
- Replaced the <div> soup with <ul> and <li> elements, following the WAI-ARIA Authoring Practices 1.2.
- Isolated the search button and right-aligned button-like links from the ul.navbar-nav list and grouped into an adjacent sibling list with a class name .navbar-btngroup.
- The items grouped in the .navbar-btngroup always align horizontally in a single row.
- Enabled to update the aria-expanded attributes of submenu toggles using amp-bind, by following this amp-bind example on AMP for WordPress (amp-wp.org).
- Enabled to move the focus to the first sub-item when a menu/submenu expands using AMP tap event and focus action.
- Add limits to the height of expanded menu and submenus:
  - Hamburger menu: A max-height of `60vh on small screens only
  - Submenus (navbar layout): A max-height of `60vh on large screens only
- Show a thin scrollbar if a menu/submenu overflows
- Added a separator above the first item of the hamburger menu
- Added CSS styles and media queries to responsively change the margin of menu items.
Restored initial-scale=1 in viewport settings. Learn more: Controlling the viewport - amp.dev

Corrected and tested ARIA Landmarks and ARIA Labels with axe DevTools.
Fixed missing focus ring on focusing elements with .btn class.
Fixed missing the button to resize overflown Disqus Comments. Learn more: - amp.dev.

Fixed the crawl error of the redirected page /category/guide/.
Fixed the custom scrollbar not work on the /responsive-web-design/ page in Firefox.

Full Changelog: v2.4.0...v2.5.4