Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add CSS and JS to automatically add accessible dropdown and mega menus #37

Open
ao5357 opened this issue May 4, 2023 · 0 comments
Open
Labels
enhancement New feature or request help wanted Extra attention is needed
Milestone

Comments

@ao5357
Copy link
Member

ao5357 commented May 4, 2023

Presently, menus with an expanded hierarchy display as trees that inherit styling from the parent row of links. In order to speed up site development, implement dropdown menus for at least 2, if not 3, levels of hierarchy.

Regular dropdowns

A dropdown menu for frost should abide by the following specifications/requirements:

  • Should use vanilla JavaScript (no jQuery) and ideally no third-party dependencies
  • Should leverage wisdom and lessons learned from the Olivero theme project
  • Should allow a top-level menu link to be single-clicked on any viewport to navigate to that link, with a secondary control outside of the link to expand or collapse the child menu(s)
  • Must operate primarily on click/tap, with any hover actions being a progressive enhancement
  • Must have an appropriate accessibility tree, with valid announcements and tweaks for ease-of-use with assistive technologies
  • Should be styled to look pretty darn good at all viewports
  • Must use frost_theme CSS custom properties and utility classes where appropriate

Stripe-based mega menus

Since sites frequently use mega menus instead of straightforward dropdowns, frost should support mega menus -- or at least provide scaffolding for the userspace to support them quickly -- at install-time. The megas should abide by the following specs:

  • Must require "drupal/menu_item_extras": "^2.19", or its most current version
  • Must add a field_section Entity reference revisions field to menu items of at least the main navigation if not other menus, allowing up to 1 paragraph of type "Stripe: Atomic" (and potentially "From library" or others with strong argument in favor)
  • Should give due consideration to the display of the field in the theme, especially DOM order inside the menu tree (@ao5357 has some prior art for this)
  • Should only display on click/hover on desktop, with regular dropdowns on viewports narrower than... 900px?
  • Should provide screenshots or a demo of an atomic stripe mega panel containing a configured menu block at the second or deeper level in a layout with some other arbitrary, static content
  • Should have a few styles in line with frost's overall theming implementation, for things like drop shadows
  • Must take accessibility into account
@ao5357 ao5357 added enhancement New feature or request help wanted Extra attention is needed labels May 4, 2023
@ao5357 ao5357 added this to the frost 1.3.0 milestone May 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
Status: Todo
Development

No branches or pull requests

1 participant