Feeds

Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Dec 26 2023
Dec 26

I bet a lot of you learned about Drupal and the awesome Drupal Community at a local Drupal event. I went to the Western Massachusetts Drupal Camp back in 2011 after I was assigned a Drupal website to support at work and had no idea what Drupal even was. I attended many great sessions, met a lot of folks in the local Drupal community and even purchased the “Definitive Guide to Drupal 7” (remember all the great authors and the almost 1200 pages of Drupal insights). I was hooked on Drupal that day and never looked back.

History

The number of Drupal events increased over the years and sprung up in Drupal communities around the globe as Drupal popularity expanded. The idea of an official event organizers group was discussed by a large group of event organizers at DrupalCon Seattle in 2019 through a roundtable organized by Rachel Lawson (rachel_norfolk ) of the Drupal Association. As discussions ensued there was an enthusiastic response to the idea of forming an official group to support current and future event organizers.

In 2019 a group of event organizers decided to make this official and worked with the Drupal Association to create a charter, propose it to Dries and once accepted, the official “Event Organizers Working Group” was formed.

The mission of the Event Organizers Working Group (EOWG) is to support community-led teams to grow Drupal through local events.

EOWG Board

Current EOWG board members include: 

  • Avi Schwab, President (froboy) - MidCamp, Midwest Open Source Alliance - Chicago, IL, USA
  • Leslie Glynn, Vice President (leslieg)  Design 4 Drupal Boston, NEDCamp - Boston, MA, USA
  • Sean Walsh, Secretary (seantwalsh) - DrupalCamp NJ - Eatontown, NJ, USA
  • Matthew Saunders (MatthewS) - Drupalcamp Colorado - Denver, CO, USA
  • John Picozzi (johnpicozzi) - New England Drupal Camp (NEDCamp) - RI, USA
  • Bert Boerland (bertboerland) - drupaljam.nl  and splashawards.nl  - Netherlands
  • Suchi Garg (gargsuchi) - Drupal Melbourne meetup - Melbourne, Australia

Current Advisory group members:

  • Nico Grienaur (Grienaur) - DrupalAT Board Member, DrupalCamp Vienna, DrupalCon Vienna 2017, Splash Awards AT, Drupal Developer Days 2023, Drupical - Vienna, Austria
  • Kristen Pol (Kristen Pol) - Drupal Contribution - Santa Cruz, CA, USA
  • Salim Lakhani (salimlakhani) - Drupalcamp Colorado, Florida Drupal Camp - Denver, CO, USA

We are currently seeking nominations for folks interested in joining the board or the advisory committee. Please consider nominating yourself or someone you feel would be interested by commenting on this issue.

Meetings

EOWG Board meetings are held on the first Tuesday each month via Zoom. 

General Event Organizer meetings are currently held as asynchronous meetings on the second Tuesday each month in the Event Organizers channel in Drupal Slack. The chat thread is open 24 hours so that folks around the globe can contribute to the chat discussions at a time that works best for them. All are welcome to join the discussions or add new topics to be discussed.

Involvement in meetings and initiatives will be recognized with credits on the Event Organizers issue queue.

EOWG slack screenshotEOWG slack screenshotParticipating in a Slack meeing

Current Initiatives:

  • Event website platform - An easy way to spin up  a website for a new or existing event.
  • Community Events page on Drupal.org. The global events page lists upcoming Drupal Camps, DrupalCons, Local Meetups, Upcoming Trainings, Contribution Events, Calls for Content and Proposed Events. Make sure to add your event information to this page so folks will be able to see all Drupal events in one place. You can include whether the event is in-person, virtual or both. Make sure to include a link to your event website.
  • Contribution events - Contribution events include Global Contribution Days, Contribution days at Drupal Camps, and other events and ways to contribute to the various initiatives. Contributing to Drupal helps make the Drupal experience better for everyone.
  • Marketing of the EOWG and how event organizers can benefit from information shared by the EOWG.

Let us know if you have an interest in working with Board member(s) on any of these initiatives.

EOWG event mapEOWG event mapThe Community Events page

To Dos

  • Add your event to the Events/Community events page on Drupal.org.
  • Sign up for the EOWG Newsletter to get up to date information on upcoming meetings, initiatives, and upcoming events around the globe. Subscribe on the Events - Community Events page on Drupal.org
  • Join the Event Organizers channel on Drupal slack - #event-organizers at drupal.slack.com
  • Consider nominating yourself for an EOWG Board seat 
  • Reach out to any of the Board members with questions or ask in our Slack channel. 

We look forward to collaborating with current event organizers and those considering starting new events. All are welcome to join.

Leslie Glynn is the Manager of Customer Success at Redfin Solutions in Portland, Maine. She is currently an initiative lead for the Project Browser Strategic Initiative and is the Vice-President of the EOWG. She is a former At-large Director on the Drupal Association Board of Directors and was the 2019 recipient of the Aaron Winborn Award. Leslie champions Drupal whenever possible. She helps organize several Drupal events including Design 4 Drupal Boston and New England Drupal Camp (NEDCamp). When she’s not working, Leslie enjoys watching Boston area sports teams and spending time with her family and her granddaughter, Isla.

Nov 14 2023
Nov 14

It's a standard component:

a menu where the user can hover over a top-level menu item to see its submenu

Almost every one of our clients has requested a variation of this at the top of every page of their website. Starting with Drupal 7, we became accustomed to a specific toolset for building these. There were lots of options, mobile support, and everything worked from our perspective and our client's perspective. But our menus had a bias towards visual users with a mouse. The words "hover" and "see" were in the definition of the component, actions only a subset of users can accomplish. Accessibility and inclusivity need to start at the roots, so we redefined the component:

a menu where each top-level menu item has a submenu that the user can choose to navigate

With this definition, it became obvious the component was broken for keyboard users, because they did not have a choice. Using a keyboard to navigate through menu links meant tabbing through every single submenu. So how do we do this better?

We started by looking at recommendations from the WAI Authoring Practices Guide and found the Disclosure Navigation Hybrid Menu. This component simply adds a toggle button to open submenus. Now all users have a choice.

a menu with a submenu toggle buttona menu with a submenu toggle button

Re-handling Hover

With the basic interface set, we needed to re-add the hover navigation. But this created a conflict. If a user hovers over the toggle button, the submenu should open. If a user clicks the toggle button, the submenu should toggle. So if a user hovers over a toggle button and clicks it, then the submenu is toggled open and immediately toggled shut. Here are some solutions we've built to resolve this behavior:

  1. Keyboard only: the toggle button can only be triggered by keyboard, not pointer devices.
  2. Only open: clicking the toggle button only opens the submenu.
  3. Hide until focused: visually hide the toggle button until it receives tab focus, so pointers can't access it by default.

Leveraging the Full-stack in Drupal

When rebuilding this component, we looked at existing Javascript libraries, but kept running into the same issues. Either they were so opinionated about the HTML that it was difficult to template in Drupal, or they were so generic that they were inconsistent and hard to customize. Finally we realized that we could write the template and Javascript in tandem and created a customizable component with less than 200 lines of Javascript and no external dependencies. In fact our accessibility standards actually made the functionality easier to code with the aria-controls and aria-labelledby attributes. For example, a toggle button for a submenu would have an aria-controls attribute set to the ID of the corresponding submenu, and the submenu would have its aria-labelledby attribute set to the ID of the toggle button. This is necessary for screen readers to communicate connections between elements that can't be seen, but it also makes it trivial to code the toggle interaction. Other libraries often create data-models of the menu to track these connections, but that's not necessary when everything is explicitly defined in the HTML. The only issue is generating unique ID's for all the toggles and submenus. But Drupal makes this easy for us with its HTML utility class which provides a simple getUniqueId method. And now in Drupal 10.2 there's a clean_unique_id function for Twig templates. 

Contribution

And once all of that was figured out, we gave the component back to Drupal and, thanks to the community, made it stable and secure. So the next time a client needs a complex menu without losing accessibility, load up Disclosure menu and see if it fits your needs. If not, file an issue and let's make it better for everyone.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web